:root{
  --desk:#6f5d78;--desk-dark:#51445a;--desk-line:#82718c;--paper:#fbf8ef;--paper-warm:#f6efdc;
  --paper-shadow:#d8cdb8;--folder:#d7c99f;--index:#f4edd8;--sticky:#eee3a8;--ink:#241f27;--muted:#716777;
  --rule:#c8bbcf;--accent:#76529a;--accent-dark:#4c365f;--selection:#d7c2e5
}

*,*:before,*:after{box-sizing:border-box}

html{
  min-height:100%;
  background:var(--desk)
}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:var(--desk);
  background-image:repeating-linear-gradient(
    0deg,
    transparent 0 31px,
    color-mix(in srgb,var(--desk-line) 24%,transparent) 31px 32px
  );
  font:16px/1.55 "Iowan Old Style",Palatino,"Palatino Linotype",Georgia,"Times New Roman",serif
}

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

a:hover{
  color:var(--ink);
  background:var(--selection)
}

::selection{
  color:var(--ink);
  background:var(--selection)
}

.site-shell{
  width:min(1060px,calc(100% - 30px));
  margin:26px auto 60px
}

.site-header{
  position:relative;
  z-index:20;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:end;
  width:min(930px,calc(100% - 28px));
  margin:12px auto -5px;
  padding:14px 18px 13px;
  background:var(--folder);
  border:1px solid color-mix(in srgb,var(--accent-dark) 55%,var(--folder));
  box-shadow:4px 5px 0 color-mix(in srgb,var(--desk-dark) 68%,transparent);
  transform:rotate(-.35deg)
}

.site-name{
  margin:0;
  color:var(--accent-dark);
  font-size:clamp(1.85rem,4vw,2.65rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.035em
}

.site-tagline{
  margin:7px 0 0;
  color:color-mix(in srgb,var(--ink) 75%,var(--folder));
  font-size:.94rem;
  font-style:italic
}

.site-tools,.site-nav,.color-control{
  display:flex;
  flex-wrap:wrap;
  align-items:center
}

.site-tools{
  gap:11px;
  justify-content:flex-end
}

.site-nav{
  gap:5px 11px
}

.site-nav a{
  color:var(--accent-dark);
  font-size:.83rem;
  text-transform:lowercase
}

.color-control{
  gap:6px;
  color:var(--muted);
  font-size:.75rem;
  white-space:nowrap
}

.color-control input{
  display:block;
  width:31px;
  height:23px;
  padding:0;
  border:1px solid var(--accent-dark);
  border-radius:0;
  background:var(--paper);
  cursor:pointer
}

.page-home .site-shell{
  width:min(1120px,calc(100% - 28px))
}

.page-home #page-content{
  padding:44px 22px 70px
}

.desk-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(250px,.9fr);
  grid-template-areas:
    "lead research"
    "lead sticky"
    "art playing"
    "art scrap"
    "art stamps";
  gap:28px 34px;
  align-items:start;
  min-height:640px
}

.desk-paper,.index-card,.sticky-note,.playing-card,.sketch-paper,.art-page-sheet,.equation-figure{
  position:relative
}

