@font-face {
  font-family: "Patrick Hand";
  src: url("./fonts/patrick-hand/PatrickHand-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Kai Xin Hand";
  src: url("./fonts/kai-xin/KaiXinJiuXiaoLinYuJiuZou-2.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #F7F7F7;
  --ink: #1E1E1E;
  --soft: #e7e7e7;
  --muted: #686868;
  --display: "Chalkboard SE", "Comic Sans MS", "Marker Felt", cursive;
  --hand: "Patrick Hand", "Kai Xin Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  --body: "Kai Xin Hand", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }
a:focus-visible, button:focus-visible { outline: 2px dashed var(--ink); outline-offset: 7px; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link:focus { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 15px; background: var(--paper); border: 2px solid var(--ink); }
.site-header { width: min(1360px, calc(100% - 100px)); margin: auto; min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.brand { font: 700 30px/1 var(--hand); letter-spacing: -.06em; transform: rotate(-3deg); }
.brand span { display: block; margin-top: 10px; font: 10px/1.5 var(--body); letter-spacing: .08em; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 34px; font-size: 18px; }
.site-header nav a { padding: 10px 0; }
.site-header nav a:hover { text-decoration: underline wavy; text-underline-offset: 6px; }
.hello { position: relative; max-width: 1360px; margin: 0 auto; padding: 34px 30px 62px; text-align: center; }
.hello-kicker { margin: 0 0 19px; font: 17px/1.5 var(--hand); letter-spacing: .04em; }
.hello h1 { position: relative; z-index: 1; margin: 0; font: 900 clamp(60px, 7.6vw, 109px)/.96 var(--display); letter-spacing: -.065em; }
.hello-line { display: block; transform: rotate(-3deg); }
.ideas-line { display: block; margin-top: 11px; }
.ideas-line > span { display: inline-block; }
.ideas-line > span:first-child { transform: rotate(2deg); }
.ideas-line > span:nth-child(2) { transform: rotate(-2deg); }
.ideas-line i { font-style: normal; }
.doodle-scene { position: relative; width: min(660px, 100%); margin: 8px auto 20px; min-height: 242px; }
.hero-doodle { width: 480px; height: 260px; object-fit: contain; object-position: center; margin: 0 auto; }
.scene-note { position: absolute; z-index: 2; font: 25px/1.2 var(--hand); }
.note-left { left: 10px; top: 75px; transform: rotate(-10deg); }
.note-right { right: -24px; top: 147px; transform: rotate(9deg); }
.hello-bubble { position: absolute; right: 75px; top: 23px; background: var(--paper); border: 2px solid var(--ink); border-radius: 48% 52% 50% 42% / 49% 42% 58% 51%; padding: 12px 19px; min-width: 82px; font: 16px/1.3 var(--hand); transform: rotate(8deg); }
.hello-bubble::after { content: ''; position: absolute; width: 12px; height: 12px; bottom: -7px; left: 20px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--paper); transform: rotate(-25deg) skew(15deg); }
.hello-bubble:hover { transform: rotate(3deg) translateY(-2px); }
.hello-description { margin: 13px 0 24px; font-size: 14px; line-height: 1.9; letter-spacing: .04em; }
.pill-button { display: inline-flex; justify-content: center; align-items: center; padding: 12px 25px; min-height: 46px; border: 2px solid var(--ink); border-radius: 45% 52% 48% 48% / 55% 50% 46% 43%; background: var(--paper); font-size: 15px; line-height: 1.4; box-shadow: 3px 4px 0 var(--ink); transition: transform .2s, box-shadow .2s; }
.pill-button:hover { transform: translate(2px, 2px) rotate(-1deg); box-shadow: 1px 2px 0 var(--ink); }
.dark-button { color: var(--paper); background: var(--ink); box-shadow: 3px 4px 0 var(--paper), 4px 5px 0 var(--ink); }
.scroll-note { margin: 26px 0 0; font-size: 10px; color: var(--muted); }
.peek { max-width: 1120px; margin: 0 auto; padding: 42px 28px 70px; position: relative; }
.peek-heading { text-align: center; }
.hand-label { font: 21px/1.3 var(--hand); margin: 0 0 9px; }
.peek-heading h2 { font-size: 25px; font-weight: 400; margin: 0 0 12px; letter-spacing: -.04em; }
.peek-heading > p:last-child { font-size: 12px; color: var(--muted); margin: 0; }
.deck-scene { width: min(550px, 88%); margin: 39px auto 16px; padding: 10px 0 16px; }
.paper-stack { position: relative; aspect-ratio: 1.38; isolation: isolate; }
.desk-paper { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 18px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px 19px 13px 18px / 16px 11px 20px 14px; box-shadow: 4px 5px 0 #1e1e1e18; transition: transform .48s cubic-bezier(.4,0,.2,1), opacity .4s; }
.desk-paper[data-depth="0"] { z-index: 4; transform: translate(0,0) rotate(-3deg); opacity: 1; }
.desk-paper[data-depth="1"] { z-index: 3; transform: translate(12px,-10px) rotate(4deg); opacity: 1; pointer-events: none; background: #efefef; }
.desk-paper[data-depth="2"] { z-index: 2; transform: translate(-7px,-16px) rotate(-7deg); opacity: 1; pointer-events: none; background: #e6e6e6; }
.desk-paper:not([data-depth="0"]):not([data-depth="1"]):not([data-depth="2"]) { z-index: 1; transform: translate(0,-20px) rotate(8deg); opacity: 0; pointer-events: none; }
.desk-paper:not([data-depth="0"]) > * { opacity: .3; }
.paper-heading { display: flex; justify-content: space-between; gap: 12px; font: 11px/1.3 var(--hand); margin-bottom: 12px; }
.paper-photo { flex: 1; min-height: 0; border: 1px solid #d0d0d0; border-radius: 7px; overflow: hidden; background: var(--soft); }
.paper-photo img { width: 100%; height: 100%; object-fit: contain; }
.paper-bottom { display: flex; justify-content: center; text-align: center; gap: 15px; align-items: center; padding-top: 16px; }
.paper-bottom strong { font-size: 16.5px; font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; }
.paper-bottom > span { font-size: 10px; white-space: nowrap; }
.deck-controls { display: flex; justify-content: center; align-items: center; gap: 33px; margin-top: 12px; }
.deck-controls p { font: 16px/1 var(--hand); }
.deck-controls button { font-size: 15px; min-height: 41px; padding: 10px 23px; }
.deck-controls button:disabled { cursor: default; }
.archive { width: min(1180px, calc(100% - 100px)); margin: 0 auto; padding-top: 40px; }
.archive-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 52px; }
.archive-heading .hand-label { font-size: 19px; margin-bottom: 16px; }
.archive-heading h2 { margin: 0 0 16px; font-size: clamp(27px, 3.6vw, 43px); line-height: 1.3; letter-spacing: -.06em; font-weight: 400; font-family: var(--hand); }
.title-dot { font-family: var(--hand); margin-left: 4px; }
.archive-heading div > p:last-child { font-size: 12px; line-height: 1.7; margin: 0; color: var(--muted); }
.collection-count { font: 25px/1 var(--hand); letter-spacing: .04em; white-space: nowrap; padding: 10px 0; }
.collection-count > span { font: inherit; margin-right: 9px; }
.work-card { margin-bottom: 76px; }
.work-heading { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 30px; align-items: start; margin-bottom: 27px; }
.work-meta { padding-top: 8px; }
.work-number { display: block; font: 33px/1.2 var(--hand); }
.work-meta time { display: block; font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.work-handwritten { font: 17px/1.3 var(--hand); margin: 0 0 10px; }
.work-info h3 { margin: 0 0 12px; font-size: 46.5px; letter-spacing: 0; font-weight: 400; line-height: 1.2; }
.work-info h3 a:hover { text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.work-description { font-size: 18px; color: var(--muted); line-height: 1.8; margin: 0; }
.work-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 13px; font-size: 15px; color: var(--muted); }
.work-tags span + span::before { content: '/'; margin-right: 12px; }
.work-aside-note { padding: 16px 0 0 15px; font-size: 16.5px; line-height: 1.9; max-width: 200px; transform: rotate(3deg); }
.work-media { display: grid; grid-template-columns: minmax(0,1fr) minmax(145px,24%); align-items: center; gap: 36px; margin-left: 130px; }
.media-link { min-width: 0; display: block; }
.media-frame { padding: 9px; border: 2px solid var(--ink); border-radius: 17px 13px 19px 14px / 13px 17px 14px 18px; background: var(--paper); transition: transform .25s, box-shadow .25s; }
.html-preview .media-frame { aspect-ratio: 1.76; transform: rotate(-1deg); }
.video-cover .media-frame { aspect-ratio: .75; transform: rotate(2.5deg); padding: 7px; }
.media-frame img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.video-cover .media-frame img { object-fit: cover; }
.media-link:hover .media-frame { transform: rotate(0) translateY(-4px); box-shadow: 4px 5px 0 #1e1e1e15; }
.media-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.media-kind { font: 18px/1.2 var(--hand); }
.media-action { font-size: 10px; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.video-cover .media-caption { flex-wrap: wrap; row-gap: 7px; }
.work-card:nth-child(even) .html-preview .media-frame { transform: rotate(.6deg); }
.work-card:nth-child(even) .video-cover .media-frame { transform: rotate(-2deg); }
.work-card:nth-child(even) .media-link:hover .media-frame { transform: rotate(0) translateY(-4px); }
.work-media > .html-preview:only-child { grid-column: 1 / -1; }
.work-media > .video-cover:only-child { width: 210px; }
.empty-preview { padding: 60px 30px; border: 2px dashed var(--ink); border-radius: 18px; font: 21px/1.5 var(--hand); grid-column: 1/-1; }
.endnote { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 25px; padding: 45px 0 68px; }
.endnote p { margin: 0; font: 38px/1.3 var(--hand); transform: rotate(-2deg); }
.endnote p span { display: block; font: 11px/1.5 var(--body); color: var(--muted); margin-top: 12px; }
.site-footer { width: min(1360px, calc(100% - 100px)); margin: 0 auto; padding: 30px 0 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer > a { font: 26px/1 var(--hand); font-weight: 700; letter-spacing: -.06em; }
.site-footer p { font-size: 11px; color: var(--muted); }
.site-footer > span { font-size: 8px; color: var(--muted); }
.noscript-note, .empty-state { padding: 30px; }
/* Give handwritten English room between its letters. */
.brand, .hello-kicker, .scene-note, .hello-bubble, .hand-label,
.peek-heading h2, .paper-heading, .deck-controls p, .archive-heading h2,
.title-dot, .collection-count > span, .work-number, .work-handwritten,
.media-kind, .empty-preview, .endnote p, .site-footer > a {
  letter-spacing: .04em;
}
.work-info h3 { overflow-wrap: anywhere; }
.work-title-group, .work-details { min-width: 0; }
@media (max-width: 1000px) {
  .site-header, .site-footer { width: calc(100% - 60px); }
  .archive { width: calc(100% - 60px); }
  .work-heading { grid-template-columns: 80px minmax(0,1fr); gap: 25px; }
  .work-aside-note { display: none; }
  .work-media { margin-left: 105px; gap: 25px; grid-template-columns: minmax(0,1fr) minmax(130px,25%); }
}
@media (max-width: 650px) {
  .site-header { min-height: 90px; width: calc(100% - 40px); }
  .brand { font-size: 26px; }
  .brand span { font-size: 8px; }
  .site-header nav { gap: 16px; font-size: 15px; }
  .hello { padding: 26px 20px 44px; }
  .hello-kicker { font-size: 13px; margin-bottom: 20px; }
  .hello h1 { font-size: clamp(40px, 10vw, 64px); }
  .doodle-scene { width: min(460px,100%); min-height: 225px; margin-top: 14px; }
  .hero-doodle { width: min(360px, 100%); height: 215px; }
  .scene-note { font-size: 17px; }
  .note-left { left: 0; top: 74px; }
  .note-right { right: -8px; top: 162px; }
  .hello-bubble { right: 12px; top: 20px; padding: 9px 13px; min-width: 66px; font-size: 13px; }
  .hello-description { font-size: 12px; margin: 12px 0 22px; }
  .scroll-note { font-size: 9px; }
  .peek { padding: 22px 20px 42px; }
  .peek-heading h2 { font-size: 23px; }
  .peek-heading > p:last-child { font-size: 10px; }
  .deck-scene { width: min(410px, 86%); margin-top: 34px; }
  .desk-paper { padding: 12px; }
  .paper-heading { font-size: 9px; margin-bottom: 9px; }
  .paper-bottom { padding-top: 12px; gap: 8px; }
  .paper-bottom strong { font-size: 13.5px; }
  .paper-bottom > span { font-size: 8px; }
  .archive { width: calc(100% - 40px); padding-top: 28px; }
  .archive-heading { align-items: start; flex-direction: column; gap: 13px; margin-bottom: 35px; }
  .archive-heading h2 { font-size: 28px; margin-bottom: 12px; }
  .archive-heading .hand-label { font-size: 17px; }
  .archive-heading div > p:last-child { font-size: 10px; }
  .collection-count { padding: 0; font-size: 21px; }
  .work-card { margin-bottom: 52px; }
  .work-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; }
  .work-meta { display: flex; align-items: center; justify-content: space-between; padding: 0; }
  .work-meta time { margin: 0; }
  .work-number { font-size: 27px; }
  .work-info h3 { font-size: 42px; }
  .work-handwritten { font-size: 16px; }
  .work-description { font-size: 16.5px; }
  .work-tags { font-size: 13.5px; }
  .work-media { margin-left: 0; gap: 18px; grid-template-columns: minmax(0,1fr) minmax(95px,25%); align-items: center; }
  .media-frame { padding: 5px; border-width: 1.5px; border-radius: 11px 8px 12px 9px; }
  .video-cover .media-frame { padding: 4px; }
  .media-frame img { border-radius: 4px; }
  .media-caption { margin-top: 12px; gap: 7px; flex-direction: column; align-items: start; }
  .media-kind { font-size: 16px; }
  .media-action { font-size: 9px; }
  .endnote { padding: 35px 0 48px; flex-wrap: wrap; }
  .endnote p { font-size: 27px; }
  .endnote p span { font-size: 9px; }
  .endnote .pill-button { padding: 10px 16px; font-size: 13px; min-height: 41px; }
  .site-footer { width: calc(100% - 40px); flex-wrap: wrap; gap: 13px; padding: 24px 0 30px; }
  .site-footer p { margin: 0; font-size: 10px; }
  .site-footer > span { flex-basis: 100%; font-size: 8px; }
}
@media (max-width: 380px) {
  .hero-doodle { width: 270px; height: 200px; }
  .doodle-scene { min-height: 212px; }
  .note-left { font-size: 14px; top: 92px; }
  .note-right { font-size: 14px; top: 160px; }
  .paper-heading { font-size: 7px; }
  .paper-bottom strong { font-size: 11.25px; }
  .paper-bottom > span { font-size: 7px; }
  .desk-paper { padding: 9px; }
  .work-media { gap: 13px; grid-template-columns: minmax(0,1fr) 89px; }
  .archive-heading h2 { font-size: 26px; }
  .endnote p { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .media-link:hover .media-frame { transform: none !important; }
}