/* v14 — warm paper, smoked-rose lettering, and quiet editorial details. */
:root {
  --paper: #fff9f0;
  --ink: #654a59;
  --rose: #a16e83;
  --line: #d8bdc7;
}
html { scroll-padding-top: 100px; }
::selection { background: #e9c9d9; color: #513d56; }
body[data-complete] header {
  min-height: 78px;
  padding: 15px 5%;
  background: #fffaf2ed;
  border-bottom: 1px solid #b996aa33;
  box-shadow: 0 3px 22px #81617605;
}
header .brand { display: flex; align-items: center; gap: 12px; font-size: 27px; }
.brand-symbol { width: 39px; height: auto; transform: rotate(-10deg); }
.brand-name { display: grid; gap: 4px; }
.brand-name small { font: 8px/1 Georgia, serif; letter-spacing: .29em; color: #9e7d8d; }
header nav { gap: clamp(12px, 2.4vw, 34px); font-size: 12px; letter-spacing: .05em; }
header nav a { position: relative; padding: 11px 0; transition: color .2s; }
header nav a.current { border: 0; color: #90576f; }
header nav a::after { content: ''; position: absolute; bottom: 1px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #a27289; opacity: 0; transform: translateX(-50%); transition: opacity .2s; }
header nav a.current::after, header nav a:hover::after { opacity: 1; }
.motion-button { border-color: #d7bfca; padding: 8px 12px; font-size: 10px; background: #fffaf780; transition: background .2s; }
.motion-button:hover { background: #f2e6eb; }

/* Keep the author's two portrait layers. Typography gets its own quiet space. */
.hero {
  height: clamp(650px, calc(100svh - 78px), 960px);
  background: radial-gradient(ellipse at 11% 40%, #fff6e2 0, #fff6e2aa 22%, transparent 55%), linear-gradient(117deg, #f9e5d5, #edced9 65%, #ddc7e1);
  isolation: isolate;
}
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, #fff4df66, transparent 48%); }
.hero .latin { color: #855b7b13; letter-spacing: -.025em; transform: rotate(-7deg) scaleY(1.48); }
.hero .cloud-a { opacity: .65; width: 250px; top: 6%; left: -130px; }
.hero-copy { top: 22%; left: 7.5%; width: 35%; max-width: 450px; }
.hero .eyebrow { color: #8c6d7d; font-size: 8px; letter-spacing: .29em; display: flex; align-items: center; gap: 12px; }
.hero .eyebrow::before { content: ''; width: 28px; height: 1px; background: #ae8391; }
.hero .wordmark { margin: 24px 0 0; filter: none; }
.hero .wordmark-art { width: 100%; height: auto; }
.hero .portfolio-label { margin: 12px 0 0; gap: 14px; padding-bottom: 22px; }
.hero .portfolio-label span { font-size: 14px; letter-spacing: .27em; color: #765166; }
.hero .portfolio-label small { font-size: 8px; color: #947286; letter-spacing: .2em; }
.hero .portfolio-label svg { width: 83%; left: 3%; height: 20px; }
.hero .portfolio-label path { stroke: #9f7997; stroke-width: .9; }
.hero .hero-subtitle { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.65; color: #826474; margin: 18px 0 0; letter-spacing: .015em; }
.hero .hero-subtitle span + span { margin-left: 28px; }
.hero-action { display: inline-flex; align-items: center; gap: 25px; margin-top: 22px; padding: 9px 18px 9px 20px; border: 1px solid #ae8a9a80; border-radius: 40px; background: #fff7ed60; font-size: 11px; line-height: 1.2; letter-spacing: .13em; transition: background .2s, transform .2s, box-shadow .2s; }
.hero-action span { font: 18px Georgia, serif; }
.hero-action:hover { background: #fff9edc9; transform: translateY(-3px); box-shadow: 0 8px 24px #a77b8a15; }
.hero-character { width: min(62vw, 96svh, 1080px); right: -4%; bottom: -8%; }
.hero-echo { opacity: .2; transform: translate(-28%, -28%) scale(1.1); }
.hero .scroll-link { left: 7.5%; bottom: 28px; display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .16em; color: #886e7e; }
.hero .scroll-link::before { content: ''; height: 29px; width: 1px; background: linear-gradient(#a47e92, #a47e921a); }
.hero-ornament { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero-ornament .orbit-line { fill: none; stroke: #fff7e7; stroke-width: 1; opacity: .65; }
.hero-ornament .orbit-star { fill: #fff8e5; opacity: .8; }
.hero-annotation { position: absolute; right: 4%; top: 6%; z-index: 4; margin: 0; writing-mode: vertical-rl; font: 9px/1.6 Georgia, serif; letter-spacing: .25em; color: #8c6c86; }

/* The introduction remains a hand-drawn collage, with more breathing room. */
.about { padding-top: 110px; padding-bottom: 115px; background: radial-gradient(ellipse at 12% 42%, #ece2ed70, transparent 46%), radial-gradient(ellipse at 95% 90%, #f7e9d48c, transparent 42%), var(--paper); }
.about::after { content: ''; position: absolute; top: 65px; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, #b795b100, #b795b144, #b795b100); }
.about-copy { padding-top: 0; }
.identity-heading { margin-bottom: 30px; }
.section-english { color: #93758a; font-size: 10px; letter-spacing: .3em; }
.facts { gap: 21px 22px; }
.facts dd { background: #fffdf8c9; border-color: #ccb8c3; box-shadow: 2px 4px 0 #dfcdd929; padding: 14px 16px; color: #654e5f; }
.bio { background: #fffcf6; border: 1px solid #d7c0cb; border-radius: 3px 18px 18px 18px; box-shadow: 4px 5px 0 #e3d5dc40; line-height: 1.95; }

/* Consistent chapter furniture connects the cabinet and the orbit gallery. */
.section-title { display: grid; grid-template-columns: 42px auto 1fr; align-items: center; column-gap: 18px; row-gap: 10px; padding-bottom: 25px; margin-bottom: 48px; border-bottom: 1px solid #bd9db43d; }
.section-title > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #b898af80; border-radius: 50%; font: italic 13px Georgia, serif; color: #94738a; }
.section-title h2 { color: #76576b; font-size: clamp(37px, 3.6vw, 52px); letter-spacing: .09em; }
.section-title > i { justify-self: end; font-size: 20px; color: #9a7a8e; transform: rotate(-5deg); }
.section-title > .section-english { grid-column: 2 / -1; margin: 0; }
.games { background: radial-gradient(ellipse at 95% 70%, #e8e1ee85, transparent 50%), linear-gradient(#f5eae5, #f1e2e5 65%, #f7ede9); }
.game-preview { padding: 30px; border-color: #baa3b5; border-radius: 5px 24px 6px 24px; box-shadow: 7px 9px 0 #d3bac436, 0 20px 42px #8a67730c; }
.game-preview::before { position: static; width: auto; height: auto; border: 0; box-shadow: none; transform: none; color: #c3a6b9; letter-spacing: 4px; }
.game-preview::after { width: 87px; background: #f2deb280; }
.game-image { border-radius: 10px; background: #f4e8e8; box-shadow: none; overflow: hidden; }
.game-description h3 { margin-top: 24px; margin-bottom: 13px; line-height: 1.3; }
.game-description > p { color: #816878; line-height: 1.9; }
.project-tags { padding-top: 17px; padding-bottom: 7px; border-top: 1px dashed #d9c4cf; }
.project-tags dt { color: #927c8c; }
.detail-link { display: inline-flex; align-items: center; padding: 11px 19px; border: 1px solid #a4849b; border-radius: 30px; background: #a4849b0a; color: #7d5d77; font-size: 12px; letter-spacing: .1em; transition: background .2s, color .2s; }
.detail-link:hover { color: #fffaf1; background: #93738b; }
.gallery { background: radial-gradient(ellipse at 50% 44%, #eadfee85, transparent 56%), linear-gradient(#f7ede9, #fff9ee 36%, #f7e8e5 84%, #f6e6da); }
.gallery .section-title { margin-bottom: 35px; }
.gallery-toolbar { margin-top: 0; }
.orbit-next { border: 1px solid #c5a8bc; border-radius: 30px; padding: 10px 19px; background: #fffaf3a6; color: #94718a; font-size: 12px; transition: background .2s; }
.orbit-next:hover { background: #efdfeb; }
.gallery-stage button img { border-color: #bda7bb; box-shadow: 0 2px 0 #fffdf8 inset, 0 6px 0 #d6bdc42b; }
.gallery-stage figcaption { border-radius: 5px 12px 5px 12px; border-color: #d2bccb; box-shadow: 0 4px 13px #98718612; }
.contact h2 { color: #845d76; letter-spacing: .08em; }
.contact h2::before { content: '✧'; display: inline-block; margin-right: 16px; font: 37px Georgia, serif; color: #ae889b; vertical-align: middle; }
footer { font-size: 11px; letter-spacing: .08em; }
footer > a:last-child { border-bottom: 1px solid #d5b3aa66; padding-bottom: 5px; }

@media (min-width: 1600px) {
  .hero-copy { left: max(7.5%, calc((100% - 1550px) / 2)); top: 29%; }
}
@media (max-width: 1050px) {
  body[data-complete] header { padding-top: 12px; padding-bottom: 8px; gap: 9px; }
  header nav { padding-top: 0; }
  .hero { height: 680px; }
  .hero-copy { top: 25%; width: 39%; max-width: 415px; }
  .hero-character { width: 68%; right: -8%; bottom: -1%; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .18em; }
  .hero .portfolio-label { gap: 10px; }
  .hero .portfolio-label span { font-size: 12px; }
  .hero .portfolio-label small { font-size: 7px; }
  .hero .hero-subtitle { font-size: 16px; }
  .hero-annotation { font-size: 8px; }
  .section-title > i { font-size: 17px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 126px; }
  body[data-complete] header { padding-inline: 6%; }
  header .brand { font-size: 25px; gap: 9px; }
  .brand-symbol { width: 32px; }
  .brand-name small { font-size: 7px; }
  header nav { justify-content: space-between; gap: 15px; font-size: 11px; overflow-x: auto; }
  header nav a { flex-shrink: 0; }
  .hero { height: 760px; }
  .hero-copy { top: 7%; left: 7%; width: 82%; max-width: 400px; }
  .hero .wordmark { width: 94%; margin-top: 18px; }
  .hero .portfolio-label { width: 90%; margin-top: 12px; gap: 13px; }
  .hero .portfolio-label span { font-size: 13px; }
  .hero .portfolio-label small { font-size: 7px; }
  .hero .hero-subtitle { font-size: 15px; margin-top: 16px; }
  .hero .hero-subtitle span + span { margin-left: 22px; }
  .hero-action { margin-top: 12px; font-size: 10px; padding: 9px 15px; gap: 15px; }
  .hero-character { width: 109%; right: -20%; bottom: -7%; }
  .hero-echo { opacity: .17; transform: translate(-26%, -31%) scale(1.1); }
  .hero-annotation { right: 4%; top: 8%; font-size: 7px; opacity: .8; }
  .hero .scroll-link { left: 7%; bottom: 22px; font-size: 9px; }
  .hero-ornament { opacity: .55; }
  .about { padding-top: 70px; padding-bottom: 80px; }
  .about::after { top: 35px; }
  .facts { gap: 19px 14px; }
  .facts dd { padding: 13px 11px; }
  .section-title { grid-template-columns: 30px 1fr; gap: 10px 12px; padding-bottom: 22px; margin-bottom: 35px; }
  .section-title > span { width: 27px; height: 27px; font-size: 11px; }
  .section-title h2 { font-size: 39px; }
  .section-title > i { grid-column: 2; grid-row: 3; justify-self: start; transform: none; font-size: 16px; margin-top: 4px; }
  .section-title > .section-english { grid-column: 2; grid-row: 2; font-size: 8px; }
  .game-preview { padding: 22px; }
  .game-description h3 { font-size: 32px; }
  .contact h2 { font-size: 39px; }
  .contact h2::before { font-size: 28px; margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-action, header nav a, .motion-button, .detail-link, .orbit-next { transition: none; }
}


/* v15: continuous paper tones at each chapter edge; v14 artwork stays intact. */
.hero::after {
  display: block; content: ''; position: absolute; inset: auto 0 0; width: 100%; height: 120px; border-radius: 0;
  background: linear-gradient(transparent, #fff9f0 calc(100% - 32px), #fff9f0);
  z-index: 5; pointer-events: none;
}
.hero .scroll-clouds {
  z-index: 6;
  mask-image: linear-gradient(#000, #000 calc(100% - 120px), transparent calc(100% - 32px), transparent);
}
.about {
  margin-top: -32px; padding-top: 52px; padding-bottom: 100px;
  background: radial-gradient(ellipse at 12% 42%, #ece2ed70, transparent 46%),
    radial-gradient(ellipse at 95% 90%, #f7e9d48c, transparent 42%),
    linear-gradient(#fff9f0 70%, #f5eae5);
  --seam-top: #fff9f0; --seam-bottom: #f5eae5;
}
.about::after { display: none; }
.games { --seam-top: #f5eae5; --seam-bottom: #f7ede9; }
.gallery { --seam-top: #f7ede9; --seam-bottom: #f6e6da; }
.contact { --seam-top: #f6e6da; --seam-bottom: transparent; }
.about::before, .games::before, .gallery::before, .contact::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--seam-top), transparent 140px,
    transparent calc(100% - 140px), var(--seam-bottom));
}
.about > .about-visual, .about > .about-copy,
.games > .section-title, .games > .archive {
  position: relative; z-index: 1;
}
.folder-front { transition: stroke .25s; stroke-linejoin: round; }
.folder-choice.active .folder-front { stroke: #7097ac; stroke-width: 1.8; }
.folder-choice:focus-visible .folder-front { stroke: #7c63ad; stroke-width: 2; }
.folder-choice.active .folder-tab-group > path:first-child { stroke: #fff8e8; stroke-width: 2; }
.folder-choice:focus-visible .folder-tab-group > path:first-child { stroke: #fff8e8; stroke-width: 2; }
@media (max-width: 700px) {
  .hero::after { height: 100px; }
  .hero .scroll-clouds {
    mask-image: linear-gradient(#000, #000 calc(100% - 100px), transparent calc(100% - 24px), transparent);
  }
  .about { margin-top: -24px; padding-top: 42px; padding-bottom: 80px; }
}

/* Folder lettering follows the exact same animation position as its outline. */
.folder-label { transition: none; }

/* v16: authored layers share their original canvas; bubbles sit between them. */
.about .authored-window, .about .authored-portrait {
  position: absolute; left: 8%; top: 4%; width: 76%; max-width: none;
  aspect-ratio: 1603 / 1739; transform: rotate(-3deg); pointer-events: none;
}
.about .authored-window { z-index: 1; filter: drop-shadow(7px 10px 0 #bba7b630); }
.about .authored-window img { position: absolute; top: 0; left: 2.183406%; width: 88.708671%; height: auto; }
.about .authored-portrait { z-index: 4; filter: none; }
.about .authored-portrait img { position: absolute; top: 11.040828%; left: 0; width: 100%; height: auto; }
.about .empty-bubble, .about .hi-bubble { z-index: 2; }
.hero { clip-path: url(#hero-cloud-edge); }
.hero::after { background: linear-gradient(transparent, #f5e0de calc(100% - 32px), #f5e0de); }
.about { margin-top: 0; }
@media (max-width: 700px) {
  .hero::after { background: linear-gradient(transparent, #f5e0de calc(100% - 24px), #f5e0de); }
  .about { margin-top: 0; }
}

/* A more visible, slow sway keeps the portrait and distant echo gently alive. */
.moving .hero-character { animation: hero-sway-v16 7.5s ease-in-out infinite; }
.moving .hero-echo { animation: echo-drift-v16 10.5s ease-in-out infinite; }
@keyframes hero-sway-v16 {
  0%, 100% { transform: rotate(-4deg) translate3d(-12px, -12px, 0); }
  50% { transform: rotate(-1deg) translate3d(12px, 20px, 0); }
}
@keyframes echo-drift-v16 {
  0%, 100% { translate: -5px 6px; }
  50% { translate: 9px -9px; }
}
@media (max-width: 700px) {
  .moving .hero-character { animation-name: hero-sway-mobile-v16; }
  @keyframes hero-sway-mobile-v16 {
    0%, 100% { transform: rotate(-4deg) translate3d(-7px, -10px, 0); }
    50% { transform: rotate(-1.5deg) translate3d(7px, 15px, 0); }
  }
}

/* v17: an arc scroll control follows the curve of the artwork previews. */
.gallery-thumbs { scrollbar-width: none; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-scroll-control { position: relative; z-index: 6; width: min(84%, 760px); margin: 14px auto 0; }
.gallery-scroll-control[hidden] { display: none; }
.gallery-scroll-control svg { display: block; width: 100%; height: auto; overflow: visible; cursor: grab; touch-action: none; }
.gallery-scroll-control svg:active { cursor: grabbing; }
.gallery-scroll-control path { fill: none; stroke-linecap: round; }
.arc-scroll-hit { stroke: transparent; stroke-width: 24px; pointer-events: stroke; }
.arc-scroll-track { stroke: #c8aeba66; stroke-width: 2px; pointer-events: none; }
.arc-scroll-thumb { stroke: #ae819b; stroke-width: 5px; pointer-events: stroke; }
.gallery-scroll-control svg:hover .arc-scroll-thumb,
.gallery-scroll-control svg:focus-visible .arc-scroll-thumb { stroke: #936c8c; }

/* v18: wider cloud lobes and a shallower cut on compact viewports. */
@media (max-width: 900px) {
  .hero { clip-path: url(#hero-cloud-edge-mobile); }
}
.identity-heading .name-note img { height: auto; object-fit: contain; }

/* v21: a personal notebook beside the author's illustration. */
.about { align-items: center; gap: 6%; padding-top: 75px; padding-bottom: 100px; }
.about-copy { min-width: 0; }
.identity-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0 0 28px; padding: 0 8px; }
.identity-heading .name-note { position: relative; inset: auto; width: auto; height: 38px; justify-content: flex-start; gap: 9px; order: 0; }
.identity-heading .name-note > span { font: 15px Seto, serif; color: #8f7e8d; transform: none; }
.identity-heading .name-note img { width: 38px; flex-basis: 38px; }
.identity-heading .name-note .octopus-arrow { width: 38px; flex-basis: 38px; }
.identity-heading h2 { display: flex; align-items: center; flex-wrap: nowrap; width: 100%; gap: 16px; margin: 0; }
.identity-heading .call-me { font: 23px Brush,serif; white-space: nowrap; color: #8d7185; }
.identity-heading .small-mark:has(.wordmark-art) { width: min(58%,260px)!important; max-width: 260px; }
.identity-heading .about-english { margin: 0; align-self: flex-start; padding-left: 2px; font: 9px Georgia,serif; letter-spacing: .32em; color: #a18a97; }
.profile-sheet { position: relative; isolation: isolate; padding: 27px 28px 18px; border: 1px solid #d6c4d0; border-radius: 5px 22px 22px 5px; background: repeating-linear-gradient(0deg,#b9a7b603 0,#b9a7b603 1px,transparent 1px,transparent 4px),#fffcf5; box-shadow: 5px 6px 0 -1px #f2e9e4,5px 6px 0 0 #ddcbd5,0 20px 45px #97798d0d; }
.profile-sheet::before { content: ''; position: absolute; width: 83px; height: 24px; top: -12px; right: 25px; background: repeating-linear-gradient(90deg,#cab5d057 0,#cab5d057 4px,#e2d5e270 4px,#e2d5e270 8px); transform: rotate(6deg); border-inline: 1px dashed #bda8c04d; }
.profile-sheet-heading { display: flex; gap: 12px; align-items: baseline; padding: 0 0 18px; border-bottom: 1px solid #dfd1d7; }
.profile-sheet-heading > span { font: 23px Brush,serif; color: #796279; }
.profile-sheet-heading small { font: 8px Georgia,serif; letter-spacing: .17em; color: #a38e9b; }
.profile-sheet-heading i { margin-left: auto; font: 24px Georgia,serif; color: #b39879; }
.profile-sheet .facts { gap: 0 25px; margin: 0; }
.profile-sheet .facts > div { padding: 19px 0 17px; border-bottom: 1px dashed #ddced6; min-width: 0; }
.profile-sheet .facts > div:nth-last-child(-n+2) { border: 0; }
.profile-sheet .facts dt, .profile-sheet .facts > div:nth-child(n) dt { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 0; min-width: 0; padding: 0; margin: 0 0 9px; transform: none; font: 11px/1.5 'Microsoft YaHei',sans-serif; letter-spacing: .12em; color: #93818f; border-radius: 0; }
.fact-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #b4bea2; box-shadow: 0 0 0 3px #b4bea21c; flex: 0 0 7px; }
.facts > div:nth-child(2n) .fact-dot { background: #a3bcc8; box-shadow: 0 0 0 3px #a3bcc81c; }
.facts > div:nth-child(3n) .fact-dot { background: #bea9c7; box-shadow: 0 0 0 3px #bea9c71c; }
.profile-sheet .facts dd { padding: 0 0 0 15px; margin: 0; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 19px/1.6 Seto,'Microsoft YaHei',sans-serif; color: #635268; overflow-wrap: anywhere; }
.profile-sheet-footer { display: flex; justify-content: flex-end; gap: 12px; align-items: center; padding-top: 15px; border-top: 1px solid #dfd1d7; color: #b09b9f; font: 8px Georgia,serif; letter-spacing: .18em; }
.profile-sheet-footer i { font-style: normal; color: #c2a16e; }
.profile-sheet .facts dd span { display: inline-block; white-space: nowrap; }
.about-copy .bio { max-width: none; border: 0; background: transparent; box-shadow: none; border-radius: 0; margin: 26px 5px 0; padding: 0 0 0 19px; border-left: 2px solid #d1b4c7; font: 15px/2 Seto,'Microsoft YaHei',sans-serif; color: #806779; }
.about-copy .bio::before { content: none; }
.bio-label { display: block; font: 8px/1.5 Georgia,serif; letter-spacing: .22em; color: #b29aa8; margin-bottom: 7px; }
.about .empty-bubble.green { --bubble-angle: -9deg; --bubble-x: 5px; --bubble-y: -12px; --bubble-period: 5.8s; --bubble-delay: -1.1s; }
.about .empty-bubble.blue { --bubble-angle: 12deg; --bubble-x: -6px; --bubble-y: -15px; --bubble-period: 7.2s; --bubble-delay: -3.5s; }
.about .empty-bubble.purple { --bubble-angle: 7deg; --bubble-x: 7px; --bubble-y: -10px; --bubble-period: 6.4s; --bubble-delay: -2.6s; }
.about .empty-bubble { animation: bubble-breathe-v21 var(--bubble-period) var(--bubble-delay) ease-in-out infinite; animation-play-state: paused; }
.moving .about-visible .empty-bubble { animation-play-state: running; }
@keyframes bubble-breathe-v21 { 0%,100% { transform: translate(0,0) rotate(var(--bubble-angle)); } 50% { transform: translate(var(--bubble-x),var(--bubble-y)) rotate(calc(var(--bubble-angle) + 3deg)); } }

/* The existing opening door now belongs to a pearl-and-lilac cloud postbox. */
.contact { height: 790px; background: radial-gradient(ellipse at 66% 53%,#fff6da88,transparent 45%),linear-gradient(#f6e6da,#f2dce1 40%,#e5d5e5 82%,#d3c7d9); }
.contact h2 { top: 72px; color: #80667f; }
.contact-cloud-a { width: 420px; opacity: .6; left: -110px; top: 230px; }
.contact-cloud-b { width: 410px; opacity: .78; right: -50px; top: 85px; }
.mail-scene { inset: 185px 10% 0; gap: 45px; }
.mailbox { width: 480px; height: 455px; margin-bottom: 65px; filter: drop-shadow(0 20px 18px #75577426); }
.mailbox-hint { color: #94728f; font-size: 24px; }
.mail-message { width: 385px; flex: 0 1 385px; padding: 31px 28px 25px; border: 1px solid #c4aebf; border-radius: 4px 18px 18px 18px; background: repeating-linear-gradient(0deg,transparent 0,transparent 29px,#c6b5c316 29px,#c6b5c316 30px),#fffaf1; box-shadow: 5px 6px 0 #e2ceda80,0 18px 40px #78556f12; }
.mail-message::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 4px 0 0 18px; background: repeating-linear-gradient(145deg,#b7cbd1 0,#b7cbd1 10px,#fffaf1 10px,#fffaf1 18px,#d4a8bd 18px,#d4a8bd 28px,#fffaf1 28px,#fffaf1 36px); }
.mail-message-tail { display: none; }
.mail-message > .letter-kicker:first-of-type { display: block; transform: none; font: 8px/1.5 Georgia,serif; color: #ab91a0; letter-spacing: .22em; margin-bottom: 19px; }
.letter-title { display: block; font: 25px/1.4 Brush,serif; color: #80667f; }
.letter-stamp { position: absolute; top: 16px; right: 18px; display: grid; place-items: center; width: 36px; height: 44px; outline: 1px dashed #b19abb; outline-offset: 3px; border: 2px solid #fffaf1; background: #e7dcea; font: 23px Georgia,serif; color: #a187ab; transform: rotate(8deg); }
.letter-stamp small { font: 6px Georgia,serif; letter-spacing: .12em; }
.mail-message p { font: 16px/1.7 Seto,sans-serif; margin: 14px 0; color: #8e7185; }
.mail-message > div { padding-top: 12px; gap: 12px; }
.mail-message > div a, .mail-message .copy-email { font: 11px 'Microsoft YaHei',sans-serif; padding: 9px 15px; border: 1px solid #c9b6c6; border-radius: 20px; color: #84627f; background: #fffcf580; }
.mail-message > div a { background: #e8dce9; border-color: #e8dce9; }
.mail-message > div a:hover, .mail-message .copy-email:hover { background: #dcd0e0; }
.copy-status { display: block; margin-top: 9px; color: #8f738a; min-height: 14px; }
.contact-postmark { color: #9b819c; border-color: #bba3bb; bottom: 190px; left: 11%; }
.contact .ground { background: #887785; }
.contact .grasses { opacity: .45; }
.contact + footer, footer { background: #887785; border-top-color: #c7afb83d; }
@media (max-width: 1100px) and (min-width: 851px) {
  .about { gap: 4%; }
  .profile-sheet { padding: 23px 20px 17px; }
  .profile-sheet .facts { gap: 0 16px; }
  .profile-sheet .facts dd { font-size: 17px; }
  .identity-heading .call-me { font-size: 20px; }
}
@media (max-width: 850px) {
  .about { padding-top: 65px; }
  .about-copy { max-width: 570px; padding-top: 45px; }
  .mail-scene { inset-inline: 5%; gap: 18px; }
  .mailbox { width: 400px; height: 400px; }
}
@media (max-width: 700px) {
  .about { padding-top: 45px; padding-bottom: 70px; }
  .about-copy { padding-top: 40px; }
  .identity-heading { padding: 0 3px; gap: 10px; margin-bottom: 26px; }
  .identity-heading .name-note > span { font-size: 13px; }
  .identity-heading .call-me { font-size: 22px; }
  .identity-heading .small-mark:has(.wordmark-art) { width: 58%!important; }
  .profile-sheet { padding: 23px 20px 17px; }
  .profile-sheet-heading { gap: 9px; }
  .profile-sheet-heading > span { font-size: 22px; }
  .profile-sheet-heading small { font-size: 7px; letter-spacing: .10em; }
  .profile-sheet .facts { gap: 0 14px; }
  .profile-sheet .facts > div { padding: 17px 0; }
  .profile-sheet .facts dt { letter-spacing: .04em; font-size: 10px; }
  .profile-sheet .facts dd { padding-left: 0; font-size: 16px; }
  .about-copy .bio { margin-top: 27px; font-size: 15px; padding-left: 15px; }
  .contact { height: 880px; }
  .contact h2 { top: 65px; }
  .mail-scene { inset: 220px 5% 0; gap: 5px; }
  .mailbox { width: min(380px,100%); height: 360px; margin-bottom: 75px; }
  .mail-message { flex: 0 0 auto; width: min(315px,95%); padding: 25px 23px 17px; }
  .letter-title { font-size: 23px; }
  .mail-message > .letter-kicker:first-of-type { margin-bottom: 13px; }
  .mail-message p { font-size: 15px; margin: 10px 0; }
  .contact-cloud-a { top: 230px; left: -160px; width: 320px; }
  .contact-cloud-b { right: -100px; width: 290px; }
  .contact-postmark { bottom: 190px; left: 5%; }
}
@media (prefers-reduced-motion: reduce) {
  .about .empty-bubble { animation: none; }
  .mail-message { transition: none; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* v22: the note and wordmark share a column at every viewport width. */
.identity-heading { display: grid; grid-template-columns: max-content minmax(0,260px); column-gap: 16px; row-gap: 10px; align-items: center; }
.identity-heading h2 { display: contents; }
.identity-heading .call-me { grid-column: 1; grid-row: 2; }
.identity-heading .small-mark:has(.wordmark-art) { grid-column: 2; grid-row: 2; width: 100%!important; }
.identity-heading .name-note { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; justify-content: center; gap: 7px; }
.identity-heading .about-english { grid-column: 2; grid-row: 3; justify-self: center; padding: 0; }
.gallery-thumbs.has-overflow {
  --edge-fade: clamp(28px,7vw,64px);
  -webkit-mask-image: linear-gradient(to right,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent);
  mask-image: linear-gradient(to right,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent);
}
@media (max-width: 700px) {
  .identity-heading { column-gap: 10px; }
  .identity-heading .name-note { gap: 4px; }
  .identity-heading .name-note > span { font-size: 13px; }
  .identity-heading .name-note img { width: 28px; flex-basis: 28px; }
  .identity-heading .name-note .octopus-arrow { width: 24px; flex-basis: 24px; }
}
@media (max-width: 380px) {
  .identity-heading .name-note > span { font-size: 11px; }
}

/* v23: clear cabinet selection; gallery decoration preserves all artwork slots. */
.folder-cabinet{height:auto}
.game-genres{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.game-genres .game-genre{margin:0;background:#eee5ef;border-color:#cdbbd0;color:#82637e}.game-genres .game-genre:nth-child(2n){background:#e6eeeb;border-color:#bdcfcc;color:#62817e}

.folder-choice.active .folder-front{stroke:#775a71;stroke-width:2.4}.folder-choice.active .folder-label{color:#62455e;text-shadow:0 1px #ffffff66;text-decoration:underline;text-decoration-color:#775a718c;text-decoration-thickness:2px;text-underline-offset:6px}.folder-choice.active .folder-tab-group>path:first-child{stroke:#fffaf0;opacity:1;stroke-width:3}
.archive-tabs>.folder-choice{translate:0 0;transition:translate .3s ease}
.archive-tabs>.folder-choice.active{translate:0 -8px}
@media(prefers-reduced-motion:reduce){.archive-tabs>.folder-choice{transition:none}}
.gallery{background:radial-gradient(ellipse at 18% 30%,#f4e7b754,transparent 36%),radial-gradient(ellipse at 82% 50%,#d8cfea66,transparent 45%),linear-gradient(#f7ede9,#fff9ee 36%,#f7e8e5 84%,#f6e6da)}
.gallery-stage:before{content:'';position:absolute;inset:-8% -4% -14%;z-index:-1;pointer-events:none;background-image:radial-gradient(#b496a54d .8px,transparent .9px);background-size:23px 23px;mask-image:radial-gradient(ellipse,#0008,transparent 68%)}
.gallery-decoration{position:absolute;inset:190px 2% 280px;pointer-events:none;color:#be9b6c;z-index:1}.gallery-decoration>span{position:absolute;font:48px Georgia;text-shadow:0 3px 14px #e5c99655}.gallery-decoration>span:nth-child(1){left:4%;top:22%;transform:rotate(13deg)}.gallery-decoration>span:nth-child(2){right:5%;top:10%;font-size:76px;color:#b7a4c4}.gallery-decoration>span:nth-child(3){right:8%;bottom:10%;font-size:28px}.gallery-decoration>span:nth-child(4){left:13%;bottom:3%;font-size:37px;color:#b899ab}.gallery-decoration i{position:absolute;left:1%;top:42%;writing-mode:vertical-rl;font:9px Georgia;letter-spacing:.3em;color:#b097a8}
.gallery-toolbar{position:relative;z-index:3;gap:18px}.gallery-toolbar .orbit-next{margin-left:auto}
.gallery-orbit{stroke:#b79cac;opacity:.34}.gallery-orbit ellipse{stroke-dasharray:2 9}.gallery-clouds{opacity:.65}
.gallery-stage button img{border:1px solid #c6afc0;background:linear-gradient(145deg,#fffdf7,#fbf2e7);box-shadow:0 0 0 3px #fffaf39c,0 7px 0 #d4bdcd32,0 20px 38px #8d698617;border-radius:8px;padding:7px}
.gallery-stage .focus-art img{border-color:#b29aad;box-shadow:0 0 0 4px #fffcf3a6,0 9px 0 #d4bdcd38,0 24px 48px #8d698621;padding:9px}
.gallery-stage figcaption{background:#fffaf2f5;border:1px solid #d4bbc9;border-radius:3px 13px 3px 13px;box-shadow:3px 4px #dbc9d42b;padding:9px 15px;color:#826278}.gallery-stage .focus-art figcaption:before{content:'✧';color:#bc9967;margin-right:3px;font:18px Georgia}.gallery-stage figcaption span{color:#ac8e9f}
.gallery-thumbs button{background:#fffcf5;border-color:#cbb7c6;box-shadow:3px 4px #decdd8,0 10px 20px #8d687817}.gallery-thumbs button.active{background:#fff3da;border-color:#789faf;box-shadow:3px 5px #b9d0d8,0 10px 24px #8d68781f}.gallery-scroll-control{opacity:.8}
@media(max-width:700px){.gallery-decoration{inset:210px 1% 250px}.gallery-decoration>span:nth-child(1){font-size:30px;left:3%}.gallery-decoration>span:nth-child(2){font-size:46px;right:3%}.gallery-decoration i{font-size:7px;left:1%;letter-spacing:.2em}.gallery-stage button img{padding:5px}.gallery-stage .focus-art img{padding:6px}.gallery-stage figcaption{padding:6px 11px}}