.desk-paper{
  grid-area:lead;
  min-height:425px;
  padding:31px 38px 37px;
  background:linear-gradient(#ffffff33,transparent 90px),var(--paper);
  border:1px solid var(--paper-shadow);
  box-shadow:
    6px 8px 0 color-mix(in srgb,var(--desk-dark) 45%,transparent),
    0 0 0 1px #ffffff24;
  transform:rotate(-.7deg)
}

.desk-paper:before,.sketch-paper:before,.art-page-sheet:before{
  content:"";
  position:absolute;
  background:color-mix(in srgb,white 72%,var(--accent) 28%);
  opacity:.55
}

.desk-paper:before{
  top:-8px;
  left:42%;
  width:90px;
  height:24px;
  border-inline:1px solid #3c2d4614;
  transform:rotate(2deg)
}

.file-kicker,.file-link,.card-label,.small-note,.scrap-label,.sketch-file-label,.art-page-kicker,.art-entry figcaption,.stamp,.post-file-header,.equation-figure figcaption,.notebook-end span{
  font-family:"Courier New",Courier,monospace
}

.file-kicker{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:23px;
  padding-bottom:14px;
  color:var(--muted);
  border-bottom:1px solid color-mix(in srgb,var(--accent-dark) 38%,var(--paper));
  font-size:.71rem;
  letter-spacing:.09em
}

.file-kicker span:last-child{
  padding:1px 5px;
  color:var(--accent-dark);
  border:1px solid var(--accent-dark);
  transform:rotate(1.5deg)
}

.lead-file time{
  color:var(--muted);
  font-size:.8rem
}

.lead-file h2{
  max-width:620px;
  margin:8px 0 15px;
  color:var(--accent-dark);
  font-size:clamp(1.65rem,4vw,2.55rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.03em
}

.lead-file h2 a{
  text-decoration-thickness:1px
}

.lead-file p{
  max-width:600px;
  margin:0 0 1em
}

.file-link{
  margin-top:23px!important;
  font-size:.79rem
}

.index-card{
  grid-area:research;
  padding:24px 25px 28px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 26px,
      color-mix(in srgb,var(--rule) 62%,transparent) 26px 27px
    ),
    var(--index);
  border:1px solid color-mix(in srgb,var(--paper-shadow) 70%,var(--accent));
  box-shadow:4px 5px 0 color-mix(in srgb,var(--desk-dark) 38%,transparent);
  transform:rotate(1deg)
}

.index-card:after{
  content:"";
  position:absolute;
  right:17px;
  top:-13px;
  width:27px;
  height:52px;
  border:2px solid color-mix(in srgb,var(--muted) 70%,var(--paper));
  border-left-color:transparent;
  border-radius:14px 14px 10px 10px;
  transform:rotate(7deg)
}

.card-label{
  margin-bottom:8px;
  color:var(--muted);
  font-size:.7rem;
  letter-spacing:.1em
}

.index-card h2{
  margin:0 0 15px;
  color:var(--accent-dark);
  font-size:1.35rem;
  font-weight:400
}

.index-card ul{
  margin:0;
  padding-left:18px
}

.index-card li{
  margin-bottom:10px
}

.small-note{
  color:var(--muted);
  font-size:.69rem
}

.sticky-note{
  grid-area:sticky;
  justify-self:center;
  width:min(235px,90%);
  min-height:155px;
  padding:29px 23px 22px;
  background:var(--sticky);
  box-shadow:4px 5px 0 color-mix(in srgb,var(--desk-dark) 30%,transparent);
  transform:rotate(-2.2deg)
}

.sticky-note:before{
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-dark);
  box-shadow:1px 2px 0 #00000040
}

.sticky-note:after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:28px;
  height:28px;
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--sticky) 70%,var(--paper-shadow)) 50%,
    transparent 50%
  )
}

.sticky-note strong{
  color:var(--accent-dark);
  font-weight:400;
  text-decoration:underline
}

.sticky-note p{
  margin:9px 0 0
}

.art-sketch{
  grid-area:art;
  display:block;
  width:min(470px,92%);
  justify-self:center;
  color:inherit;
  text-decoration:none;
  transform:rotate(-1.15deg)
}

.art-sketch:hover{
  color:inherit;
  background:transparent
}

.art-sketch:hover .sketch-paper{
  transform:translateY(-2px);
  box-shadow:
    7px 9px 0 color-mix(in srgb,var(--desk-dark) 35%,transparent),
    0 12px 20px #1c141f29
}

.sketch-paper{
  min-height:280px;
  padding:24px 25px;
  background:#fffefa;
  border:1px solid #d7d0ca;
  box-shadow:5px 7px 0 color-mix(in srgb,var(--desk-dark) 34%,transparent);
  transition:transform 120ms ease,box-shadow 120ms ease
}

.sketch-paper:before{
  top:-9px;
  left:34px;
  width:82px;
  height:21px;
  transform:rotate(-2deg)
}

.sketch-file-label{
  margin-bottom:13px;
  color:#716a70;
  font-size:.68rem;
  letter-spacing:.08em
}

.sketch-paper canvas{
  display:block;
  width:100%;
  max-height:330px
}

.seed-canvas{
  aspect-ratio:1;
  height:auto;
  background:var(--paper)
}

.sketch-paper .seed-canvas,.art-entry .seed-canvas{
  border:1px solid color-mix(in srgb,var(--accent) 16%,white)
}

.playing-card{
  grid-area:playing;
  justify-self:end;
  align-self:start;
  width:min(300px,96%);
  margin-top:16px;
  padding:17px;
  background:var(--paper);
  border:1px solid var(--paper-shadow);
  box-shadow:4px 5px 0 color-mix(in srgb,var(--desk-dark) 34%,transparent);
  transform:rotate(.9deg)
}

.playing-tab{
  position:absolute;
  z-index:3;
  top:-30px;
  left:17px;
  display:grid;
  place-items:center;
  width:112px;
  height:39px;
  padding:0 12px 5px;
  color:var(--accent-dark);
  background:var(--sticky);
  border:0;
  box-shadow:2px 3px 0 color-mix(in srgb,var(--desk-dark) 24%,transparent);
  clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);
  font:700 .72rem/1 "Courier New",Courier,monospace;
  letter-spacing:.1em;
  text-decoration:none;
  text-transform:uppercase;
  transform:rotate(-2deg)
}

.playing-tab:hover{
  color:var(--ink);
  background:color-mix(in srgb,var(--sticky) 76%,var(--accent) 24%)
}

