/* Empanadilla Studio v3: a quiet little corner.
   One column, lots of paper, bookish type. DM Serif Display for headings only,
   a handwriting face only on the two notes (Caveat in English, LXGW WenKai in Chinese). */

@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Note Hand';
  src: url('fonts/caveat-note.woff') format('woff');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Note Hand ZH';
  src: url('fonts/wenkai-note.woff') format('woff');
  font-display: swap;
}

:root {
  --paper: #f7f4ec;   /* warm cream page; Apps sits on an oat desk mat (#apps --mat) */
  --paper-2: #fbfaf4;
  --card: #fffdf7;
  --ink: #3d3a30;
  --ink-2: #55524a;
  --muted: #6f6e65;
  --muted-2: #5f5d54;
  --line: #e4e1d4;
  --olive: #7a8a3e;
  --terracotta: #c77b58;
  --tomato: #c4524a;
  --peach: #f2c9a0;
  --wood: #c99b6d;
  --wood-l: #dcb98f;
  --wood-d: #a8794f;

  --serif-display: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
  --hand: 'Note Hand', 'Bradley Hand', 'Segoe Print', cursive;
  --gutter: 20px;
  --max: 1040px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 40px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:lang(zh) body, body:lang(zh) { font-size: 1.0625rem; line-height: 1.85; }
img { max-width: 100%; height: auto; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; text-decoration-color: rgba(61, 58, 48, .35); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--terracotta); color: var(--ink); }
a:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 3px; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 6px 14px; border-radius: 4px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---------- top ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 8px; flex-wrap: wrap; }
.brand { display: inline-flex; padding: 6px 0; }
.brand img { display: block; height: 18px; width: auto; }
.top nav { display: flex; gap: 22px; font-size: .9375rem; color: var(--muted-2); }
.top nav a { text-decoration: none; padding: 6px 0; }
.top nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--terracotta); }
.top nav .lang { margin-left: 6px; }
@media (max-width: 560px) {
  .top { padding-top: 20px; }
  .brand img { height: 16px; }
  .top nav { gap: 16px; font-size: .875rem; }
  .top nav .lang { margin-left: 0; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(56px, 9vw, 112px); }
.hero h1 {
  font-family: var(--serif-display);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -.005em;
  max-width: 12em;
}
.hero h1 .line { display: inline-block; }
:lang(zh) .hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: .02em; line-height: 1.25; }
/* a journal page header above the title: the month and a page number, handwritten */
.page-date { margin: 0 0 14px; font-family: var(--hand); font-size: 1.375rem; line-height: 1.2; color: var(--muted); }
.page-date::before { content: ''; display: inline-block; width: 26px; height: 1.5px; margin-right: 10px; vertical-align: middle; background: currentColor; transform: rotate(-4deg); opacity: .7; }
:lang(zh) .page-date { font-family: 'Note Hand ZH', 'Kaiti SC', 'STKaiti', KaiTi, var(--serif); font-size: 1.125rem; }


.corner { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 28px; align-items: end; }
/* ---------- the journal page (hero) ----------
   A page from the studio's bullet journal, built from text + a few SVG pen marks.
   Phone/tablet: one page, 350px wide. Desktop: a two-page spread, 704 x 452. */
