:root {
  --page: #fcfbf6;
  --paper: #fbf9f3;
  --photo-paper: #fffefa;
  --ink: #20221f;
  --body-ink: #30322f;
  --muted-ink: #62655e;
  --quiet-line: #d9d7ce;
  --rose: #f8dcdd;
  --rose-deep: #f3c9cf;
  --sage: #e7e8de;
  --periwinkle: #dde1f1;
  --sand: #f5ebe2;
  --lilac: #efe1f3;
  --peach: #f7e0db;
  --sea: #a6bfd0;
  --foliage: #8b967c;
  --focus: #303c37;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --font-body: "IBM Plex Mono", "Courier New", monospace;
  --font-zh: "PingFang SC", "Microsoft YaHei", sans-serif;
  --motion-fast: 160ms;
}

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

html { background: var(--page); overflow-x: hidden; }

body {
  margin: 0;
  color: var(--body-ink);
  background: var(--page);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:lang(zh-Hans) { font-family: var(--font-zh); }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; }
.decorative { pointer-events: none; user-select: none; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--page);
  font-size: 15px;
}
.skip-link:focus { top: 12px; }

.page-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1536px);
  margin-inline: auto;
}

/* ---------- header ---------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px 52px 0;
  min-height: 128px;
}

.brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 88px;
  padding: 0 6px 0 0;
  color: var(--ink);
}
.brand__name {
  font: 500 74px / 1 var(--font-hand);
  letter-spacing: 1px;
  transform: rotate(-4deg) translateY(2px);
  transform-origin: left bottom;
}
.brand__pine { width: 32px; height: 55px; margin-top: -4px; }

.language-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 16px;
}
.language-switch a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
.language-switch [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.language-switch__divider { color: var(--muted-ink); }

/* ---------- hero ---------- */
.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 136px 456px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding: 44px 52px 0;
}

.primary-nav { display: grid; align-content: start; padding-top: 2px; }
.primary-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  font-size: 17px;
  letter-spacing: 0.02em;
  transition: color var(--motion-fast) ease;
}
.primary-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.primary-nav [aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

.hero-content { min-width: 0; }

.hero-title {
  position: relative;
  isolation: isolate;
  margin: 0 0 0 -4px;
  min-block-size: 244px;
  font: 600 100px / 1.06 var(--font-hand);
  letter-spacing: -2px;
  color: var(--ink);
}
.hero-title__line { display: block; width: fit-content; white-space: nowrap; }
.hero-title__line--1 { transform: rotate(-3deg); transform-origin: left bottom; padding-left: 14px; }
.hero-title__line--2 { transform: rotate(-5deg) translate(6px, -6px); transform-origin: left bottom; }
.hero-title__underline {
  position: absolute;
  left: 22px;
  top: 211px;
  width: 430px;
  height: 46px;
  object-fit: fill;
  z-index: -1;
  transform: rotate(-12deg);
  transform-origin: left center;
}

.hero-description {
  margin: 30px 0 0;
  max-width: 466px;
  font-size: 17px;
  line-height: 1.6;
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin: 24px 0 0 -6px;
  padding: 0;
  list-style: none;
  max-width: 500px;
}
.topic-tag {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 8px 20px;
  font: 500 24px / 1.2 var(--font-hand);
  color: var(--ink);
  transition: transform var(--motion-fast) ease;
}
.topic-tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--tag-color, var(--sage));
  -webkit-mask: var(--tag-shape) center / 100% 100% no-repeat;
  mask: var(--tag-shape) center / 100% 100% no-repeat;
}
.topic-tag--rose { --tag-color: var(--rose); --tag-shape: url("../svg/paper-tag-01.svg"); transform: rotate(-0.6deg); }
.topic-tag--sage { --tag-color: var(--sage); --tag-shape: url("../svg/paper-tag-02.svg"); transform: translateY(2px); }
.topic-tag--periwinkle { --tag-color: var(--periwinkle); --tag-shape: url("../svg/paper-tag-03.svg"); transform: translateY(-3px) rotate(0.5deg); }
.topic-tag--sand { --tag-color: var(--sand); --tag-shape: url("../svg/paper-tag-04.svg"); transform: rotate(0.4deg); }
.topic-tag--lilac { --tag-color: var(--lilac); --tag-shape: url("../svg/paper-tag-02.svg"); transform: translateY(1px); }
.topic-tag--peach { --tag-color: var(--peach); --tag-shape: url("../svg/paper-tag-01.svg"); transform: translateY(-1px) rotate(-0.4deg); }
a.topic-tag:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.hero-cta {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-right: 12px;
  margin-top: 40px;
}
.hero-cta__arrow {
  position: absolute;
  left: 83px;
  top: -5px;
  width: 64px;
  height: auto;
}
.paper-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 268px;
  min-height: 72px;
  padding: 14px 24px;
  font: 500 31px / 1.2 var(--font-hand);
  color: var(--ink);
  transform: rotate(-6deg);
  transition: transform var(--motion-fast) ease;
}
.paper-link::before {
  content: "";
  position: absolute;
  inset: -4px -6px;
  z-index: -1;
  background: url("../img/brush-cta.webp") center / 100% 100% no-repeat;
}
.paper-link:hover { transform: rotate(-6deg) translateY(-1px); }
.paper-link:active { transform: rotate(-6deg) translateY(1px); }
.paper-link__arrow { width: 30px; height: 20px; flex: 0 0 auto; }

/* ---------- notebook ---------- */
.notebook { min-width: 0; padding-top: 60px; margin-left: 6px; }
.notebook-paper {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 760px;
  max-width: 100%;
  min-height: 456px;
  transform: rotate(-5deg);
  transform-origin: center;
}
.notebook-frame {
  position: absolute;
  inset: -51px -30px;
  z-index: 0;
  background: url("../img/notebook.webp") center / 100% 100% no-repeat;
  transform: rotate(5deg);
  transform-origin: center;
}
.notebook-left { position: relative; z-index: 1; min-width: 0; padding: 46px 16px 20px 112px; }
.notebook-right { position: relative; z-index: 1; min-width: 0; padding: 16px 38px 38px 40px; }
.notebook-sprig {
  position: absolute;
  left: 6px;
  top: 90px;
  width: 78px;
  height: auto;
  z-index: 0;
}
.notebook-cat {
  position: absolute;
  left: -10px;
  top: 374px;
  width: 112px;
  height: auto;
  z-index: 2;
}

