@font-face{
  font-family:"Patrick Hand";
  src:url("fonts/patrick-hand-latin-400-normal.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Architects Daughter";
  src:url("fonts/architects-daughter-latin-400-normal.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#F6EFDF;
  --paper-2:#EFE5CE;
  --ink:#2B2620;
  --ink-2:#6E6455;
  --rule:#D8CBAF;
  --accent:#B4502B;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --hand:"Patrick Hand","Chalkboard SE","Segoe Print","Bradley Hand",cursive;
  --hand-head:"Architects Daughter","Chalkboard SE","Segoe Print","Bradley Hand",cursive;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}

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

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

.page{
  position:relative;
  max-width:68ch;
  margin:0 auto;
  padding:2rem 1.25rem 3rem;
  min-height:100vh;
  background:var(--paper);
  background-image:radial-gradient(circle, rgba(110,100,85,0.22) 1px, transparent 1.2px);
  background-size:28px 28px;
  background-position:0 9px;
}

.page::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0.55rem;
  width:4px;
  background:linear-gradient(to right,
    rgba(180,80,43,0.28) 0 1px,
    transparent 1px 3px,
    rgba(180,80,43,0.22) 3px 4px);
}

@media (min-width:700px){
  body{background:#E7DBC0}
  .page{
    padding:3.5rem 2.5rem 5rem;
    margin:1.5rem auto 2.5rem;
    min-height:calc(100vh - 4rem);
    border-radius:3px;
    box-shadow:0 2px 6px rgba(43,38,32,0.12), 0 10px 28px rgba(43,38,32,0.14);
  }
  .page::before{left:2.4rem}
  .page::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:9px;
    width:18px;
    background-image:radial-gradient(circle at 9px 60px,
      #E7DBC0 5px, rgba(43,38,32,0.28) 5.5px, transparent 7px);
    background-size:18px 120px;
    background-repeat:repeat-y;
  }
}

a{
  color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

a:hover{
  text-decoration-thickness:1px;
  text-decoration-style:wavy;
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

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

.site-head{
  padding-bottom:0.9rem;
  margin-bottom:1.6rem;
}

.site-name{
  font-family:var(--hand-head);
  display:table;
  margin:0;
  font-size:1.6rem;
  line-height:1.2;
  letter-spacing:0.01em;
  font-weight:700;
  padding-bottom:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='7' viewBox='0 0 110 7'%3E%3Cpath d='M2 4 q 14 -4 27 0 t 27 0 t 27 0 t 27 0' fill='none' stroke='%23B4502B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") bottom left repeat-x;
  background-size:110px 7px;
}

.site-name a{
  color:var(--ink);
  text-decoration:none;
}

.site-name a:hover{color:var(--accent)}

.site-sub{
  margin:0.3rem 0 0;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-2);
}

.tagline{
  margin:0.9rem 0 0;
  font-size:1rem;
  font-style:italic;
  color:var(--ink-2);
}

/* ---------- tag chips ---------- */

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin:0 0 1.75rem;
  padding:0;
  list-style:none;
}

.chip{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:transparent;
  border:1px solid var(--rule);
  border-radius:4px;
  padding:0.25rem 0.6rem;
  text-decoration:none;
  cursor:pointer;
}

button.chip{
  font:inherit;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  line-height:1.65;
}

.chip:hover{
  color:var(--accent);
  border-color:var(--accent);
}

.chip[aria-pressed="true"],
.chip.active{
  color:var(--accent);
  border-color:var(--accent);
}

.chip.small{
  padding:0.12rem 0.45rem;
  font-size:0.62rem;
  cursor:default;
}

.chip.small:hover{
  color:var(--ink-2);
  border-color:var(--rule);
}

/* ---------- post list ---------- */

.post-list{
  margin:0;
  padding:0;
  list-style:none;
}

.post-list li{
  padding:1rem 0;
  border-bottom:1px solid var(--rule);
}

.post-list li:first-child{padding-top:0.2rem}

.entry-meta::before{
  content:"\2013\00a0";
  color:var(--accent);
}

.entry-meta{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 0.15rem;
}

.entry-date{
  display:block;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--ink-2);
  margin-bottom:0.25rem;
}

.entry-title{
  font-family:var(--hand-head);
  font-variant:small-caps;
  letter-spacing:0.03em;
  margin:0 0 0.2rem;
  font-size:1.18rem;
  line-height:1.35;
  font-weight:700;
}

.entry-title a{
  color:var(--ink);
  text-decoration:none;
}

.entry-title a:hover{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.entry-summary{
  margin:0;
  color:var(--ink-2);
  font-size:0.92rem;
  line-height:1.5;
}

.entry-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
}

.empty-note{
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--ink-2);
  padding:1.5rem 0;
}

/* ---------- article ---------- */

.post-head{margin-bottom:2rem}

.post-head h1{
  font-family:var(--hand-head);
  font-variant:small-caps;
  letter-spacing:0.03em;
  margin:0.2rem 0 0.5rem;
  font-size:1.75rem;
  line-height:1.25;
  font-weight:700;
}

.post-meta{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--ink-2);
  text-transform:uppercase;
}

.post-meta time{
  display:inline-block;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:3px;
  padding:0 0.4em;
  transform:rotate(-1.4deg);
}

.post-head .entry-tags{margin-top:0.75rem}