.journal {
  --ink-pen: #3a372e;
  --paper-j: #fcf8ee;
  position: relative; justify-self: start;
  width: 350px; max-width: 100%;
  margin: 18px 0 26px;
  transform: rotate(-1.5deg);
  font-family: var(--hand); color: var(--ink-pen);
}
:lang(zh) .journal { font-family: 'Note Hand ZH', 'Kaiti SC', 'STKaiti', KaiTi, var(--serif); }
.paper {
  position: relative; display: flex; flex-direction: column;
  background-color: var(--paper-j);
  background-image: radial-gradient(circle, #d8d2bf 1px, transparent 1.4px);
  background-size: 18px 18px; background-position: 9px 13px;
  border-radius: 2px 3px 3px 2px;
  box-shadow: 0 1px 1px rgba(61, 58, 48, .07), 0 2px 6px -2px rgba(61, 58, 48, .10), 0 22px 40px -26px rgba(61, 58, 48, .55);
}
.page { position: relative; }
.page-log { flex: 1; padding: 34px 26px 34px 24px; }
.j-head { font-size: 1.75rem; line-height: 36px; margin-bottom: 10px; }
.j-head .ul { position: relative; display: inline-block; }
.log { font-size: 1.4375rem; line-height: 36px; }
:lang(zh) .j-head { font-size: 1.375rem; }
:lang(zh) .log { font-size: 1.125rem; }
.log { padding-right: 30px; }
/* right page: a dictionary entry for the studio's name (on phones it follows the left page) */
.page-r { display: block; padding: 0 26px 30px 24px; }
.dict { border-top: 1px dashed #d6d0bd; padding-top: 18px; }
.dict-word { font-size: 1.75rem; line-height: 1.2; }
.dict-pos { font-size: 1.0625rem; color: #6f6b5e; margin-top: 2px; }
.dict ol { margin-top: 6px; padding-left: 0; list-style: decimal inside; font-size: 1.375rem; line-height: 34px; }
.dict li::marker { color: #6f6b5e; }
:lang(zh) .dict-word { font-family: var(--hand); }
:lang(zh) .dict ol { font-size: 1.125rem; }
:lang(zh) .dict-pos { font-size: .9375rem; }
.log li { position: relative; padding-left: 26px; }
.sig { position: absolute; left: 2px; top: 0; display: inline-block; width: 18px; text-align: center; color: var(--ink-pen); }
.s-x { transform: rotate(-6deg) translateY(1px); font-size: 1.15em; }
.s-b { transform: translate(1px, -1px) scale(1.25); }
.s-m { transform: rotate(4deg); }
:lang(zh) .sig { font-family: var(--hand); font-size: 1.4375rem; }
.s-n { color: #6f6b5e; }
.note-line { color: #5a564b; }
/* a small note under an app's name */
.log .sub { display: block; margin: -7px 0 5px; font-size: .74em; line-height: 1.3; color: #6f6b5e; }

/* pen marks: one ink, single weight */
.pen { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke: var(--ink-pen); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pen path { vector-effect: non-scaling-stroke; }
.pen-ul { left: -4px; right: -10px; bottom: -3px; width: calc(100% + 14px); height: 10px; }

/* washi tape */
.tape {
  position: absolute; height: 26px; width: 104px; opacity: .78;
  clip-path: polygon(4px 0, calc(100% - 3px) 0, 100% 16%, calc(100% - 4px) 33%, 100% 50%, calc(100% - 3px) 67%, 100% 84%, calc(100% - 5px) 100%, 3px 100%, 0 83%, 4px 66%, 0 50%, 3px 34%, 0 17%);
}
.tape-a { left: -26px; top: 6px; transform: rotate(-34deg); background: repeating-linear-gradient(90deg, rgba(214, 140, 104, .62) 0 7px, rgba(222, 154, 120, .55) 7px 14px); }
.tape-b { right: -14px; top: 4px; transform: rotate(38deg); width: 92px; background: rgba(170, 182, 120, .55); }

/* die-cut stickers: white edge + a soft shadow, pixel art kept crisp */
.sticker {
  position: absolute; display: block; max-width: none;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
          drop-shadow(0 2px 2px rgba(61, 58, 48, .22)) drop-shadow(0 6px 8px rgba(61, 58, 48, .10));
}
.st-tomato { width: 40px; height: 60px; right: 26px; top: 318px; transform: rotate(5deg); }
.st-dumpling { width: 64px; height: 42px; right: 26px; bottom: -22px; transform: rotate(-6deg); }

@media (min-width: 1000px) {
  .corner { grid-template-columns: auto 1fr; gap: 56px; }
  .journal { width: 704px; margin: 22px 0 30px 6px; }
  .paper { height: 452px; }
  .page-log { flex: 0 0 352px; padding: 52px 18px 34px 34px; }
  .page-r { flex: 0 0 352px; padding: 58px 30px 34px 40px; }
  /* the centre fold */
  .page-log::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 26px; background: linear-gradient(90deg, rgba(61, 58, 48, 0), rgba(61, 58, 48, .07)); }
  .page-r::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 18px; background: linear-gradient(90deg, rgba(61, 58, 48, .06), rgba(61, 58, 48, 0)); }
  .j-head { font-size: 2.125rem; line-height: 42px; margin-bottom: 18px; }
  .log { font-size: 1.625rem; line-height: 44px; }
  :lang(zh) .j-head { font-size: 1.625rem; }
  :lang(zh) .log { font-size: 1.3125rem; }
  .paper { flex-direction: row; }
  .log { padding-right: 0; }
  .dict { border-top: 0; padding-top: 0; }
  .dict-word { font-size: 2.125rem; }
  .dict ol { font-size: 1.5rem; line-height: 40px; }
  :lang(zh) .dict ol { font-size: 1.25rem; }
  .log li { padding-left: 28px; }
  .st-tomato { width: 60px; height: 90px; right: auto; left: 436px; top: 318px; transform: rotate(-4deg); }
  .st-dumpling { width: 64px; height: 42px; right: auto; left: 536px; bottom: auto; top: 362px; transform: rotate(5deg); }
  .tape-a { left: -30px; top: 10px; width: 120px; height: 30px; }
  .tape-b { right: -30px; bottom: auto; top: 14px; width: 116px; height: 28px; transform: rotate(32deg); }
}

.welcome { max-width: 30em; color: var(--ink-2); }

.nw { white-space: nowrap; }
.welcome p + p { margin-top: 12px; }
/* what the studio is, in plain words, right after the welcome */
.welcome .about-text { margin-top: 14px; color: var(--ink-2); }
.welcome .hello { font-family: var(--serif-display); font-size: 1.5rem; line-height: 1.3; color: var(--ink); }
:lang(zh) .welcome .hello { font-family: var(--serif); font-weight: 600; font-size: 1.3125rem; }
@media (min-width: 1000px) { .welcome { padding-bottom: 18px; } }

/* ---------- three little pots under the welcome line ---------- */
.pots { position: relative; display: flex; align-items: flex-end; gap: 22px; width: max-content; margin-top: 26px; padding: 0 18px 10px; }
.pots img { display: block; }
.pots::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--wood-l); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--wood-d); }

/* ---------- collections (Apps now; Handmade later uses the same styles) ---------- */
.collection { padding-top: clamp(72px, 10vw, 128px); }
/* Apps sits on its own oat desk mat, full width, so the page reads as three parts: journal, apps, notes */
#apps { --mat: #ece5d5; margin-top: clamp(56px, 8vw, 104px); padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(64px, 8vw, 104px);
  background: var(--mat); box-shadow: 0 0 0 100vmax var(--mat); clip-path: inset(0 -100vmax); }
.collection h2, .notes h2 { font-family: var(--serif-display); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); line-height: 1.15; }
:lang(zh) .collection h2 { font-family: var(--serif); font-weight: 600; }
.things { margin-top: 48px; display: grid; gap: 64px; }

/* each app is a two-sided postcard. Front: stamp, postmark, name, where the name comes from, a line,
   links, signature. Back: a short video of the app. "Watch it" turns the card over (motion.js adds
   .flipped); without JavaScript both sides are simply shown one under the other. */
.postcard { position: relative; display: grid; width: 100%; max-width: 360px; margin: 0 auto; transform: rotate(-.6deg); }
.thing:nth-child(2) .postcard { transform: rotate(.5deg); }
/* wide screens: the two cards lie loosely on the mat, tilted and offset, a little closer together */
@media (min-width: 760px) {
  #apps .things { gap: 24px; max-width: 860px; margin-left: auto; margin-right: auto; }
  #apps .thing:nth-child(1) .postcard { transform: rotate(-3.2deg) translateX(18px); }
  #apps .thing:nth-child(2) .postcard { transform: rotate(2.4deg) translate(-14px, 64px); }
  #apps { padding-bottom: clamp(120px, 12vw, 168px); }
}
/* faint postmarks stamped on the mat */
#apps { position: relative; isolation: isolate; }
#apps > :not(.mat-mark) { position: relative; z-index: 1; }
.mat-mark { position: absolute; z-index: 0; width: 220px; height: 90px; fill: none; stroke: rgba(199, 123, 88, .3); stroke-width: 2.2; pointer-events: none; }
.mat-mark text { fill: rgba(199, 123, 88, .3); stroke: none; font: 13px/1 var(--serif); letter-spacing: 1px; }
.mat-mark.m1 { left: 6%; top: 62%; transform: rotate(-12deg); }
.mat-mark.m2 { left: 74%; top: 14%; transform: rotate(8deg) scale(.9); }
.mat-mark.m3 { left: 44%; top: 84%; transform: rotate(-4deg) scale(.8); }
@media (max-width: 759px) { .mat-mark.m1 { left: -40px; top: 44%; } .mat-mark.m2 { left: auto; right: -24px; top: 2%; transform: rotate(8deg) scale(.7); } .mat-mark.m3 { display: none; } }
/* a portrait postcard: the back (the video) sets the height, the front fits in it */
.pc-face {
  position: relative; background: var(--card); border-radius: 3px;
  padding: 24px 24px 18px;
  box-shadow: 0 1px 1px rgba(61, 58, 48, .08), 0 16px 34px -22px rgba(61, 58, 48, .5);
}
.pc-face::before { /* washi tape */
  content: ''; position: absolute; z-index: 1; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px;
  background: rgba(214, 140, 104, .4); transform: rotate(-3deg);
  -webkit-mask: linear-gradient(90deg, #0000 0 2px, #000 2px calc(100% - 2px), #0000 0);
          mask: linear-gradient(90deg, #0000 0 2px, #000 2px calc(100% - 2px), #0000 0);
}
.pc-pd .pc-face::before { background: rgba(170, 182, 120, .5); transform: rotate(2deg); }
.pc-face::after { /* a faint airmail edge in the page's own colours */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  border: 6px solid transparent;
  border-image: repeating-linear-gradient(45deg, var(--terracotta) 0 9px, transparent 9px 18px, var(--olive) 18px 27px, transparent 27px 36px) 6;
  opacity: .28;
}
.pc-front { display: flex; flex-direction: column; }
.pc-head::after { content: ''; display: block; clear: both; }
.pc-head .stamp { position: relative; top: auto; right: auto; float: right; margin: 0 -2px 8px 14px; }
.pc-front h3 { font-size: 1.375rem; padding-right: 0 !important; min-height: 0 !important; }
.pc-front .postmark { display: none; }
/* where the name comes from: a small note under the name */
.postcard .pc-head .origin { margin-top: 6px !important; padding: 0; font-family: var(--serif); font-style: italic; font-size: .875rem; line-height: 1.45; color: var(--muted); }
:lang(zh) .postcard .pc-head .origin { font-family: var(--serif); font-style: normal; font-size: .8125rem; }
/* what the app is: the message, handwritten on the card's writing lines */
.pc-front .msg { flex: 1; min-height: 144px; margin-top: 18px !important; font-family: var(--hand); font-size: 1.4375rem; line-height: 36px; color: var(--ink);
  background: repeating-linear-gradient(transparent 0 35px, #e7e2d2 35px 36px); }
:lang(zh) .pc-front .msg { font-family: 'Note Hand ZH', 'Kaiti SC', 'STKaiti', KaiTi, var(--serif); font-size: 1.1875rem; }
/* the message as a short bulleted list; the last bullet holds the links */
.pc-front ul.msg { list-style: none; padding: 0; }
.pc-front ul.msg li { position: relative; padding-left: 1em; }
.pc-front ul.msg li::before { content: '•'; position: absolute; left: .1em; color: var(--muted-2); }
.postcard .pc-front .msg .links { margin: 0; font-family: var(--serif); font-size: .9375rem; }
.pc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pc-foot .sig-line { margin: 0 !important; font-size: 1.125rem; }
:lang(zh) .pc-foot .sig-line { font-size: .9375rem; }
.pc-hint { font-size: 1.25rem; line-height: 1; color: var(--muted); white-space: nowrap; }
.pc-back .pc-hint { margin-top: 12px; }
.pc-back { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 22px;
  background: #fcf8ee radial-gradient(circle, #d6d3c4 1px, transparent 1.4px) 0 0 / 16px 16px; }
.pc-screen { overflow: hidden; border-radius: 18px; border: 5px solid #e9e4d6; background: var(--card);
  box-shadow: 0 1px 0 rgba(61, 58, 48, .06), 0 10px 22px -16px rgba(61, 58, 48, .4); }
.pc-video { display: block; width: auto; height: min(420px, 112vw); max-width: 100%; }
.pc-screen { display: flex; }
.pc-cap { margin-top: 10px; font-family: var(--hand); font-size: 1.3125rem; line-height: 1.3; color: var(--muted-2); text-align: center; }
:lang(zh) .pc-cap { font-family: 'Note Hand ZH', 'Kaiti SC', 'STKaiti', KaiTi, var(--serif); font-size: 1.0625rem; }
.pc-flip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.pc-hint { display: none; }

/* with JavaScript: the two sides share one place and the card turns over */
html.js .postcard { perspective: 1600px; }
html.js .pc-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .8s cubic-bezier(.45, .05, .25, 1); }
html.js .pc-back { transform: rotateY(180deg); }
html.js .postcard.flipped .pc-front { transform: rotateY(-180deg); }
html.js .postcard.flipped .pc-back { transform: rotateY(0deg); }
html.js .pc-hint { display: inline; }
html.js .pc-face { cursor: pointer; }
html.js .pc-face:has(.pc-flip:focus-visible) { outline: 2px solid var(--terracotta); outline-offset: 4px; }
html.js .postcard:not(.flipped) .pc-back, html.js .postcard.flipped .pc-front { pointer-events: none; }
html:not(.js) .pc-back { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { html.js .pc-face { transition: none; } }
@media (min-width: 760px) { .things { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* the full-size viewer */
.viewer { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; cursor: zoom-out; }
.viewer::backdrop { background: rgba(42, 40, 32, .72); }
.viewer img { display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); border-radius: 22px; border: 6px solid #e9e4d6; background: var(--card); }

/* the stamp: a little perforated square with the app's pixel friend */
.stamp {
  position: absolute; top: 20px; right: 20px; width: 70px; height: 84px; padding: 6px;
  background:
    radial-gradient(circle, var(--card) 2.4px, transparent 2.9px) 0 -4px / 8px 8px repeat-x,
    radial-gradient(circle, var(--card) 2.4px, transparent 2.9px) 0 calc(100% + 4px) / 8px 8px repeat-x,
    radial-gradient(circle, var(--card) 2.4px, transparent 2.9px) -4px 0 / 8px 8px repeat-y,
    radial-gradient(circle, var(--card) 2.4px, transparent 2.9px) calc(100% + 4px) 0 / 8px 8px repeat-y,
    #fff;
  filter: drop-shadow(0 1px 1px rgba(61, 58, 48, .18));
  transform: rotate(3deg);
}
.stamp-in { display: grid; place-items: center; width: 100%; height: 100%; background: #f6dcc4; }
.pc-pd .stamp-in { background: #dfe6c8; }
.stamp img { width: 48px; height: auto; }
.pc-pd .stamp img { width: 34px; }
/* the postmark, half over the stamp (wide screens only) */
.postmark {
  display: none; position: absolute; top: 34px; right: 62px; width: 100px; height: 54px; overflow: visible;
  fill: none; stroke: var(--terracotta); stroke-width: 1.3; opacity: .55; transform: rotate(-8deg);
}
.postmark text { fill: var(--terracotta); stroke: none; font: 600 6px/1 var(--serif); letter-spacing: .12em; }
.postmark .pm-year { font-size: 8px; letter-spacing: .04em; }
@media (min-width: 760px) { .postmark { display: block; } }
.postcard h3 { padding-right: 90px; min-height: 88px; }
@media (min-width: 760px) { .postcard h3 { padding-right: 160px; min-height: 76px; } }
.postcard .origin { margin-top: 0 !important; }
.postcard h3 + .origin + p { margin-top: 14px; }
.postcard p { max-width: 26em; }
/* where the name comes from, like a little dictionary note */
.postcard .origin { margin-top: 2px; font-family: var(--hand); font-size: 1.25rem; line-height: 1.3; color: var(--muted-2); }
:lang(zh) .postcard .origin { font-family: 'Note Hand', 'Note Hand ZH', 'Kaiti SC', 'STKaiti', KaiTi, cursive; font-size: 1.0625rem; }
/* signed by the studio, in the journal's handwriting */
.sig-line { margin-top: 14px !important; font-family: var(--hand); font-size: 1.375rem; line-height: 1.2; color: var(--muted-2) !important; }
:lang(zh) .sig-line { font-family: 'Note Hand', 'Note Hand ZH', 'Kaiti SC', 'STKaiti', KaiTi, cursive; font-size: 1.125rem; }

.label h3 { font-family: var(--serif-display); font-size: 1.5rem; line-height: 1.2; }
.label h3 span { font-family: var(--serif); font-size: 1rem; color: var(--muted-2); margin-left: 6px; white-space: nowrap; }
:lang(zh) .label h3 { font-family: var(--serif-display); }
.label p { margin-top: 8px; color: var(--ink-2); }
.label .links { margin-top: 10px; font-size: 1rem; color: var(--muted); }
.label .links a { color: var(--ink); }

/* ---------- notes ---------- */
.notes { padding-top: clamp(64px, 8vw, 104px); display: grid; gap: 56px; align-items: start; }
@media (min-width: 860px) { .notes { grid-template-columns: minmax(0, 500px) minmax(0, 360px); justify-content: space-between; } }

.note {
  position: relative; background: var(--card); color: var(--ink);
  padding: 34px 30px 30px; border-radius: 2px;
  box-shadow: 0 1px 1px rgba(61, 58, 48, .08), 0 14px 30px -20px rgba(61, 58, 48, .45);
  font-family: var(--hand);
  font-size: 1.5rem; line-height: 1.45;
}
:lang(zh) .note { font-family: 'Note Hand ZH', 'Kaiti SC', 'STKaiti', KaiTi, var(--serif); font-size: 1.1875rem; line-height: 1.9; }
.note p + p { margin-top: 10px; }
.notes .note h2 { font-family: var(--hand); font-size: 2.125rem; line-height: 1.1; font-weight: 700; color: var(--terracotta); }
:lang(zh) .notes .note h2 { font-family: 'Note Hand ZH', 'Kaiti SC', 'STKaiti', KaiTi, var(--serif); font-size: 1.625rem; }

/* torn notebook page: faint ruled lines + a wavy torn top edge + washi tape */
.lately {
  transform: rotate(-1.2deg);
  padding-top: 28px;
  background-image: repeating-linear-gradient(transparent 0 34px, #e7e2d2 34px 35px);
  background-position: 0 20px;
}
.lately h2, .lately p { line-height: 35px !important; }
.lately p + p { margin-top: 0; }
.lately .date { margin: 0 !important; }
/* the news as a little bullet list, each line on the ruled lines */
.lately-list li { position: relative; padding-left: 1.1em; line-height: 35px; }
.lately-list li::before { content: '•'; position: absolute; left: .1em; color: var(--terracotta); }
.lately::before { /* torn top edge: small bites in the colour of the page */
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 6px;
  background: radial-gradient(circle at 7px -1px, var(--paper) 4.5px, transparent 5px) 0 0 / 14px 6px repeat-x;
}
.lately .date { font-size: 1.125rem; color: var(--muted); margin: 2px 0 14px; }
:lang(zh) .lately .date { font-size: .9375rem; }

.contact { transform: rotate(.8deg); background: #fbf4e6; margin-top: 8px; }
@media (min-width: 860px) { .contact { margin-top: 120px; } }
.contact::before { /* a strip of washi tape */
  content: ''; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; margin-left: -46px;
  background: rgba(199, 123, 88, .28); transform: rotate(-3deg);
  -webkit-mask: linear-gradient(90deg, #0000 0 2px, #000 2px calc(100% - 2px), #0000 0);
          mask: linear-gradient(90deg, #0000 0 2px, #000 2px calc(100% - 2px), #0000 0);
}
.notes .contact h2 { font-size: 1.75rem; color: var(--ink-2); font-weight: 400; }
:lang(zh) .notes .contact h2 { font-size: 1.25rem; }
.contact p { margin-top: 8px; font-size: 1.5rem; line-height: 1.35; overflow-wrap: anywhere; }
.contact a { text-decoration-color: var(--terracotta); }
:lang(zh) .contact p { font-family: var(--hand); font-size: 1.5rem; }

/* ---------- bottom ---------- */

.foot {
  margin-top: clamp(72px, 9vw, 110px); padding-bottom: 48px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
  font-size: .9375rem; color: var(--muted-2);
}
.foot::before { content: ''; flex-basis: 100%; height: 1px; background: var(--line); margin-bottom: 12px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover, .foot .langs a:hover { text-decoration: underline; text-decoration-color: var(--terracotta); }
.foot .langs a { text-decoration: none; }
.foot .langs [aria-current] { color: var(--ink); }
.foot .copy { margin-left: auto; color: var(--muted); }
@media (max-width: 720px) { .foot .copy { margin-left: 0; width: 100%; } }

/* ---------- privacy page ---------- */
.doc { max-width: 38em; padding-top: clamp(48px, 8vw, 96px); padding-bottom: 32px; }
.doc h1 { font-family: var(--serif-display); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); line-height: 1.1; }
:lang(zh) .doc h1 { font-family: var(--serif); font-weight: 600; }
.doc .updated { margin-top: 12px; color: var(--muted-2); font-size: 1rem; }
.doc h2 { font-family: var(--serif-display); font-size: 1.5rem; line-height: 1.25; margin-top: 48px; }
:lang(zh) .doc h2 { font-family: var(--serif); font-weight: 600; font-size: 1.3125rem; }
.doc h3 { font-weight: 600; font-size: 1.0625rem; margin-top: 28px; }
.doc p, .doc ul { margin-top: 12px; color: var(--ink-2); }
.doc ul { padding-left: 1.2em; list-style: disc; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--muted); }
.doc code { font-size: .9em; background: #efede3; padding: 1px 5px; border-radius: 3px; }
.doc .summary { margin-top: 36px; padding: 6px 26px 24px; background: var(--card); border-radius: 2px; box-shadow: 0 1px 1px rgba(61, 58, 48, .08), 0 14px 30px -22px rgba(61, 58, 48, .4); }
.doc .summary h2 { margin-top: 18px; }
.back { margin-top: 48px; font-size: 1rem; }

/* =====================================================================
   Motion. Only with JS (html.js) and only when the visitor has not asked
   for reduced motion. Without either, everything is simply there.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* headline: each line is wiped in from the left, slowly */
  html.js .hero h1 .line {
    -webkit-mask-image: linear-gradient(90deg, #000 34%, transparent 66%);
            mask-image: linear-gradient(90deg, #000 34%, transparent 66%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
    animation: wipe 1.5s cubic-bezier(.33, 0, .2, 1) .15s forwards;
  }
  html.js .hero h1 .line > span { display: inline-block; transform-origin: left center; transform: translateX(14px) scaleX(1.04); animation: settleX 1.5s cubic-bezier(.33, 0, .2, 1) .15s forwards; }
  html.js .hero h1 .line:nth-child(2), html.js .hero h1 .line:nth-child(2) > span { animation-delay: .5s; }
  @keyframes wipe { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
  @keyframes settleX { to { transform: none; } }

  /* the journal page: lines are written one by one, then the pen marks, then the stickers */
  html.js .journal { opacity: 0; transition: opacity 1.2s ease-out .3s; }
  html.js .journal.in { opacity: 1; }
  html.js .journal .j-head, html.js .journal .log li, html.js .journal .dict p, html.js .journal .dict li {
    clip-path: inset(-12px 100% -14px -12px);
    transition: clip-path .7s cubic-bezier(.45, .05, .55, .95);
    transition-delay: calc(.9s + var(--i) * .5s);
  }
  html.js .journal.in .j-head, html.js .journal.in .log li, html.js .journal.in .dict p, html.js .journal.in .dict li { clip-path: inset(-12px -80px -14px -12px); }
  html.js .journal .pen path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s ease-in-out; }
  html.js .journal.in .pen path { stroke-dashoffset: 0; }
  html.js .journal .pen-ul path { transition-delay: 1.5s; }
  html.js .journal .sticker { opacity: 0; scale: .82; rotate: -8deg; transition: opacity .35s ease-out, scale .7s cubic-bezier(.3, 1.4, .5, 1), rotate .7s cubic-bezier(.3, 1.4, .5, 1); }
  html.js .journal.in .sticker { opacity: 1; scale: 1; rotate: 0deg; }
  html.js .journal .st-tomato { transition-delay: 3.2s; }
  html.js .journal .st-dumpling { transition-delay: 4.4s; }

  /* fade-up as things come into view (motion.js adds .in) */
  html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease-out, transform .9s ease-out; transition-delay: var(--delay, 0s); }
  html.js .reveal.in { opacity: 1; transform: none; }
  html.js .welcome.reveal { --delay: 1.1s; }
  html.js .contact.reveal { transform: translateY(28px) rotate(2.6deg); transition-duration: 1.1s; --delay: .15s; }
  html.js .contact.reveal.in { transform: rotate(.8deg); }
  html.js .thing.reveal:nth-child(2) { --delay: .18s; }

  /* the notes are put down on the desk: a small settle */
  html.js .lately.reveal { transform: translateY(28px) rotate(-3.5deg); transition-duration: 1.1s; }
  html.js .lately.reveal.in { transform: rotate(-1.2deg); }
}