.playing-widget{
  display:block;
  background:transparent;
  text-decoration:none
}

.playing-widget:hover{
  background:transparent
}

.playing-cover-window{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--paper);
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--paper-shadow))
}

#lastfm-widget{
  position:absolute;
  display:block;
  width:1250%;
  max-width:none;
  height:auto;
  left:-50%;
  top:-37.5%;
  margin:0
}

.scrap-note{
  grid-area:scrap;
  justify-self:end;
  width:min(315px,92%);
  padding:17px 20px 18px;
  background:var(--paper-warm);
  border-block:1px dashed var(--muted);
  box-shadow:3px 4px 0 color-mix(in srgb,var(--desk-dark) 26%,transparent);
  transform:rotate(.8deg)
}

.scrap-label{
  color:var(--accent-dark);
  font-size:.73rem;
  letter-spacing:.08em
}

.scrap-note p{
  margin:6px 0 0;
  color:var(--muted);
  font-style:italic
}

.stamp-sheet{
  grid-area:stamps;
  justify-self:end;
  display:flex;
  flex-direction:column;
  gap:13px;
  align-items:flex-start;
  padding:4px 4px 0
}

.stamp{
  display:inline-block;
  padding:5px 9px 4px;
  color:var(--accent-dark);
  border:2px solid var(--accent-dark);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transform:rotate(-2deg);
  opacity:.82
}

.stamp-tilt{
  transform:rotate(2.8deg)
}

.page-art .site-shell,.page-post .site-shell{
  width:min(980px,calc(100% - 28px))
}

.page-art #page-content,.page-post #page-content{
  padding:42px 0 72px
}

.art-page-sheet{
  width:min(800px,calc(100% - 28px));
  margin:auto;
  padding:42px 48px 56px;
  background:#fffefa;
  border:1px solid #d7d0ca;
  box-shadow:
    7px 9px 0 color-mix(in srgb,var(--desk-dark) 38%,transparent),
    0 18px 28px #20162526;
  transform:rotate(.12deg)
}

.art-page-sheet:before{
  top:-10px;
  left:55%;
  width:105px;
  height:23px;
  transform:translateX(-50%) rotate(1deg)
}

.art-page-kicker{
  color:#716a70;
  font-size:.7rem;
  letter-spacing:.09em
}

.art-page-sheet h1{
  margin:8px 0 28px;
  color:var(--accent-dark);
  font-size:clamp(1.8rem,4vw,2.5rem);
  font-weight:400
}

.art-entry{
  margin:0
}

.art-entry+.art-entry{
  margin-top:46px;
  padding-top:34px;
  border-top:1px solid color-mix(in srgb,var(--accent) 18%,#d7d0ca)
}

.art-entry img,.art-entry canvas{
  display:block;
  max-width:100%;
  max-height:680px;
  margin:auto;
  object-fit:contain
}

.art-entry .seed-canvas{
  width:min(100%,680px)
}

.art-entry figcaption{
  margin-top:10px;
  color:#716a70;
  font-size:.72rem
}

.page-post .notebook-page{
  position:relative;
  width:min(820px,calc(100% - 30px));
  margin:auto;
  padding:48px 62px 68px;
  color:#211d23;
  background:#fff;
  border:1px solid #d7d0d8;
  box-shadow:
    0 2px 3px #190f1e2e,
    8px 10px 0 #30223740,
    16px 22px 30px #23182a33;
  transform:rotate(.08deg)
}

.page-post .notebook-page:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(#3c2d410a .45px,transparent .5px);
  background-size:7px 7px;
  opacity:.28
}

.notebook-page>*{
  position:relative;
  z-index:1
}

.post-file-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:23px;
  padding-bottom:8px;
  color:#6e6570;
  border-bottom:1px solid #d7d0d8;
  font-size:.7rem;
  letter-spacing:.08em
}

.file-number{
  margin-right:9px
}

.classification{
  display:inline-block;
  padding:1px 5px;
  color:var(--accent-dark);
  border:1px solid var(--accent-dark);
  transform:rotate(-.8deg)
}

.back{
  color:var(--accent-dark);
  font-size:.72rem;
  letter-spacing:0
}

.post-title{
  margin:0 0 7px;
  color:#2d2034;
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.03em
}

.meta{
  margin-bottom:31px;
  color:#756b77;
  font-size:.82rem
}

.post-body p{
  margin:0 0 1.15em;
  color:#211d23;
  font-size:1rem;
  line-height:1.62
}

.post-body h2{
  margin:2.25em 0 .8em;
  padding-bottom:5px;
  color:#3e294a;
  border-bottom:1px solid #d9d2db;
  font-size:1.25rem;
  font-weight:400;
  line-height:1.25
}

.post-body h2:before{
  content:"§ ";
  color:var(--accent)
}