article h2{
  font-family:var(--hand-head);
  display:table;
  font-size:1.3rem;
  line-height:1.3;
  margin:2.2rem 0 0.8rem;
  padding-bottom:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='7' viewBox='0 0 110 7'%3E%3Cpath d='M2 4 q 14 -4 27 0 t 27 0 t 27 0 t 27 0' fill='none' stroke='%23B4502B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") bottom left repeat-x;
  background-size:110px 7px;
}

mark{
  color:inherit;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background:linear-gradient(100deg,rgba(255,213,60,0) 1%,rgba(255,213,60,.55) 4%,rgba(255,213,60,.45) 96%,rgba(255,213,60,0) 99%);
  border-radius:0.4em 0.2em 0.5em 0.25em;
  padding:0.08em 0.3em;
  margin:0 -0.12em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

mark.hl2{
  background:linear-gradient(100deg,rgba(255,150,90,0) 1%,rgba(255,150,90,.45) 4%,rgba(255,150,90,.38) 96%,rgba(255,150,90,0) 99%);
}

.sketchbox{
  border:2px solid var(--ink);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  padding:0.9rem 1.2rem;
  margin:1.4rem 0;
  background:var(--paper-2);
  transform:rotate(-0.35deg);
}

.sketchbox p{margin:0 0 0.5rem}
.sketchbox p:last-child{margin-bottom:0}

.doodle{
  display:block;
  margin:1.4rem auto 0.4rem;
  width:100%;
  max-width:350px;
  height:auto;
}

.doodle text{font-family:var(--hand)}

.doodle path:not(.nd){
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:sketch 1.4s ease-out forwards;
}

.doodle path:not(.nd):nth-of-type(2){animation-delay:0.15s}
.doodle path:not(.nd):nth-of-type(3){animation-delay:0.3s}
.doodle path:not(.nd):nth-of-type(4){animation-delay:0.45s}
.doodle path:not(.nd):nth-of-type(5){animation-delay:0.6s}
.doodle path:not(.nd):nth-of-type(6){animation-delay:0.75s}
.doodle path:not(.nd):nth-of-type(7){animation-delay:0.9s}
.doodle path:not(.nd):nth-of-type(8){animation-delay:1.05s}
.doodle path:not(.nd):nth-of-type(9){animation-delay:1.2s}
.doodle path:not(.nd):nth-of-type(n+10){animation-delay:1.35s}

.doodle path.nd,
.doodle text{
  opacity:0;
  animation:dfade 0.7s ease forwards;
  animation-delay:1.7s;
}

.doodle path:not(.nd):nth-of-type(odd){animation-duration:1.15s}

@keyframes sketch{to{stroke-dashoffset:0}}
@keyframes dfade{to{opacity:1}}
@keyframes swipe{from{background-size:0% 100%}to{background-size:100% 100%}}

@supports (animation-timeline: view()){
  .doodle path:not(.nd){
    animation:sketch 1s ease-out both;
    animation-delay:0s;
    animation-timeline:view();
    animation-range:entry 15% cover 45%;
  }
  .doodle path.nd,
  .doodle text{
    animation:dfade 1s ease both;
    animation-delay:0s;
    animation-timeline:view();
    animation-range:cover 35% cover 55%;
  }
  article mark{
    animation:swipe 0.7s ease-out both;
    animation-timeline:view();
    animation-range:entry 35% entry 85%;
  }
}

.doodle-cap{
  text-align:center;
  font-family:var(--mono);
  font-size:0.66rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 1.3rem;
}

.h2doodle{
  vertical-align:-0.2em;
  margin-left:0.35rem;
}

article h3{
  font-family:var(--hand-head);
  font-size:1.1rem;
  margin:1.8rem 0 0.6rem;
}

article p{margin:0 0 1.1rem}

article blockquote{
  margin:1.4rem 0;
  padding:0.9rem 1.1rem;
  background:var(--paper-2);
  border-left:3px solid var(--rule);
  border-radius:0 4px 4px 0;
}

article blockquote p:last-child{margin-bottom:0}

article table{
  width:100%;
  border-collapse:collapse;
  margin:1.4rem 0;
  font-size:0.92rem;
}

article th,
article td{
  text-align:left;
  padding:0.45rem 0.7rem 0.45rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}

article th{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:400;
}

article td.num,
article th.num{
  font-family:var(--mono);
  font-size:0.85rem;
  text-align:right;
  padding-right:0;
}

article code{
  font-family:var(--mono);
  font-size:0.85em;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:0.05em 0.35em;
}

.figure{
  margin:1.6rem 0;
  padding:1rem;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:4px;
}

.figure figcaption{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-top:0.7rem;
}

article::after{
  content:"";
  display:block;
  width:72px;
  height:7px;
  margin:2.4rem auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='7' viewBox='0 0 110 7'%3E%3Cpath d='M2 4 q 14 -4 27 0 t 27 0 t 27 0 t 27 0' fill='none' stroke='%23B4502B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/72px 7px no-repeat;
  opacity:0.7;
}

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

.site-foot{
  margin-top:3rem;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--ink-2);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .doodle path:not(.nd){stroke-dasharray:none;stroke-dashoffset:0}
  .doodle path.nd,
  .doodle text{opacity:1}
  mark{background-size:100% 100%}
}