.polaroid {
  position: relative;
  display: block;
  width: 234px;
  padding: 18px 18px 58px;
  background: var(--photo-paper);
  box-shadow: 0 2px 5px rgb(32 34 31 / 5%), 0 0 0 0.5px rgb(32 34 31 / 8%);
  transform: rotate(-1deg);
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.polaroid:hover { transform: rotate(-1deg) translateY(-1px); box-shadow: 0 4px 9px rgb(32 34 31 / 8%), 0 0 0 0.5px rgb(32 34 31 / 8%); }
.polaroid img { width: 100%; height: 248px; object-fit: cover; object-position: 50% 40%; background: #fdfdfb; }
.polaroid__tape {
  position: absolute;
  left: 96px;
  top: -20px;
  width: 40px;
  height: 56px;
  opacity: 0.9;
  transform: rotate(4deg);
  background: url("../img/tape.webp") center / 100% 100% no-repeat;
}

.book-greeting {
  position: relative;
  margin: 0;
  width: fit-content;
  font: 500 40px / 1.12 var(--font-hand);
  color: var(--ink);
}
.book-greeting__line { display: block; }
.book-greeting__line--2 { transform: translateX(6px); }
.book-greeting__smile { position: absolute; left: 140px; top: 6px; width: 28px; height: 27px; }

.contact-links { display: grid; gap: 5px; margin: 34px 0 0; padding: 0; list-style: none; }
.contact-links li { display: block; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  width: fit-content;
  font-size: 17px;
  overflow-wrap: anywhere;
}
.contact-row svg { flex: 0 0 24px; width: 24px; height: 24px; }
a.contact-row:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.contact-row:nth-child(2) { transform: translateX(6px); }
.contact-row:nth-child(3) { transform: translateX(12px); }
.contact-row:nth-child(4) { transform: translateX(18px); }

/* ---------- landscape ---------- */
.landscape {
  position: relative;
  z-index: 0;
  margin-top: -68px;
  aspect-ratio: 1500 / 337;
}
.landscape img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- entrance (very light) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal 520ms ease both; }
  .reveal--2 { animation-delay: 90ms; }
  .reveal--3 { animation-delay: 180ms; }
  .reveal--4 { animation-delay: 260ms; }
  @keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .paper-link, .topic-tag, .contact-row, .polaroid, .primary-nav a { transition: none; animation: none; }
}

/* ---------- responsive ---------- */
/* Desktop: the 1536x1024 composition is scaled as a whole to fit the viewport (--fit set by the inline script). */
@media (width >= 1200px) {
  .page-shell { zoom: var(--fit, 1); }
}

@media (width < 1200px) {
  .page-header { padding: 28px 32px 0; min-height: auto; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); padding: 28px 32px 0; gap: 36px; }
  .primary-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
  .hero-content { width: min(100%, 520px); }
  .hero-cta { justify-content: flex-start; padding-left: 150px; padding-right: 0; }
  .hero-cta__arrow { left: 72px; }
  .notebook { width: min(100%, 760px); justify-self: center; padding-top: 24px; margin-left: 0; }
  .notebook-paper { width: 100%; }
  .landscape { margin-top: 40px; }
}

@media (width < 768px) {
  .page-header { padding: 20px 22px 0; }
  .brand { min-height: 64px; }
  .brand__name { font-size: 52px; }
  .brand__pine { width: 28px; height: 48px; margin-top: -4px; }
  .hero-layout { padding-inline: 22px; gap: 28px; }
  .primary-nav { gap: 0 20px; }
  .primary-nav a { font-size: 16px; }
  .hero-title { min-block-size: auto; font-size: clamp(58px, 16vw, 76px); margin-left: 0; }
  .hero-title__line--1 { padding-left: 6px; }
  .hero-title__underline { left: 8px; top: 107px; width: 232px; height: 14px; transform: rotate(-7deg); }
  .hero-description { font-size: 16px; margin-top: 24px; }
  .topic-tags { gap: 8px 10px; }
  .topic-tag { font-size: 21px; min-height: 44px; padding-inline: 18px; }
  .hero-description br { display: none; }
  .hero-cta { margin-top: 32px; padding-left: clamp(24px, 14vw, 96px); }
  .hero-cta__arrow { left: clamp(4px, 6vw, 28px); top: -6px; width: 54px; }
  .paper-link { flex-shrink: 0; width: 240px; padding-inline: 18px; transform: rotate(-3deg); font-size: 28px; white-space: nowrap; }
  .paper-link:hover { transform: rotate(-3deg) translateY(-1px); }
  .notebook-paper { grid-template-columns: minmax(0, 1fr); transform: none; min-height: auto; }
  .notebook-frame { inset: -14px -10px; background-image: url("../svg/notebook-frame-mobile.svg"); transform: none; }
  .notebook-left { padding: 40px 28px 44px; }
  .notebook-right { padding: 44px 28px 96px; }
  .notebook-sprig, .notebook-cat { display: none; }
  .polaroid { width: min(100%, 260px); margin: 0 auto; }
  .polaroid__tape { left: 50%; margin-left: -19px; }
  .book-greeting__smile { left: 150px; }
  .contact-links { margin-top: 24px; }
  .landscape { margin-top: 24px; aspect-ratio: auto; height: 190px; }
  .landscape img { object-fit: cover; object-position: left bottom; }
}

/* ==================== Projects page ==================== */

.page-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding: 44px 52px 0;
}
.page-main { min-width: 0; padding-bottom: 24px; }