.page-post a{
  color:#69478a
}

.page-post a:hover{
  color:#3d2850;
  background:#eee5f4
}

.post-body ul{
  padding-left:21px
}

.post-body li{
  margin-bottom:7px;
  color:#211d23
}

.post-body li::marker{
  color:var(--accent)
}

.equation-figure{
  margin:2em 10px 2.1em;
  padding-top:8px;
  transform:rotate(-.2deg)
}

.equation-figure:nth-of-type(even){
  transform:rotate(.25deg)
}

.equation-figure:before,.equation-figure:after{
  content:"";
  position:absolute;
  z-index:3;
  top:-1px;
  width:70px;
  height:21px;
  background:color-mix(in srgb,white 82%,var(--accent) 18%);
  border-inline:1px solid color-mix(in srgb,transparent 70%,var(--accent) 30%);
  opacity:.62;
  pointer-events:none
}

.equation-figure:before{
  left:28px;
  transform:rotate(-2.8deg)
}

.equation-figure:after{
  right:30px;
  transform:rotate(2.2deg)
}

.equation{
  padding:17px 19px;
  overflow-x:auto;
  color:#111;
  background:color-mix(in srgb,white 96%,var(--accent) 4%);
  border:1px solid color-mix(in srgb,white 75%,var(--accent) 25%);
  box-shadow:2px 3px 0 color-mix(in srgb,transparent 88%,var(--accent) 12%);
  font:1.04rem "Times New Roman",Times,serif;
  white-space:nowrap
}

.equation-multiline{
  white-space:normal;
  line-height:1.75
}

.equation-figure figcaption{
  margin:8px 8px 0;
  color:#746c76;
  font-size:.7rem;
  line-height:1.4
}

.notebook-end{
  display:flex;
  justify-content:flex-end;
  margin-top:48px
}

.notebook-end span{
  display:inline-block;
  padding:4px 8px;
  color:var(--accent-dark);
  border:2px solid var(--accent-dark);
  font-size:.67rem;
  letter-spacing:.08em;
  transform:rotate(-1.4deg);
  opacity:.72
}

@media(max-width:760px){
  .site-shell,.page-home .site-shell,.page-post .site-shell,.page-art .site-shell{
    width:100%;
    margin-top:0
  }

  .site-header{
    width:100%;
    margin:0;
    grid-template-columns:1fr;
    gap:11px;
    transform:none;
    border-inline:0;
    box-shadow:0 4px 0 color-mix(in srgb,var(--desk-dark) 55%,transparent)
  }

  .site-tools{
    justify-content:flex-start
  }

  .page-home #page-content{
    padding:32px 15px 55px
  }

  .desk-grid{
    display:block;
    min-height:0
  }

  .desk-paper,.index-card,.sticky-note,.playing-card,.scrap-note,.stamp-sheet,.art-sketch{
    width:100%;
    max-width:none;
    margin:0 0 24px;
    transform:none
  }

  .desk-paper{
    min-height:0;
    padding:27px 25px 31px
  }

  .sticky-note{
    width:78%;
    margin-left:10%;
    transform:rotate(-1.2deg)
  }

  .art-sketch{
    width:90%;
    margin:0 auto 42px;
    transform:rotate(-.7deg)
  }

  .playing-card{
    width:min(340px,88%);
    margin:0 auto 28px;
    transform:rotate(.8deg)
  }

  .playing-tab{
    left:15px
  }

  .scrap-note{
    width:88%;
    margin-left:6%
  }

  .stamp-sheet{
    flex-flow:row wrap
  }

  .art-page-sheet{
    width:calc(100% - 18px);
    padding:34px 22px 44px;
    transform:none
  }

  .art-entry+.art-entry{
    margin-top:34px;
    padding-top:28px
  }

  .page-post #page-content{
    padding:22px 0 42px
  }

  .page-post .notebook-page{
    width:calc(100% - 18px);
    padding:38px 24px 52px;
    box-shadow:0 2px 4px #1e14232e,5px 7px 0 #30223733;
    transform:none
  }

  .post-file-header{
    align-items:flex-start
  }

  .post-title{
    font-size:1.65rem
  }

  .equation-figure{
    margin-left:0;
    margin-right:0;
    transform:none!important
  }

  .equation-figure:before,.equation-figure:after{
    top:1px;
    width:52px;
    height:17px
  }

  .equation-figure:before{
    left:16px
  }

  .equation-figure:after{
    right:17px
  }

  .equation{
    padding:15px 14px;
    font-size:1rem
  }
}

@media(max-width:430px){
  .site-nav{
    gap:4px 9px
  }

  .color-control span{
    display:none
  }

  .post-title{
    font-size:1.55rem
  }

  .equation-figure:before,.equation-figure:after{
    width:44px
  }
}