@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=DM+Mono:wght@400;500&family=ZCOOL+XiaoWei&display=swap');
@font-face { font-family:'PortfolioKaiTi'; src:url('assets/fonts/kaiti.ttf') format('truetype'); font-display:swap; }

:root { --ink:#25272b; --paper:#fffdf8; --red:#e34a47; --blue:#3098d2; --yellow:#f7ce43; --line:#24272a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); background:#454650; font-family:'MileyHand','ZCOOL XiaoWei','KaiTi',serif; }
.aurora-bg { position:fixed; inset:-25%; z-index:0; width:150%; height:150%; pointer-events:none; opacity:.86; background:radial-gradient(ellipse at 15% 35%,#3098d2 0 7%,transparent 29%),radial-gradient(ellipse at 68% 32%,#e34a47 0 8%,transparent 32%),radial-gradient(ellipse at 43% 76%,#f7ce43 0 5%,transparent 27%),linear-gradient(130deg,#172d46,#663744 47%,#543c2a); background-size:120% 120%,130% 130%,110% 110%,100% 100%; animation:aurora-flow 9s ease-in-out infinite alternate; filter:blur(28px) saturate(.9); }
.click-sparks { position:fixed; inset:0; z-index:20; width:100%; height:100%; pointer-events:none; }
@keyframes aurora-flow { 0% { transform:translate3d(-4%,-2%,0) rotate(-4deg) scale(1.03); background-position:0% 0%,100% 10%,35% 100%,0 0; } 50% { transform:translate3d(3%,2%,0) rotate(3deg) scale(1.08); background-position:55% 35%,35% 72%,78% 18%,0 0; } 100% { transform:translate3d(-1%,4%,0) rotate(-2deg) scale(1.04); background-position:100% 95%,0% 80%,10% 5%,0 0; } }
@media (prefers-reduced-motion:reduce) { .aurora-bg { animation:none; } }
main { position:relative; z-index:1; }
button, a { font:inherit; color:inherit; }
button { cursor:pointer; }
.paper-grain { position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.site-header { height:82px; position:relative; z-index:3; display:flex; align-items:center; gap:34px; padding:13px 5vw; background:#fffcf5; border-bottom:2px solid #222; box-shadow:0 3px 0 rgba(0,0,0,.18); }
.logo { font-family:'DM Mono',monospace; font-size:25px; font-weight:500; text-decoration:none; color:#2576c4; transform:rotate(-3deg); }
nav { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
nav a { text-decoration:none; font-size:17px; transition:color .2s, transform .2s; }
nav a:hover, nav a.active { color:var(--red); transform:rotate(-3deg); }
.music-player { position:relative; margin-left:auto; border:0; background:transparent; display:flex; align-items:center; gap:8px; font-family:'DM Mono'; font-size:8px; text-align:left; }
.record { width:48px; height:48px; border:3px solid #ddd; border-radius:50%; display:grid; place-items:center; background:repeating-radial-gradient(#26292a 0 2px,#161819 3px 5px); box-shadow:2px 2px 0 #aaa; }
.record i { width:12px; height:12px; display:block; border-radius:50%; background:var(--red); border:3px solid #f5ce6e; }
.music-player.playing .record { animation:spin 2s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.music-notes { position:absolute; right:45px; top:-8px; width:66px; height:54px; pointer-events:none; opacity:0; }.music-notes i { position:absolute; font:20px Caveat,cursive; color:#e34a47; font-style:normal; }.music-notes i:nth-child(1){left:3px;bottom:0}.music-notes i:nth-child(2){left:27px;bottom:8px;color:#3098d2}.music-notes i:nth-child(3){left:50px;bottom:0;color:#f7ce43}.music-player.playing .music-notes { opacity:1; }.music-player.playing .music-notes i { animation:float-note 2.6s ease-in-out infinite; }.music-player.playing .music-notes i:nth-child(2){animation-delay:.65s}.music-player.playing .music-notes i:nth-child(3){animation-delay:1.25s}@keyframes float-note{0%{transform:translateY(8px) rotate(-8deg);opacity:0}25%{opacity:1}100%{transform:translateY(-38px) rotate(12deg);opacity:0}}
.view { display:none; min-height:calc(100vh - 82px); }.view.active { display:block; }
.home-view { position:relative; overflow:hidden; background:#fffaf1e8; min-height:calc(100vh - 82px); display:none; align-items:center; justify-content:center; }.home-view.active { display:flex; }
.home-copy { width:min(620px,70vw); text-align:center; position:relative; z-index:1; padding:60px 0; }.eyebrow { font:11px 'DM Mono'; letter-spacing:1px; }.home-copy h1 { font:700 clamp(56px,8vw,106px)/.72 Caveat,cursive; margin:16px 0 31px; transform:rotate(-3deg); }.intro { max-width:none; margin:auto; font-size:clamp(13px,1.22vw,16px); line-height:1.7; text-align:center; white-space:nowrap; }.home-links { display:flex; justify-content:center; gap:12px; margin-top:23px; }.home-links button { border:0; background:#eee6d7; padding:8px 13px; box-shadow:2px 3px 0 #282828; transform:rotate(-2deg); }.home-links button:nth-child(2) { transform:rotate(2deg); background:#cae9f1; }
.home-copy { z-index:3; }.contact-card { display:inline-flex; flex-direction:column; gap:5px; margin-top:22px; padding:10px 19px; color:#132e4b; background:#9ed8ed; border:2px solid #1c2932; box-shadow:4px 4px 0 #293034; transform:rotate(-2deg); }.contact-card small { font:10px 'DM Mono',monospace; letter-spacing:1px; }.contact-card a { color:inherit; text-decoration:none; font:15px 'DM Mono',monospace; }.contact-card a:hover { text-decoration:underline; }.home-photo { position:absolute; z-index:2; width:clamp(78px,10vw,142px); aspect-ratio:.78; padding:6px 6px 23px; background:#fffdf8; object-fit:cover; box-shadow:4px 6px 11px #6c6358aa; }.home-photo-1 { top:13%; left:calc(50% - 315px); transform:rotate(-10deg); }.home-photo-2 { top:10%; right:calc(50% - 325px); transform:rotate(8deg); }.home-photo-3 { bottom:9%; left:calc(50% - 350px); transform:rotate(8deg); }.home-photo-4 { bottom:7%; right:calc(50% - 360px); transform:rotate(-7deg); }
.collage { position:absolute; width:30vw; height:100%; min-width:235px; }.collage-left { left:0; }.collage-right { right:0; }.lamp { position:absolute; left:6%; top:-1px; width:86px; height:160px; border-left:4px solid #793926; }.lamp span { position:absolute; top:0; left:-29px; width:64px; height:43px; background:#863a26; border-radius:50% 50% 12px 12px; box-shadow:inset 7px -7px #652815; }.tape { position:absolute; width:80px; height:24px; background:#e3c79caa; transform:rotate(-17deg); }.tape-a { left:35%; top:12%; }.cutout { position:absolute; border:0; font-family:'DM Mono'; font-size:10px; box-shadow:3px 4px 7px #888; transition:transform .2s; }.cutout:hover { transform:rotate(0) scale(1.08); }.polaroid { left:23%; top:20%; width:145px; height:155px; padding-top:112px; background:linear-gradient(135deg,#ccd3d4,#fdfdf7 54%); transform:rotate(-11deg); }.note { left:7%; bottom:22%; width:95px; height:74px; background:#f8d85a; transform:rotate(8deg); }.film { left:48%; bottom:9%; width:120px; height:62px; background:#28201c; color:white; transform:rotate(-11deg); letter-spacing:3px; }.blue-card { position:absolute; right:21%; top:20%; padding:20px 12px; background:#2a9dd8; color:white; font:11px 'DM Mono'; transform:rotate(-8deg); box-shadow:3px 4px 5px #aaa; }.swatch { right:6%; top:42%; width:130px; height:90px; background:linear-gradient(25deg,#e54b2e 45%,#f9ae28 46%); color:white; transform:rotate(12deg); }.doodle { position:absolute; right:0; bottom:15%; font:36px Caveat; color:#499acd; transform:rotate(-12deg); }.stamp { position:absolute; right:29%; bottom:8%; width:82px; height:82px; display:grid; place-items:center; text-align:center; border:2px dashed #2d2d2d; border-radius:50%; font:10px 'DM Mono'; transform:rotate(11deg); }
.polaroid,.note,.film,.blue-card,.swatch { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }.polaroid { padding:12px; }.polaroid b { font-size:48px; }.polaroid span { font:700 17px/1.05 Caveat,cursive; }.note { width:118px; height:99px; }.note b { font-size:30px; }.note span { font:700 17px/1 Caveat,cursive; }.film { height:77px; }.film b { font-size:26px; }.film span { font-size:16px; letter-spacing:5px; }.blue-card { border:0; right:17%; top:18%; width:120px; min-height:104px; font:700 23px/1 Caveat,cursive; }.blue-card b { font-size:32px; }.swatch { font:700 19px/1 Caveat,cursive; }.swatch b { font-size:32px; }.stamp { gap:0; font:10px 'DM Mono',monospace; }.stamp b { font-size:26px; line-height:1; }.stamp span { line-height:1.1; }
.book-view { padding:clamp(30px,8vh,85px) 4vw; background:radial-gradient(#ccc 1px,transparent 1.5px) 0 0/8px 8px,#a9a7a0e8; }.book-shell { max-width:1120px; margin:auto; display:flex; align-items:center; gap:18px; }.book { flex:1; min-height:min(67vh,620px); display:grid; grid-template-columns:1fr 44px 1fr; background:#202221; padding:11px 8px; border:2px solid #1d1e1f; box-shadow:0 6px 18px #3f3e39; }.book-page { background:var(--paper); min-width:0; padding:34px clamp(22px,4vw,57px); position:relative; overflow:hidden; }.book-page:after { content:''; position:absolute; inset:0; opacity:.15; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 27px,#b6b0a5 28px 29px); }.page-number { position:relative; z-index:1; margin:0 0 20px; font:11px 'DM Mono'; letter-spacing:1px; }.rings { position:relative; background:linear-gradient(90deg,#111 0 20%,#7c7c75 24%,#ddd 38%,#333 50%,#e9e9e2 63%,#111 82%); }.rings:before { content:''; position:absolute; top:7%; bottom:7%; left:50%; width:30px; transform:translateX(-50%); background:repeating-radial-gradient(ellipse at center,transparent 0 11px,#161616 12px 15px,transparent 16px 37px); }.page-turn { width:60px; height:76px; flex:none; border:0; color:white; background:#222; font:54px/1 Arial; border-radius:3px; transition:transform .2s; }.page-turn:hover { transform:scale(1.1); }.page-turn:disabled { opacity:.25; cursor:default; transform:none; }.page-content { position:relative; z-index:1; }.page-content h2 { font:700 42px/1 Caveat; margin:4px 0 20px; color:var(--red); transform:rotate(-2deg); }.page-content p { font-size:18px; line-height:1.7; }.placeholder-card { background:#e8e0cf; border:1px solid #4a4742; padding:20px 13px; margin:12px 0; box-shadow:3px 4px 0 #a8a093; transform:rotate(-1deg); }.placeholder-card:nth-child(even){ transform:rotate(1.5deg); background:#d6e9ef; }.placeholder-card strong { font:25px Caveat; display:block; }.badge { display:inline-block; padding:3px 8px; background:var(--yellow); font:10px 'DM Mono'; transform:rotate(-3deg); }.stills { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }.still { aspect-ratio:1.15; background:linear-gradient(135deg,#e6494a,#f4c74b 52%,#3b8ac3 53%); border:7px solid white; box-shadow:2px 3px 5px #777; }.still:nth-child(2n) { background:linear-gradient(45deg,#29495e,#e59e59); transform:rotate(4deg); }.still:nth-child(3n) { background:linear-gradient(145deg,#e5d6b6,#ca7471); transform:rotate(-4deg); }.video-placeholder { position:relative; z-index:1; height:75%; min-height:320px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:linear-gradient(145deg,#3e8db5,#f1cf72 42%,#d85450); border:9px solid #302f2d; color:white; box-shadow:5px 6px #c74343; }.big-play { width:75px; height:75px; border-radius:50%; border:3px solid white; background:#e74d49; color:white; font-size:27px; padding-left:6px; }.radio-art { position:relative; z-index:1; background:#e04a45; color:#fff8de; width:90%; aspect-ratio:1; margin:35px auto; border-radius:48% 45% 15% 20%; display:flex; align-items:center; justify-content:center; flex-direction:column; font:54px/.8 Caveat; transform:rotate(-6deg); box-shadow:7px 8px #7b2828; }.radio-art span { font-size:29px; }.episode { position:relative; z-index:1; padding:12px 5px; border-bottom:2px dashed #4f4a43; display:flex; gap:9px; align-items:center; font-size:17px; }.episode button { flex:none; border:1px solid #222; background:#efcf49; width:24px; height:24px; border-radius:50%; font-size:10px; }.video-modal { display:none; position:fixed; inset:0; z-index:30; background:#0009; place-items:center; }.video-modal.open { display:grid; }.modal-card { width:min(720px,90vw); padding:14px; background:#f8f1e1; border:3px solid #272727; position:relative; }.modal-screen { height:min(55vw,400px); display:grid; place-items:center; align-content:center; text-align:center; background:#262d35; color:white; font:30px Caveat; }.close-modal { position:absolute; right:-16px; top:-16px; width:35px; height:35px; border-radius:50%; font:25px Arial; border:2px solid #222; background:#e4504c; color:white; }
.experience-photo { display:block; width:100%; height:205px; margin:0 0 12px; border:5px solid #fffdf8; object-fit:cover; box-shadow:2px 3px 5px #777; }.placeholder-card:has(.experience-photo) { padding:13px; }.placeholder-card:has(.experience-photo) strong { font-size:24px; }.placeholder-card:has(.experience-photo) p { margin:9px 0 0; font-size:15px; line-height:1.55; }.empty-page { min-height:370px; }
.read-script { display:inline-block; position:relative; z-index:1; margin-top:13px; padding:7px 12px; color:#272727; text-decoration:none; background:#f7ce43; border:1px solid #272727; box-shadow:2px 2px #272727; font:12px 'DM Mono',monospace; transform:rotate(-2deg); transition:transform .2s,background .2s; }.read-script:hover { background:#3098d2; transform:rotate(1deg) translate(-1px,-1px); }
.book-view .page-content h2 { font-family:'MileyHand','KaiTi',cursive; font-weight:400; }
.placeholder-card strong, .film-details h2, .read-script, .article-card a, #audio .episode em, .video-launch small { font-family:'MileyHand','KaiTi',cursive; }
.article-card { position:relative; z-index:1; margin:11px 0 15px; padding:7px; background:#f2ecdf; border:1px solid #3a3833; box-shadow:3px 3px #858079; transform:rotate(-1deg); }.article-card:nth-of-type(odd) { transform:rotate(1deg); }.article-card img { display:block; width:100%; aspect-ratio:2.15; object-fit:cover; border:2px solid #282828; }.article-card a { display:inline-block; margin:8px 2px 1px; color:#262626; text-decoration:none; font:12px 'DM Mono',monospace; }.article-card a span { color:#d84440; }.article-card a:hover { color:#2589bf; }
#audio .episodes { position:relative; z-index:1; min-height:430px; display:flex; flex-direction:column; justify-content:space-evenly; gap:12px; } #audio .episode { padding:14px 5px; margin:0; border-bottom:2px dashed #4f4a43; align-items:center; } #audio .episode button { width:38px; height:38px; font-size:14px; box-shadow:2px 2px #282828; } #audio .episode button.playing { background:#e34a47; color:#fff; } #audio .episode div { display:flex; flex-direction:column; gap:4px; } #audio .episode em { font:10px 'DM Mono',monospace; font-style:normal; color:#d84440; letter-spacing:.6px; } #audio .episode span { font-size:20px; line-height:1.2; }
.stills .still { overflow:hidden; background:#242424; }.stills .still img { display:block; width:100%; height:100%; object-fit:cover; }.portfolio-video { width:100%; height:100%; object-fit:cover; background:#101010; }.film-details { position:relative; z-index:1; margin-top:19px; padding:12px 13px; background:#f3dfad; border:1px solid #3a332a; box-shadow:3px 3px #a48e60; transform:rotate(-1deg); }.film-details h2 { margin:0 0 7px; font:700 25px/1.1 Caveat; color:#d64440; }.film-details p { margin:5px 0; font-size:14px; line-height:1.48; }
#video .video-placeholder { height:285px; min-height:0; } #video .book-page { overflow-y:auto; }
.video-launch { position:relative; width:100%; height:100%; overflow:hidden; border:0; padding:0; color:white; background:#151515; }.video-launch img { width:100%; height:100%; object-fit:cover; opacity:.72; transition:transform .35s,opacity .35s; }.video-launch span { position:absolute; inset:50% auto auto 50%; display:grid; place-items:center; width:70px; height:70px; border:3px solid #fff; border-radius:50%; background:#e34a47; font-size:26px; transform:translate(-50%,-50%); }.video-launch small { position:absolute; bottom:13px; left:0; right:0; font:12px 'DM Mono',monospace; text-shadow:0 1px 3px #000; }.video-launch:hover img { transform:scale(1.06); opacity:.9; }.modal-video { display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; background:#050505; }
.film-details h2 { font-family:'MileyHand','KaiTi',cursive; font-weight:400; }.music-hint { position:absolute; top:51px; right:-20px; width:105px; color:#e34a47; font:14px 'MileyHand','KaiTi',cursive; text-align:center; opacity:0; pointer-events:none; transform:rotate(-4deg); }.home-mode .music-hint { opacity:1; animation:music-hint-bob 1.5s ease-in-out infinite; }.music-player.playing .music-hint { opacity:0; animation:none; }.home-view .polaroid { animation:gentle-sway-a 4.8s ease-in-out infinite; }.home-view .note { animation:gentle-sway-b 5.6s ease-in-out infinite .5s; }.home-view .film { animation:gentle-sway-c 5s ease-in-out infinite 1s; }.home-view .blue-card { animation:gentle-sway-d 5.4s ease-in-out infinite .3s; }.home-view .swatch { animation:gentle-sway-e 4.6s ease-in-out infinite .7s; }.home-view .stamp { animation:gentle-sway-f 5.2s ease-in-out infinite 1.1s; }@keyframes music-hint-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(-1deg)}}@keyframes gentle-sway-a{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(-8deg)}}@keyframes gentle-sway-b{0%,100%{transform:rotate(8deg)}50%{transform:rotate(5deg)}}@keyframes gentle-sway-c{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(-7deg)}}@keyframes gentle-sway-d{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-4deg)}}@keyframes gentle-sway-e{0%,100%{transform:rotate(12deg)}50%{transform:rotate(8deg)}}@keyframes gentle-sway-f{0%,100%{transform:rotate(11deg)}50%{transform:rotate(7deg)}}
.music-label { color:#d84440; font-size:11px; font-weight:700; letter-spacing:.6px; line-height:1.15; }.article-card a { font-family:'MileyHand','KaiTi',cursive !important; font-size:17px; line-height:1.15; }@keyframes gentle-sway-a{0%,100%{transform:rotate(-14deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-5px)}}@keyframes gentle-sway-b{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(2deg) translateY(-5px)}}@keyframes gentle-sway-c{0%,100%{transform:rotate(-14deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-6px)}}@keyframes gentle-sway-d{0%,100%{transform:rotate(-11deg) translateY(0)}50%{transform:rotate(1deg) translateY(-5px)}}@keyframes gentle-sway-e{0%,100%{transform:rotate(15deg) translateY(0)}50%{transform:rotate(5deg) translateY(-5px)}}@keyframes gentle-sway-f{0%,100%{transform:rotate(14deg) translateY(0)}50%{transform:rotate(3deg) translateY(-4px)}}
@media (max-width:760px) { .site-header { height:auto; min-height:74px; gap:10px; padding:8px 4vw; }.logo { font-size:20px; } nav { gap:8px 12px; } nav a { font-size:13px; }.music-label{display:none}.record{width:37px;height:37px}.view{min-height:calc(100vh - 108px)}.home-view{min-height:calc(100vh - 108px)}.home-copy{width:88vw;padding:70px 0}.home-copy h1{font-size:65px}.intro{font-size:14px;background:#fffafaDD;padding:8px}.collage{opacity:.55;min-width:160px;width:35vw}.collage-right{display:none}.book-view{padding:32px 2vw}.book-shell{gap:4px}.book{min-height:570px;grid-template-columns:1fr 22px 1fr;padding:5px}.book-page{padding:18px 12px}.page-content h2{font-size:29px}.page-content p,.episode{font-size:13px}.page-turn{width:34px;height:55px;font-size:40px}.rings:before{width:18px}.single-book .book-page{padding:14px}.radio-art{font-size:38px}.video-placeholder{min-height:290px}.stills{gap:6px}.still{border-width:4px} }

/* Phone layout: keeps the scrapbook character without forcing desktop-width content. */
@media (max-width: 760px) {
  .site-header { position:sticky; top:0; display:grid; grid-template-columns:1fr auto; gap:8px; min-height:0; padding:9px 4vw; }
  nav { grid-column:1 / -1; grid-row:2; justify-content:center; gap:6px 14px; }
  nav a { font-size:15px; }
  .music-player { grid-column:2; grid-row:1; margin-left:0; }
  .music-label { display:block; font-size:9px; }
  .record { width:40px; height:40px; }

  .home-view { min-height:calc(100svh - 108px); padding:18px 18px 28px; }
  .home-copy { width:100%; padding:112px 0 92px; }
  .home-copy h1 { font-size:clamp(60px,19vw,78px); margin:13px 0 24px; }
  .eyebrow { font-size:10px; }
  .intro { max-width:34ch; padding:9px 10px; font-size:15px; line-height:1.65; white-space:normal; background:#fffafaD9; }
  .contact-card { margin-top:17px; padding:8px 13px; }
  .contact-card a { font-size:13px; }
  .collage { display:none; }
  .home-photo { width:74px; padding:4px 4px 16px; }
  .home-photo-1 { top:26px; left:5%; transform:rotate(-9deg); }
  .home-photo-2 { top:44px; right:5%; transform:rotate(8deg); }
  .home-photo-3 { bottom:25px; left:6%; transform:rotate(8deg); }
  .home-photo-4 { bottom:20px; right:5%; transform:rotate(-7deg); }

  .book-view { padding:22px 12px 34px; }
  .book-shell { display:grid; grid-template-columns:42px minmax(0,1fr) 42px; gap:0; width:100%; }
  .book-shell > .book { grid-column:1 / -1; grid-row:1; width:100%; min-height:0; grid-template-columns:1fr; padding:7px; }
  .book-shell > .prev { grid-column:1; grid-row:1; justify-self:start; }
  .book-shell > .next { grid-column:3; grid-row:1; justify-self:end; }
  .book-shell > .page-turn { z-index:4; width:38px; height:52px; font-size:40px; box-shadow:0 2px 5px #0007; }
  .book-page { min-height:0; padding:25px 22px; overflow:visible; }
  .book-page + .rings { height:18px; min-height:18px; background:repeating-linear-gradient(90deg,#252525 0 10px,#dad7cf 11px 18px); }
  .rings:before { display:none; }
  .page-content h2 { font-size:34px; }
  .page-content p { font-size:16px; line-height:1.62; }
  .placeholder-card:has(.experience-photo) p { font-size:15px; }
  .experience-photo { height:min(56vw,260px); }
  .article-card a { font-size:16px; }
  .stills { grid-template-columns:repeat(3,1fr); gap:8px; }
  .still { border-width:4px; }
  #video .video-placeholder { height:auto; min-height:210px; }
  .film-details { margin-top:13px; }
  .film-details h2 { font-size:27px; }
  #audio .episodes { min-height:0; }
  .radio-art { width:min(260px,80%); margin:18px auto; font-size:46px; }
  .modal-card { width:94vw; padding:8px; }
  .close-modal { right:-8px; top:-13px; }
  .view.active { animation:mobile-view-enter .24s ease-out both; }
}

@keyframes mobile-view-enter { from { opacity:.45; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }

@media (max-width: 380px) {
  nav { gap:5px 10px; }
  nav a { font-size:14px; }
  .home-copy { padding-top:102px; }
  .intro { font-size:14px; }
  .book-page { padding:22px 16px; }
  .page-content h2 { font-size:30px; }
  .book-shell > .page-turn { width:34px; }
}

/* Chinese typography: KaiTi for all copy, with a clear title/body hierarchy. */
:root { --chinese-font: "PortfolioKaiTi", "KaiTi", "STKaiti", "Kaiti SC", serif; }
body { font-family:var(--chinese-font); font-synthesis:weight; }
.contact-cards { display:inline-flex; align-items:stretch; gap:14px; margin-top:22px; }
.contact-cards .contact-card { min-width:175px; margin-top:0; justify-content:center; }
.social-card { background:#f5d2d4; transform:rotate(2deg); }
.social-card span { font:15px 'DM Mono',monospace; }
.social-card a { font:inherit; font-weight:700; }
nav a, .home-links button, .page-content h2, .placeholder-card strong,
.article-card a, .film-details h2, #audio .episode span, .read-script,
.polaroid b, .note b, .film b, .blue-card b, .swatch b {
  font-family:var(--chinese-font) !important;
  font-weight:700;
}
.intro, .page-content p, .placeholder-card p, .film-details p,
#audio .episode em, .music-hint, .polaroid span, .note span, .film span,
.blue-card span, .swatch span {
  font-family:var(--chinese-font) !important;
  font-weight:400;
}
@media (max-width:760px) {
  .contact-cards { gap:8px; margin-top:17px; }
  .contact-cards .contact-card { min-width:0; width:min(42vw,175px); padding:8px 9px; }
  .social-card span, .contact-card a { font-size:12px; }
}