.page-title-wrap { position: relative; isolation: isolate; width: fit-content; }
.page-title {
  margin: 0;
  font: 600 80px / 1.05 var(--font-hand);
  letter-spacing: -1px;
  color: var(--ink);
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
.page-title__underline {
  position: absolute;
  left: 30%;
  bottom: -6px;
  width: 72%;
  height: 18px;
  object-fit: fill;
  z-index: -1;
  transform: rotate(-3deg);
  transform-origin: left center;
}

.projects-page { max-width: 1120px; }
.projects-intro {
  margin: 22px 0 0;
  max-width: 640px;
  font: 500 25px / 1.3 var(--font-hand);
  color: var(--body-ink);
  transform: rotate(-1deg);
  transform-origin: left center;
}

.projects-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 30px 0 0;
}
.projects-filter {
  min-height: 40px;
  padding: 8px 18px;
  border: 0;
  border-radius: 8px;
  background: #f1eee7;
  font: 15px / 1.2 var(--font-body);
  color: var(--body-ink);
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.projects-filter:hover { background: #ebe6dc; color: var(--ink); }
.projects-filter[aria-pressed="true"] { background: var(--rose); color: var(--ink); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 28px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.projects-grid__item { display: flex; min-width: 0; }
.projects-grid__item[hidden] { display: none; }

.project-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 14px 14px 18px;
  background: #fffdf8;
  border: 1px solid #e6e1d6;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(32 34 31 / 3%);
  color: inherit;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.project-card__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #f1eee7;
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 200ms ease;
}
.project-card__title {
  margin: 18px 4px 0;
  font: 600 30px / 1.1 var(--font-hand);
  color: var(--ink);
}
.project-card__desc {
  margin: 8px 4px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body-ink);
}
.project-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: auto 4px 0;
  padding-top: 16px;
}
.project-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.project-tag {
  padding: 4px 11px;
  border-radius: 6px;
  font: 13px / 1.4 var(--font-body);
  color: var(--ink);
  background: #eeebe4;
}
.project-tag--green { background: #e3ecdc; }
.project-tag--peach { background: #f8e4d6; }
.project-tag--blue { background: #e0e7f3; }
.project-tag--lavender { background: #ebe2f3; }
.project-tag--lilac { background: #e6e2f3; }
.project-tag--pink { background: #f7dfe2; }
.project-tag--live { background: #dcebd4; }
.project-tag--progress { background: #f5ecc8; }
.project-tag--prototype { background: #e2e6eb; }
.project-tag--ongoing { background: #e9eecf; }
.project-card__arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms ease;
}

.project-card--link:hover,
.project-card--link:focus-visible {
  transform: translateY(-3px);
  border-color: #cfc7b8;
  box-shadow: 0 6px 16px rgb(32 34 31 / 6%);
}
.project-card--link:hover .project-card__media img,
.project-card--link:focus-visible .project-card__media img { transform: scale(1.02); }
.project-card--link:hover .project-card__arrow,
.project-card--link:focus-visible .project-card__arrow { transform: translateX(4px); }
.project-card--link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 12px; }

.projects-empty { margin: 32px 0 0; font-size: 15px; color: var(--muted-ink); }

.landscape--quiet {
  margin-top: -40px;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 38%, #000 72%);
  mask-image: linear-gradient(to right, transparent 0, transparent 38%, #000 72%);
}

@media (prefers-reduced-motion: reduce) {
  .project-card, .project-card__media img, .project-card__arrow, .projects-filter { transition: none; }
  .project-card--link:hover, .project-card--link:focus-visible { transform: none; }
  .project-card--link:hover .project-card__media img,
  .project-card--link:focus-visible .project-card__media img,
  .project-card--link:hover .project-card__arrow,
  .project-card--link:focus-visible .project-card__arrow { transform: none; }
}

@media (width < 1200px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); padding: 28px 32px 0; gap: 28px; }
}

@media (width < 768px) {
  .page-title { font-size: clamp(50px, 13vw, 64px); }
  .page-title__underline { height: 14px; bottom: -4px; }
  .projects-intro { font-size: 21px; }
  .projects-intro br { display: none; }
  .projects-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -22px;
    padding: 4px 22px 6px 0;
    scrollbar-width: none;
  }
  .projects-filters::-webkit-scrollbar { display: none; }
  .projects-filter { flex: 0 0 auto; white-space: nowrap; }
  .projects-grid { gap: 22px; margin-top: 24px; }
  .project-card__title { font-size: 27px; }
  .landscape--quiet { margin-top: 40px; -webkit-mask-image: none; mask-image: none; }
}

/* ==================== About page ==================== */

.about-stage {
  position: relative;
  z-index: 1;
  width: 1536px;
  max-width: 100%;
  height: 961px;
  margin: 0 auto;
}

.about-brand { position: absolute; left: 64px; top: 12px; z-index: 5; }
.about-language-switch { position: absolute; right: 84px; top: 24px; z-index: 5; }
.about-nav { position: absolute; left: 64px; top: 138px; z-index: 5; }

.about-title {
  position: absolute;
  left: 237px;
  top: 106px;
  z-index: 3;
  margin: 0;
  font: 600 88px / 1 var(--font-hand);
  letter-spacing: 1.6px;
  color: var(--ink);
  white-space: nowrap;
  transform: rotate(-2.5deg);
  transform-origin: left bottom;
}
.about-title__underline {
  position: absolute;
  left: 412px;
  top: 207px;
  z-index: 2;
  width: 361px;
  height: 16px;
  object-fit: fill;
  transform: rotate(-7.7deg);
  transform-origin: left center;
}

.about-roles {
  position: absolute;
  left: 243px;
  top: 222px;
  z-index: 3;
  margin: 0;
  font: 600 25px / 1.2 var(--font-hand);
  color: var(--ink);
  white-space: nowrap;
}
.about-intro {
  position: absolute;
  left: 241px;
  top: 258px;
  z-index: 3;
  width: 500px;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
}

.about-note {
  position: absolute;
  z-index: 4;
  margin: 0;
  font: 500 22px / 1.3 var(--font-hand);
  color: var(--ink);
}
.about-note--hello {
  left: 1020px;
  top: 100px;
  width: 190px;
  transform: rotate(-8deg);
}
.about-note__arrow {
  position: absolute;
  left: -50px;
  top: 6px;
  width: 52px;
  height: auto;
  transform: scaleX(-1) rotate(-4deg);
}
.about-note__smiley { position: absolute; left: 108px; top: 45px; width: 28px; height: 27px; }
.about-quote {
  position: absolute;
  left: 1416px;
  top: 566px;
  z-index: 1;
  width: 108px;
  margin: 0;
  color: var(--muted-ink);
  transform: rotate(-8deg);
  transform-origin: left top;
}
.about-quote__text { margin: 0; font: 500 18px / 1.25 var(--font-hand); }
.about-quote__cite { margin: 8px 0 0; font: 500 14px / 1.2 var(--font-hand); opacity: 0.85; }
.about-heart-icon {
  width: 16px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  vertical-align: -1px;
}

.about-photo {
  position: absolute;
  left: 748px;
  top: 189px;
  z-index: 3;
  margin: 0;
  width: 281px;
  padding: 18px 18px 40px;
  background: var(--photo-paper);
  box-shadow: 0 2px 5px rgb(32 34 31 / 5%), 0 0 0 0.5px rgb(32 34 31 / 8%);
  transform: rotate(-3deg);
}
.about-photo img { width: 100%; height: 224px; object-fit: cover; object-position: 50% 40%; background: #fdfdfb; }
.about-photo__tape {
  position: absolute;
  left: 118px;
  top: -20px;
  width: 40px;
  height: 56px;
  opacity: 0.9;
  transform: rotate(4deg);
  background: url("../img/tape.webp") center / 100% 100% no-repeat;
}
.about-photo__caption { margin: 12px 0 0; font: 500 17px var(--font-hand); text-align: center; color: var(--ink); }

/* ---- cards ---- */
/* Outer .about-card: position + rotation + drop-shadow only (transparent, no bg/clip). */
.about-card {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 1px 0 rgb(32 34 31 / 20%)) drop-shadow(0 3px 7px rgb(32 34 31 / 9%));
}
/* Inner .about-card__sheet: bg + padding + torn clip-path; positioning context for tape/icons. */
.about-card__sheet {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  background: #f4efe6;
}
.about-card__sheet--torn-a { clip-path: polygon(1% 4%, 18% 0%, 40% 2%, 63% 0%, 84% 3%, 99% 1%, 100% 22%, 98% 45%, 100% 68%, 99% 90%, 97% 100%, 74% 98%, 52% 100%, 30% 98%, 8% 100%, 2% 96%, 0% 74%, 2% 50%, 0% 26%); }
.about-card__sheet--torn-b { clip-path: polygon(2% 2%, 22% 0%, 45% 2%, 68% 0%, 90% 2%, 100% 0%, 99% 20%, 100% 42%, 98% 64%, 100% 86%, 98% 100%, 78% 98%, 56% 100%, 34% 98%, 12% 100%, 0% 98%, 1% 76%, 0% 52%, 2% 28%); }
.about-card__sheet--torn-c { clip-path: polygon(1% 6%, 20% 0%, 42% 3%, 65% 0%, 88% 3%, 100% 1%, 99% 24%, 100% 50%, 98% 76%, 99% 96%, 96% 100%, 72% 98%, 48% 100%, 24% 98%, 4% 100%, 0% 92%, 2% 66%, 0% 40%, 1% 18%); }
.about-card__sheet--journey { background: #f8f5ee; clip-path: polygon(0.3% 1.5%, 30% 0%, 70% 0.8%, 99.6% 0%, 100% 30%, 99.5% 70%, 100% 98.5%, 70% 100%, 30% 99.3%, 0.4% 100%, 0% 70%, 0.3% 30%); }

.about-card__title {
  position: relative;
  margin: 0;
  font: 600 30px / 1.2 var(--font-hand);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Brush-shaped highlight behind the full heading text (not a solid block). */
.about-card__highlight {
  position: relative;
  isolation: isolate;
  display: inline-block;
  width: fit-content;
}
.about-card__highlight::before {
  content: "";
  position: absolute;
  inset: 18% -8% 2% -6%;
  z-index: -1;
  background-color: var(--marker, var(--sage));
  -webkit-mask: url("../img/brush-underline.webp") center / 100% 100% no-repeat;
  mask: url("../img/brush-underline.webp") center / 100% 100% no-repeat;
  opacity: 0.85;
  transform: rotate(-2deg);
}
.about-card__highlight--sage { --marker: #cfd8c6; }
.about-card__highlight--periwinkle { --marker: #cbd6ef; }
.about-card__highlight--moss { --marker: #d5dccd; }
.about-card__highlight--rose { --marker: #f3c9cf; }
.about-card__highlight--lilac { --marker: #e4d3ec; }
.about-card__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted-ink); }
.about-card__tape {
  position: absolute;
  left: 50%;
  top: -16px;
  width: 40px;
  height: 56px;
  margin-left: -20px;
  opacity: 0.85;
  z-index: 3;
}
.about-card__tape--sage {
  left: 46%;
  top: -18px;
  width: 74px;
  height: 36px;
  margin-left: -37px;
  background-color: #cfd8c6;
  -webkit-mask: url("../img/tape.webp") center / 100% 100% no-repeat;
  mask: url("../img/tape.webp") center / 100% 100% no-repeat;
  transform: rotate(-1.5deg);
}
.about-card__tape--periwinkle { background-color: #c9d5ee; -webkit-mask: url("../img/tape.webp") center / 100% 100% no-repeat; mask: url("../img/tape.webp") center / 100% 100% no-repeat; transform: rotate(3deg); }
.about-card__icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ink); }

.about-card--based-in { left: 230px; top: 330px; width: 476px; height: 250px; transform: rotate(-3deg); }
.about-card--based-in .about-card__sheet { padding: 24px 28px 0; }
.about-card--based-in .about-card__place { margin: 10px 0 0; font: 500 16px var(--font-body); color: var(--ink); }
.about-card--based-in .about-card__text { margin-top: 6px; max-width: 340px; font-size: 14px; line-height: 1.45; }
.about-card__sprig { position: absolute; right: 22px; top: 14px; width: 64px; height: auto; transform: rotate(20deg); }
.about-card__skyline { position: absolute; left: 50%; bottom: 6px; width: 400px; height: auto; transform: translateX(-50%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); }

.about-card--care { left: 1073px; top: 184px; width: 373px; height: 272px; transform: rotate(-3.5deg); }
.about-card--care .about-card__sheet { padding: 28px 44px 0 30px; }
.about-card--care .about-card__title { font-size: 32px; }
.about-list { margin: 22px 0 0; padding: 0 0 0 20px; font-size: 15px; line-height: 1.4; color: var(--body-ink); white-space: nowrap; }
.about-list li { margin: 0 0 16px; padding-left: 4px; }
.about-list li::marker { color: var(--ink); }
.about-card__heart { position: absolute; right: 14px; top: 46%; width: 24px; height: 22px; color: var(--ink); }

.about-card--currently { left: 165px; top: 600px; width: 411px; height: 196px; transform: rotate(-1deg); }
.about-card--currently .about-card__sheet { padding: 24px 28px 0; }
.about-card--currently .about-card__title { font-size: 32px; }
.about-card--currently .about-card__text { margin-top: 14px; max-width: 300px; font-size: 15px; }
.about-card__cup { position: absolute; left: 80%; top: 58%; width: 62px; height: auto; color: var(--ink); }

.about-card--journey { left: 628px; top: 540px; width: 412px; height: 330px; transform: rotate(-1.4deg); }
.about-card--journey .about-card__sheet { padding: 22px 22px 0 50px; }
.about-card__holes {
  position: absolute;
  left: 16px;
  top: 12px;
  bottom: 12px;
  width: 14px;
  background-image: radial-gradient(circle, var(--quiet-line) 6.5px, transparent 7px);
  background-size: 14px 27px;
  background-repeat: repeat-y;
}
.about-timeline { position: relative; margin: 12px 0 0; padding: 0 0 0 24px; list-style: none; }
.about-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 10px; width: 1px; background: var(--ink); opacity: 0.6; }
.about-timeline__item { position: relative; margin: 0 0 14px; }
.about-timeline__item:last-child { margin-bottom: 0; }
.about-timeline__dot { position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.about-timeline__title { margin: 0; font: 500 14.5px / 1.35 var(--font-body); color: var(--ink); }
.about-timeline__desc { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted-ink); }
.about-travel { margin: 8px 0 0 24px; font: 500 17px / 1.25 var(--font-hand); color: var(--ink); }
.about-travel__label { color: var(--muted-ink); }

.about-card--likes { left: 1072px; top: 520px; width: 336px; height: 318px; transform: rotate(-1deg); }
.about-card--likes .about-card__sheet { padding: 24px 22px 0; }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.topic-tag--compact { font-size: 19px; min-height: 36px; padding: 5px 14px; white-space: nowrap; }

.about-cat { position: absolute; left: 1376px; top: 800px; z-index: 4; width: 102px; height: auto; }
.about-cat__zzz { position: absolute; left: 1470px; top: 786px; z-index: 4; font: 500 16px var(--font-hand); color: var(--ink); }

/* Landscape is enlarged and left-aligned so the sitting figure at its right end
   is pushed out of the visible frame (no person in this design); the right edge
   fades out with a mask instead of a hard crop. */
.about-landscape { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 345px; overflow: hidden; }
.about-landscape img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 80%);
  mask-image: linear-gradient(to right, #000 72%, transparent 80%);
}

@media (width < 1200px) {
  .about-stage { position: static; width: auto; height: auto; padding: 28px 32px 32px; }
  .about-brand, .about-language-switch, .about-nav,
  .about-title, .about-title__underline, .about-roles, .about-intro, .about-quote,
  .about-note, .about-card, .about-cat, .about-cat__zzz,
  .about-landscape {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto; height: auto;
    transform: none;
    margin: 0;
  }
  .about-brand { display: inline-flex; }
  .about-language-switch { display: flex; margin-top: 12px; }
  .about-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; }
  .about-title { display: block; white-space: normal; font-size: clamp(52px, 8vw, 76px); margin-top: 32px; max-width: 560px; }
  .about-title__underline { display: block; width: 220px; height: 12px; margin: 6px 0 0 4px; transform: rotate(-4deg); }
  .about-roles { display: block; margin-top: 18px; white-space: normal; }
  .about-intro { display: block; width: auto; max-width: 480px; margin-top: 10px; }
  .about-quote { display: block; margin: 32px auto 0; max-width: 320px; text-align: center; }
  .about-quote__text br, .about-quote__cite br { display: none; }
  .about-note--hello { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
  .about-note__arrow { display: none; }
  .about-note__smiley { position: static; margin-left: 4px; }
  .about-photo { position: relative; left: auto; top: auto; width: min(100%, 340px); transform: none; margin: 28px auto 0; }
  .about-photo img { height: auto; aspect-ratio: 242 / 257; }
  .about-photo__tape { left: 50%; margin-left: -20px; }
  /* Cards: keep the torn clip-path + drop-shadow, but drop rotation to ~level and
     let width/height become fluid; .about-card__sheet stays position:relative so
     tape/icons stay anchored to their own card instead of floating on the page. */
  .about-card { margin-top: 28px; }
  .about-card--based-in, .about-card--care, .about-card--currently, .about-card--likes { transform: rotate(-0.6deg); }
  .about-card--journey { transform: none; }
  .about-card--based-in .about-card__sheet,
  .about-card--care .about-card__sheet,
  .about-card--currently .about-card__sheet,
  .about-card--journey .about-card__sheet,
  .about-card--likes .about-card__sheet { padding-bottom: 24px; }
  .about-card__sprig { display: none; }
  .about-card__skyline { position: static; display: block; width: 100%; max-width: 420px; margin: 16px auto 0; transform: none; }
  .about-card__heart, .about-card__cup { display: none; }
  .about-card__holes { display: none; }
  .about-card--journey .about-card__sheet { padding-left: 28px; }
  .about-card__tape--sage { left: 50%; margin-left: -37px; }
  .about-cat { display: none; }
  .about-cat__zzz { display: none; }
  .about-tags { display: flex; flex-wrap: wrap; gap: 10px; }
  /* Shorter aspect ratio than the source image forces object-fit:cover to crop
     off the right side (where the sitting figure is), keeping only the left ~75%. */
  .about-landscape { position: relative; margin-top: 40px; height: auto; aspect-ratio: 1500 / 450; overflow: hidden; }
  .about-landscape img { position: static; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left bottom; mask-image: none; -webkit-mask-image: none; }
}

@media (width < 768px) {
  .about-stage { padding: 20px 22px 24px; }
  .about-title { font-size: clamp(46px, 13vw, 60px); }
  .about-intro br { display: none; }
  .about-tags { gap: 10px; }
  .topic-tag--compact { font-size: 20px; min-height: 40px; }
}

/* ==================== Contact page ==================== */

.contact-stage {
  position: relative;
  z-index: 1;
  width: 1536px;
  max-width: 100%;
  height: 1024px;
  margin: 0 auto;
}

.contact-brand { position: absolute; left: 56px; top: 8px; z-index: 5; }
.contact-language-switch { position: absolute; right: 56px; top: 22px; z-index: 5; }
.contact-nav { position: absolute; left: 54px; top: 131px; z-index: 5; }
.contact-nav a { min-height: 39px; font-size: 16px; }
.contact-nav__underline {
  position: absolute;
  left: 0;
  top: 186px;
  z-index: 1;
  width: 96px;
  height: 16px;
  object-fit: fill;
  transform: rotate(-4deg);
  transform-origin: left center;
}

.contact-heart {
  width: 20px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  vertical-align: -3px;
  color: var(--ink);
}
.contact-heart--sm { width: 15px; height: 14px; vertical-align: -2px; }

.contact-title {
  position: absolute;
  left: 240px;
  top: 180px;
  z-index: 3;
  margin: 0;
  font: 600 92px / 0.66 var(--font-hand);
  color: var(--ink);
  transform: rotate(-4deg);
  transform-origin: left top;
}
.contact-title__line { display: block; width: fit-content; white-space: nowrap; }
.contact-title__line--2 { padding-left: 14px; }
.contact-title__brush {
  position: absolute;
  left: 345px;
  top: 318px;
  z-index: 2;
  width: 421px;
  height: 16px;
  object-fit: fill;
  transform: rotate(-4.8deg);
  transform-origin: left center;
}


.contact-methods {
  position: absolute;
  left: 240px;
  top: 408px;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-methods__row { display: flex; align-items: center; gap: 22px; width: fit-content; min-height: 40px; }
.contact-methods__row:hover .contact-methods__value,
.contact-methods__row:focus-visible .contact-methods__value { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.contact-methods__tag {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 236px;
  height: 40px;
  padding: 0 16px;
  font: 600 21px / 1 var(--font-hand);
  color: var(--ink);
  white-space: nowrap;
}
.contact-methods__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  inset: -3px -6px;
  background-color: var(--tag-color, var(--rose));
  -webkit-mask: url("../img/brush-cta.webp") center / 100% 100% no-repeat;
  mask: url("../img/brush-cta.webp") center / 100% 100% no-repeat;
}
.contact-methods__tag--email { --tag-color: var(--rose); }
.contact-methods__tag--linkedin { --tag-color: var(--sage); }
.contact-methods__tag--instagram { --tag-color: var(--lilac); }
.contact-methods__tag--learning { --tag-color: var(--periwinkle); }
.contact-methods__tag--xhs { --tag-color: var(--peach); }
.contact-methods__tag svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--ink); }
.contact-methods__value { font-size: 15px; color: var(--body-ink); overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.contact-postcard {
  position: absolute;
  left: 830px;
  top: 240px;
  z-index: 2;
  width: 478px;
  height: 440px;
  transform: rotate(2.5deg);
  filter: drop-shadow(0 2px 4px rgb(32 34 31 / 10%)) drop-shadow(0 1px 0 rgb(32 34 31 / 15%));
}
.contact-postcard__tape {
  position: absolute;
  left: 185px;
  top: -35px;
  z-index: 3;
  width: 68px;
  height: 72px;
  opacity: 0.9;
  transform: rotate(-10.5deg);
  background: url("../img/tape.webp") center / 100% 100% no-repeat;
}
.contact-postcard__sheet {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  background: #f6f1e8;
  border: 1.2px solid rgb(32 34 31 / 55%);
  border-radius: 6px 4px 6px 4px;
  box-shadow: 0 1px 2px rgb(32 34 31 / 8%);
}
.contact-postcard__sheet::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 1;
  border: 1px solid rgb(32 34 31 / 35%);
  border-radius: 5px 3px 5px 3px;
  pointer-events: none;
}
.contact-postcard__stamp {
  position: absolute;
  left: 378px;
  top: 28px;
  z-index: 3;
  width: 76px;
  height: 100px;
  filter: drop-shadow(0 1px 1.5px rgb(32 34 31 / 18%));
  transform: rotate(1.5deg);
}
.contact-postcard__postmark {
  position: absolute;
  left: 312px;
  top: 53px;
  z-index: 4;
  width: 85px;
  height: 55px;
}
.contact-postcard__letter {
  position: relative;
  z-index: 1;
  padding: 76px 58px 24px 50px;
}
.contact-postcard__letter p {
  margin: 0;
  font: 21px / 1.28 var(--font-hand);
  color: var(--ink);
}
.contact-postcard__letter p.contact-postcard__gap-a { margin-top: 18px; }
.contact-postcard__letter p.contact-postcard__gap-b { margin-top: 12px; line-height: 1.34; }
.contact-postcard__letter p.contact-postcard__gap-c { margin-top: 12px; }
.contact-postcard__letter p.contact-postcard__gap-d { margin-top: 20px; }

.contact-sticky {
  position: absolute;
  z-index: 4;
  filter: drop-shadow(0 1px 0 rgb(32 34 31 / 15%)) drop-shadow(0 3px 6px rgb(32 34 31 / 8%));
}
.contact-sticky__sheet {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  padding: 20px 14px;
  background: #efe9dd;
  clip-path: polygon(2% 3%, 25% 0%, 55% 2%, 80% 0%, 98% 3%, 100% 25%, 98% 50%, 100% 75%, 97% 98%, 70% 100%, 40% 98%, 15% 100%, 2% 97%, 0% 70%, 2% 40%, 0% 15%);
}
.contact-sticky--top { left: 1285px; top: 86px; width: 190px; height: 185px; transform: rotate(8deg); }
.contact-sticky--bottom { left: 1338px; top: 495px; width: 140px; height: 215px; transform: rotate(2deg); }
.contact-sticky__tape {
  position: absolute;
  left: 50%;
  top: -17px;
  z-index: 2;
  width: 50px;
  height: 34px;
  margin-left: -25px;
  opacity: 0.9;
}
.contact-sticky__tape--rose { background: url("../img/tape.webp") center / 100% 100% no-repeat; }
.contact-sticky__tape--sage {
  background-color: #cdd6c4;
  -webkit-mask: url("../img/tape.webp") center / 100% 100% no-repeat;
  mask: url("../img/tape.webp") center / 100% 100% no-repeat;
}
.contact-sticky__text { margin: 0; font: 500 20px / 1.25 var(--font-hand); color: var(--ink); }
.contact-sticky--top .contact-sticky__text { font-size: 19px; line-height: 1.28; padding-right: 4px; }
.contact-sticky--bottom .contact-sticky__text { margin-top: 18px; font-size: 23px; line-height: 1.3; }
.contact-sticky__smiley { position: absolute; right: 10px; bottom: 10px; width: 26px; height: auto; }
.contact-sticky__smiley--top { width: 30px; }

.contact-flower {
  position: absolute;
  left: 1352px;
  top: 304px;
  z-index: 3;
  width: 80px;
  height: auto;
  transform: rotate(20deg);
}

.contact-cat { position: absolute; left: 995px; top: 668px; z-index: 5; width: 148px; height: auto; }

.contact-aside { position: absolute; margin: 0; font: 500 18px / 1.3 var(--font-hand); color: var(--ink); }
.contact-aside--wait { left: 1163px; top: 698px; z-index: 5; transform: rotate(-8deg); }
.contact-aside--places { left: 88px; top: 940px; z-index: 2; transform: rotate(-6deg); }
.contact-aside--world { left: 1308px; top: 952px; z-index: 2; text-align: right; transform: rotate(-5deg); }
.contact-aside__rule { display: inline-block; width: 56px; height: 1px; margin-left: 6px; background: var(--ink); opacity: 0.6; vertical-align: middle; }

.contact-landscape { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 0; }
.contact-landscape img { width: 100%; height: auto; display: block; }

@media (width < 1200px) {
  .contact-stage { position: static; width: auto; height: auto; padding: 28px 32px 32px; }
  .contact-brand, .contact-language-switch, .contact-nav, .contact-nav__underline,
  .contact-title, .contact-title__brush,
  .contact-methods,
  .contact-postcard, .contact-sticky--top, .contact-sticky--bottom,
  .contact-flower, .contact-cat, .contact-aside, .contact-landscape {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto; height: auto;
    transform: none;
    margin: 0;
  }
  .contact-brand { display: inline-flex; }
  .contact-language-switch { display: flex; margin-top: 12px; }
  .contact-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; }
  .contact-nav__underline { display: none; }
  .contact-title { display: block; font-size: clamp(48px, 8vw, 76px); margin-top: 32px; max-width: 560px; }
  .contact-title__line { white-space: normal; }
  .contact-title__brush { display: none; }
  .contact-methods { margin-top: 24px; gap: 12px; }
  .contact-methods__row { flex-wrap: wrap; gap: 6px 14px; min-height: 44px; }
  .contact-postcard { width: min(100%, 460px); margin: 32px auto 0; transform: rotate(1deg); }
  .contact-postcard__stamp {
    left: auto;
    right: 14px;
    top: 14px;
    width: 56px;
    height: 74px;
    transform: none;
  }
  .contact-postcard__postmark {
    left: auto;
    right: 52px;
    top: 26px;
    width: 58px;
    height: 38px;
    transform: none;
  }
  .contact-postcard__letter p:first-child,
  .contact-postcard__letter p.contact-postcard__gap-a { padding-right: 74px; }
  .contact-sticky--top { width: min(78%, 280px); margin: 28px 0 0 auto; }
  .contact-sticky--bottom { width: min(60%, 220px); margin: 16px auto 0 0; }
  .contact-flower, .contact-cat { display: none; }
  .contact-aside--wait { display: block; margin-top: 16px; }
  .contact-aside--places, .contact-aside--world { display: block; margin-top: 8px; }
  .contact-landscape { position: relative; margin-top: 40px; }
}

@media (width < 768px) {
  .contact-stage { padding: 20px 22px 24px; }
  .contact-title { font-size: clamp(44px, 12.5vw, 64px); }
  .contact-methods__tag { width: auto; min-width: 150px; }
  .contact-aside--world { display: none; }
}

/* ==================== Notes page ==================== */

.notes-stage {
  position: relative;
  z-index: 1;
  width: 1536px;
  max-width: 100%;
  height: 1024px;
  margin: 0 auto;
}

.notes-tree {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.notes-brand { position: absolute; left: 48px; top: 6px; z-index: 5; }
.notes-language-switch { position: absolute; right: 54px; top: 14px; z-index: 5; }
.notes-nav { position: absolute; left: 44px; top: 122px; z-index: 5; }
.notes-nav a { position: relative; z-index: 2; min-height: 38px; font-size: 16px; }
.notes-nav [aria-current="page"] { text-decoration: none; }
.notes-nav__underline {
  position: absolute;
  left: -4px;
  top: 92px;
  z-index: 1;
  width: 70px;
  height: 12px;
  object-fit: fill;
  transform: rotate(-5deg);
  transform-origin: left center;
}

.notes-title {
  position: absolute;
  left: 208px;
  top: 92px;
  z-index: 4;
  margin: 0;
  font: 600 90px / 1 var(--font-hand);
  letter-spacing: -1px;
  color: var(--ink);
  white-space: nowrap;
  transform: rotate(-4deg);
  transform-origin: left bottom;
}
.notes-title__brush {
  position: absolute;
  left: 222px;
  top: 178px;
  z-index: 3;
  width: 462px;
  height: 16px;
  object-fit: fill;
  transform: rotate(-4deg);
  transform-origin: left center;
}
.notes-intro {
  position: absolute;
  left: 216px;
  top: 200px;
  z-index: 4;
  margin: 0;
  font: 500 30px / 0.94 var(--font-hand);
  color: var(--ink);
  white-space: nowrap;
  transform: rotate(-1deg);
  transform-origin: left top;
}

.notes-filters {
  position: absolute;
  left: 113px;
  top: 348px;
  z-index: 4;
  display: flex;
  gap: 12px;
}
.notes-filter {
  height: 37px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: #f2efe8;
  font: 14px / 1 var(--font-body);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease;
}
.notes-filter:hover { background: #ebe6dc; }
.notes-filter[aria-pressed="true"] { background: #f8d7dc; }
.notes-filter[data-filter="all"] { padding-inline: 28px; }

.notes-photos, .notes-leaves { position: absolute; inset: 0; pointer-events: none; }
.notes-leaves { z-index: 2; }
.notes-photos { z-index: 3; }

/* one leaf = one note; the box is the leaf's footprint on the canvas */
.note-leaf {
  --leaf: #e5ead8;
  --leaf-deep: #c3cfad;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: block;
  color: var(--ink);
  pointer-events: none;
  transition: translate 260ms cubic-bezier(.3, .7, .3, 1), opacity 220ms ease, filter 220ms ease;
}
.note-leaf--pink { --leaf: #f7dfe0; --leaf-deep: #efbfc3; }
.note-leaf--blue { --leaf: #e3eaf1; --leaf-deep: #c2d1e0; }
.note-leaf--beige { --leaf: #f5ebdd; --leaf-deep: #e5cfb3; }

.note-leaf__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(var(--rot));
  transform-origin: 50% 50%;
}
.note-leaf--flip .note-leaf__shape { transform: rotate(var(--rot)) scaleX(-1); }

.note-leaf__fill { fill: var(--leaf); pointer-events: auto; }
.note-leaf__rim {
  fill: none;
  stroke: var(--leaf-deep);
  stroke-width: 16;
  stroke-opacity: 0.38;
  vector-effect: non-scaling-stroke;
}
.note-leaf__vein {
  fill: none;
  stroke: #4a4c43;
  stroke-width: 1;
  stroke-opacity: 0.22;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.note-leaf__vein--side { stroke-opacity: 0.14; }
.note-leaf__outline {
  fill: none;
  stroke: #33352f;
  stroke-width: 1.3;
  stroke-opacity: 0.72;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke-width 160ms ease, stroke-opacity 160ms ease;
}

.note-leaf__body {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  width: var(--tw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}
.note-leaf__date {
  font: 13px / 1.2 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--muted-ink);
}
.note-leaf__title {
  font: 600 var(--fs, 26px) / 1.05 var(--font-hand);
  color: var(--ink);
  white-space: pre-line;
}
.note-leaf__arrow {
  position: absolute;
  left: var(--ax);
  top: var(--ay);
  width: 26px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: auto;
  transition: transform 200ms ease;
}

.note-leaf:hover, .note-leaf:focus-visible { translate: 0 -4px; }
.note-leaf:hover .note-leaf__arrow, .note-leaf:focus-visible .note-leaf__arrow { transform: translateX(5px); }
.note-leaf:hover .note-leaf__outline { stroke-opacity: 1; }
.note-leaf:focus-visible { outline: none; }
.note-leaf:focus-visible .note-leaf__outline { stroke: var(--focus); stroke-width: 3; stroke-opacity: 1; }

.note-leaf.is-muted { opacity: 0.26; filter: saturate(0.4); }
.note-leaf.is-muted .note-leaf__fill,
.note-leaf.is-muted .note-leaf__body,
.note-leaf.is-muted .note-leaf__arrow { pointer-events: none; }

/* Polaroid memories between branches */
.note-photo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin: 0;
  padding: 8px 8px 22px;
  background: #fffefa;
  box-shadow: 0 1px 1px rgb(32 34 31 / 12%), 0 4px 10px rgb(32 34 31 / 10%);
  transform: rotate(var(--rot));
}
.note-photo img { width: 100%; height: 100%; object-fit: cover; }
.note-photo__tape {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 40px;
  height: 30px;
  margin-left: -20px;
  opacity: 0.85;
  background-color: var(--tape, #d3dcc8);
  -webkit-mask: url("../img/tape.webp") center / 100% 100% no-repeat;
  mask: url("../img/tape.webp") center / 100% 100% no-repeat;
}
.note-photo__tape--blue { --tape: #cfdbe6; }
.note-photo__tape--rose { --tape: #f3c9cf; }

.notes-noscript { position: absolute; left: 760px; top: 420px; z-index: 4; margin: 0; font-size: 15px; }

.notes-aside {
  position: absolute;
  left: 52px;
  top: 930px;
  z-index: 4;
  margin: 0;
  font: 500 20px / 1.25 var(--font-hand);
  color: var(--ink);
  transform: rotate(-12deg);
  transform-origin: left top;
}
.notes-aside__rule {
  display: inline-block;
  width: 76px;
  height: 1px;
  margin-left: 8px;
  background: var(--ink);
  opacity: 0.6;
  vertical-align: middle;
  transform: rotate(-4deg);
}

@media (prefers-reduced-motion: no-preference) {
  .note-leaf { animation: note-leaf-grow 620ms cubic-bezier(.25, .8, .3, 1) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
  @keyframes note-leaf-grow {
    from { opacity: 0; scale: 0.86; }
    to { opacity: 1; scale: 1; }
  }
  .note-leaf.is-muted { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .note-leaf, .note-leaf__arrow, .note-leaf__outline, .notes-filter { transition: none; }
  .note-leaf:hover, .note-leaf:focus-visible { translate: none; }
  .note-leaf:hover .note-leaf__arrow, .note-leaf:focus-visible .note-leaf__arrow { transform: none; }
}

@media (width < 1200px) {
  .notes-stage { width: auto; height: auto; padding: 28px 32px 40px; }
  .notes-tree, .notes-nav__underline, .notes-title__brush, .notes-photos { display: none; }
  .notes-brand, .notes-language-switch, .notes-nav,
  .notes-title, .notes-intro, .notes-filters, .notes-leaves, .notes-aside, .notes-noscript {
    position: static;
    transform: none;
  }
  .notes-brand { display: inline-flex; }
  .notes-language-switch { display: flex; margin-top: 12px; }
  .notes-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; }
  .notes-nav a { min-height: 44px; }
  .notes-nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
  .notes-title { margin-top: 32px; font-size: clamp(56px, 9vw, 84px); white-space: normal; transform: rotate(-2deg); }
  .notes-intro { margin-top: 14px; font-size: 24px; white-space: normal; }
  .notes-intro br { display: none; }
  .notes-filters { flex-wrap: wrap; gap: 10px; margin-top: 28px; }
  .notes-filter { height: 40px; }

  .notes-leaves {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 18px 24px;
    margin-top: 32px;
    pointer-events: auto;
  }
  .note-leaf {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 230;
    pointer-events: auto;
  }
  .note-leaf:nth-child(odd) .note-leaf__shape { transform: rotate(-3deg); }
  .note-leaf:nth-child(even) .note-leaf__shape { transform: rotate(3deg) scaleX(-1); }
  .note-leaf__body { left: 22%; right: 20%; top: 24%; width: auto; }
  .note-leaf__title { font-size: 26px; white-space: normal; text-wrap: balance; }
  .note-leaf__arrow { left: auto; right: 24%; top: auto; bottom: 20%; }
  .note-leaf.is-muted { display: none; }
  .notes-aside { margin-top: 32px; font-size: 21px; transform: rotate(-3deg); }
  .notes-noscript { margin-top: 24px; }
}

@media (width < 768px) {
  .notes-stage { padding: 20px 22px 32px; }
  .notes-intro { font-size: 22px; }
  .notes-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -22px;
    padding: 4px 22px 6px 0;
    scrollbar-width: none;
  }
  .notes-filters::-webkit-scrollbar { display: none; }
  .notes-filter { flex: 0 0 auto; }
  .note-leaf__title { font-size: 25px; }
  .note-leaf { width: 94%; }
  .note-leaf:nth-child(even) { margin-left: 6%; }
}

/* placeholder page for a note that is still being written */
.note-soon { max-width: 640px; padding: 24px 0 80px; }
.note-soon__date { margin: 0; font-size: 14px; color: var(--muted-ink); }
.note-soon__title { margin: 10px 0 0; font: 600 64px / 1.05 var(--font-hand); color: var(--ink); text-wrap: balance; }
.note-soon__text { margin: 24px 0 0; font-size: 16px; }
.note-soon__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 20px;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
@media (width < 768px) { .note-soon__title { font-size: 48px; } }