:root { --bg:#e9e8e5; --paper:#fafaf8; --white:#fff; --ink:#111111; --muted:#777773; --line:#d8d7d3; --orange:#ef7552; --accent-alt:#2f6258; --mint:#a6c7bb; --black:#080808; --radius:28px; --mono:"DM Mono",monospace; --sans:"Manrope","Noto Sans SC",sans-serif; --cn:"Noto Sans SC",sans-serif; }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)} body.is-locked{overflow:hidden} a{color:inherit;text-decoration:none} button{font:inherit} img{display:block;max-width:100%}
.site-shell{max-width:1440px;margin:0 auto;padding:0 24px 24px}.panel{background:var(--paper);border:1px solid rgba(17,17,17,.08);border-radius:var(--radius);box-shadow:0 16px 40px rgba(23,23,20,.04)}
.topbar{align-items:center;display:flex;height:84px;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:20;transition:background .3s,border-color .3s,box-shadow .3s}.topbar.is-scrolled{background:rgba(250,250,248,.78);border:1px solid rgba(17,17,17,.08);border-radius:0 0 20px 20px;box-shadow:0 12px 28px rgba(23,23,20,.06);backdrop-filter:blur(18px)}
.wordmark,.topbar-link,.topnav,.meta-line,.section-kicker,.section-count,.mini-label,.hero-foot,.footer,.art-topline,.art-caption{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.wordmark{align-items:center;display:flex;gap:9px}.wordmark-dot{background:var(--orange);border-radius:50%;height:8px;width:8px}.topnav{display:flex;gap:32px}.topbar-actions{align-items:center;display:flex;gap:18px}.topnav a,.topbar-link,.quiet-link,.footer a{transition:color .2s}.topnav a:hover,.topbar-link:hover,.quiet-link:hover,.footer a:hover{color:var(--orange)}.topbar-link span,.quiet-link span,.pill-button span{color:var(--orange);margin-left:5px}.guestbook-button{background:transparent;border:0;cursor:pointer;padding:8px 0}
.hero-panel{display:grid;gap:32px;grid-template-columns:1.02fr .98fr;min-height:690px;overflow:hidden;padding:clamp(32px,6vw,84px) clamp(24px,6vw,84px) 22px;position:relative}.hero-copy{align-self:center;max-width:690px;position:relative;z-index:2}.meta-line{color:#777772;display:flex;justify-content:space-between;line-height:1.5;margin:0 0 52px}.meta-line.single{display:block;margin-bottom:34px}.hero-panel h1{font-family:var(--cn);font-size:clamp(48px,7.5vw,112px);font-weight:900;letter-spacing:-.09em;line-height:.96;margin:0}.hero-panel h1 span{color:var(--orange)}.hero-cn{color:#5f5f5a;font-family:var(--cn);font-size:clamp(16px,1.4vw,20px);line-height:1.85;margin:38px 0 28px;max-width:550px}.hero-actions{align-items:center;display:flex;gap:20px}.pill-button{align-items:center;border:0;border-radius:999px;display:inline-flex;font-family:var(--mono);font-size:11px;gap:8px;justify-content:center;letter-spacing:.05em;padding:13px 18px;transition:transform .25s,background .25s}.pill-button:hover{transform:translateY(-3px)}.dark-button{background:var(--black);color:var(--white)}.dark-button:hover{background:#252525}.quiet-link{border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;padding:4px 0}.hero-art{align-self:center;height:510px;position:relative}.hero-art-shadow{background:#efe0d7;border-radius:44px;height:80%;position:absolute;right:2%;top:9%;transform:rotate(6deg);width:76%}.hero-art-card{background:#f5f2ee;border-radius:30px;box-shadow:0 24px 50px rgba(23,23,20,.16);height:86%;left:5%;overflow:hidden;position:absolute;top:4%;transform:rotate(-3deg);width:78%;z-index:1}.art-topline,.art-caption{align-items:center;display:flex;height:34px;justify-content:space-between;padding:0 15px}.art-topline{background:#eee9e3}.art-caption{background:#fff}.art-image-wrap{height:calc(100% - 68px);overflow:hidden}.art-image-wrap img{height:100%;object-fit:cover;object-position:center;transition:opacity .35s,transform .6s;width:100%}.hero-art-card:hover .art-image-wrap img{transform:scale(1.05)}.float-label{border:1px solid var(--orange);color:#bd573e;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:10px 12px;position:absolute;z-index:2}.label-one{right:4%;top:17%;transform:rotate(8deg)}.label-two{bottom:8%;left:0;transform:rotate(-7deg)}.art-index{bottom:8%;color:var(--orange);font-family:var(--mono);font-size:80px;position:absolute;right:2%;z-index:2}.hero-foot{border-top:1px solid var(--line);color:#777772;display:flex;grid-column:1/-1;justify-content:space-between;padding-top:16px}
.logo-panel{align-items:center;display:flex;gap:32px;justify-content:space-between;margin-top:14px;padding:24px 38px}.logo-panel-label,.service-row{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.logo-panel-label{color:var(--orange)}.service-row{color:#454541;display:flex;flex-wrap:wrap;gap:20px 36px;justify-content:flex-end}
.section-space{padding:144px clamp(10px,5vw,82px)}.section-kicker{color:var(--orange);display:flex;gap:14px;margin-bottom:34px}.intro-grid{display:grid;gap:80px;grid-template-columns:1.12fr .88fr}.intro-grid h2,.section-head h2,.profile-heading h2,.contact-grid h2{font-family:var(--cn);font-size:clamp(38px,5.7vw,80px);font-weight:800;letter-spacing:-.085em;line-height:1.04;margin:0}.intro-grid h2 em,.profile-heading h2 em,.contact-grid h2 em{color:var(--orange);font-style:normal}.intro-copy{color:#666660;font-family:var(--cn);font-size:16px;line-height:1.95;max-width:430px}.intro-copy p{margin:0 0 18px}
.work-section{padding-top:0}.section-head{align-items:end;display:flex;justify-content:space-between}.section-head h2{font-size:clamp(48px,7vw,100px)}.section-head p{color:var(--muted);font-family:var(--cn);margin:18px 0 0}.section-count{color:var(--muted);padding-bottom:8px}.filter-row{display:flex;gap:6px;margin:48px 0 18px;overflow:auto;padding-bottom:6px}.filter-button{background:transparent;border:1px solid var(--line);border-radius:999px;color:#757570;cursor:pointer;font-family:var(--mono);font-size:11px;padding:10px 14px;white-space:nowrap}.filter-button:hover,.filter-button.is-active{background:var(--black);border-color:var(--black);color:var(--white)}.project-grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}.project-card{grid-column:span 4;min-width:0}.project-card:nth-child(4n+1){grid-column:span 5}.project-card:nth-child(4n+2){grid-column:span 3}.project-card:nth-child(4n+3){grid-column:span 4}.project-card.is-hidden{display:none}.project-button{background:transparent;border:0;cursor:pointer;display:block;padding:0;text-align:left;width:100%}.project-visual{background:#f1efeb;border-radius:24px;overflow:hidden;position:relative}.project-visual img{height:370px;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.project-card:nth-child(4n+2) .project-visual img{height:260px}.project-card:hover .project-visual img{transform:scale(1.04)}.project-index{color:var(--orange);font-family:var(--mono);font-size:11px;left:16px;position:absolute;top:14px;z-index:1}.project-open{background:var(--white);border-radius:50%;bottom:14px;font-size:18px;height:40px;line-height:40px;opacity:0;position:absolute;right:14px;text-align:center;transform:translateY(8px);transition:opacity .25s,transform .25s;width:40px}.project-card:hover .project-open{opacity:1;transform:translateY(0)}.project-info{padding:17px 2px 30px}.project-info h3{font-family:var(--cn);font-size:20px;letter-spacing:-.04em;margin:0}.project-info p{color:var(--muted);font-family:var(--mono);font-size:10px;line-height:1.6;margin:8px 0 0}.project-meta{color:#78a393;display:flex;font-family:var(--mono);font-size:10px;gap:8px;margin-top:12px}
.profile-panel,.contact-panel{padding:clamp(26px,5vw,72px)}.profile-heading{align-items:end;display:grid;gap:80px;grid-template-columns:1.1fr .9fr}.profile-heading p{color:#666660;font-family:var(--cn);font-size:16px;line-height:1.9;margin:0;max-width:430px}.profile-columns{border-top:1px solid var(--line);display:grid;gap:80px;grid-template-columns:1fr 1fr;margin-top:72px;padding-top:22px}.mini-label{color:var(--orange);margin:0 0 22px}.timeline-item{border-bottom:1px solid var(--line);display:grid;gap:8px;grid-template-columns:145px 1fr;margin-bottom:16px;padding-bottom:17px}.timeline-item strong{color:#73a08f;font-family:var(--mono);font-size:10px;font-weight:400}.timeline-item span{font-family:var(--cn);font-weight:700}.timeline-item p{color:#767671;font-family:var(--cn);font-size:13px;grid-column:2;line-height:1.7;margin:0}.profile-experience-pagination{align-items:center;display:flex;gap:10px;justify-content:flex-end;margin-top:2px;padding-top:8px}.profile-experience-pagination span{color:var(--muted);font-family:var(--mono);font-size:10px}.profile-experience-page{align-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--ink);cursor:pointer;display:inline-flex;height:30px;justify-content:center;width:30px}.profile-experience-page:hover:not(:disabled){background:var(--black);border-color:var(--black);color:var(--white)}.profile-experience-page:disabled{color:#b8b6b0;cursor:not-allowed}.profile-experience-empty{color:var(--muted);font-family:var(--cn);font-size:13px;margin:0 0 24px}.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}.tag-cloud span{border:1px solid var(--line);border-radius:999px;color:#666660;font-family:var(--mono);font-size:10px;padding:8px 10px}.awards-label{margin-top:48px}.award-list{list-style:none;margin:0;padding:0}.award-list li{border-bottom:1px solid var(--line);font-family:var(--cn);font-size:13px;padding:11px 0}.profile-facts{border-bottom:1px solid var(--line);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);margin-top:60px}.profile-facts div{border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;padding:18px 18px 18px 0}.profile-facts div:not(:first-child){padding-left:18px}.profile-facts div:last-child{border:0}.profile-facts span{color:var(--muted)}.profile-facts strong{font-family:var(--cn);font-size:15px}
.contact-panel{margin-top:24px}.contact-grid{align-items:end;display:grid;gap:80px;grid-template-columns:1.1fr .9fr}.contact-grid h2{font-size:clamp(48px,7vw,100px)}.contact-card{background:#f0ede8;border:1px solid var(--line);border-radius:22px;padding:24px}.contact-card>p{color:#64645f;font-family:var(--cn);line-height:1.85;margin:0 0 26px}.contact-line{align-items:center;border-top:1px solid var(--line);display:grid;gap:12px;grid-template-columns:40px 1fr auto;padding:14px 0}.contact-line span{color:#777772;font-family:var(--mono);font-size:10px}.contact-line strong{font-family:var(--mono);font-size:12px;font-weight:500}.wechat-contact{align-items:center;border-top:1px solid var(--line);display:flex;gap:16px;padding:16px 0}.wechat-qr-frame{align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;height:112px;justify-content:center;overflow:hidden;padding:8px;width:112px}.wechat-qr-frame img{height:100%;object-fit:contain;width:100%}.wechat-qr-frame.is-empty{background:#e8e5df}.wechat-qr-frame span{color:#777772;font-family:var(--mono);font-size:8px;line-height:1.5;text-align:center}.wechat-contact-copy{display:grid;gap:7px}.wechat-contact-copy span{color:#777772;font-family:var(--mono);font-size:10px}.wechat-contact-copy strong{font-family:var(--cn);font-size:14px;line-height:1.5}.contact-button{margin-top:12px;width:100%}.footer{color:#777772;display:flex;justify-content:space-between;padding:30px 20px 10px}
.gallery-overlay{inset:0;opacity:0;pointer-events:none;position:fixed;transition:opacity .25s;z-index:40}.gallery-overlay.is-open{opacity:1;pointer-events:auto}.gallery-backdrop{background:rgba(20,20,18,.32);inset:0;position:absolute}.gallery-panel{background:var(--paper);border-radius:30px;bottom:20px;display:flex;flex-direction:column;left:50%;max-height:calc(100vh - 40px);max-width:1320px;overflow:hidden;position:absolute;top:20px;transform:translateX(-50%);width:calc(100% - 40px)}.gallery-header{align-items:flex-start;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:28px 34px}.gallery-header h2{font-family:var(--cn);font-size:clamp(30px,4vw,56px);letter-spacing:-.08em;line-height:1;margin:12px 0 8px}.gallery-header p:last-child{color:var(--muted);font-family:var(--mono);font-size:10px;margin:0}.icon-button{background:#111;border:0;border-radius:50%;color:#fff;cursor:pointer;font-size:22px;height:42px;line-height:1;width:42px}.gallery-body{display:grid;gap:28px;grid-template-columns:260px 1fr;min-height:0;padding:24px 34px 34px}.gallery-side{color:#666660;font-family:var(--cn);font-size:14px;line-height:1.85;overflow:auto;padding:10px 10px 10px 0}.gallery-side p{margin:0}.gallery-meta{border-top:1px solid var(--line);margin-top:24px;padding-top:16px}.gallery-meta div{display:flex;font-family:var(--mono);font-size:10px;justify-content:space-between;padding:7px 0}.gallery-meta span:first-child{color:var(--orange)}.dark-link{color:var(--ink);display:inline-block;margin-top:34px}.gallery-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));overflow:auto;padding-right:4px}.gallery-item{background:#f1efeb;border-radius:20px;min-height:180px;overflow:hidden}.gallery-item.wide{grid-column:span 2}.gallery-item img{height:100%;min-height:220px;object-fit:contain;width:100%}.gallery-item.wide img{min-height:300px}
.gallery-panel.is-case-view .gallery-header h2 { margin-bottom: 12px; }
.gallery-panel.is-case-view .gallery-header p:last-child { color: var(--muted); font-family: var(--cn); font-size: 15px; letter-spacing: 0; line-height: 1.75; max-width: 860px; overflow-wrap: anywhere; text-transform: none; white-space: pre-wrap; }
@media (max-width:980px){.hero-panel{grid-template-columns:1fr}.hero-art{margin:0 auto;width:min(100%,600px)}.intro-grid,.profile-heading,.contact-grid{gap:36px;grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column;gap:22px}.profile-columns{gap:42px;grid-template-columns:1fr}.gallery-body{grid-template-columns:200px 1fr}}
@media (max-width:640px){.site-shell{padding:0 12px 12px}.topbar{height:70px;padding:0 8px}.topnav{display:none}.topbar-link{font-size:10px}.hero-panel{min-height:770px;padding:32px 22px 20px}.meta-line{flex-direction:column;gap:7px;margin-bottom:38px}.hero-panel h1{font-size:clamp(46px,14vw,68px)}.hero-cn{font-size:15px;margin-top:30px}.hero-art{height:350px;margin-top:24px}.hero-art-shadow{height:76%;width:82%}.hero-art-card{height:82%;width:86%}.art-index{font-size:58px}.hero-foot{flex-wrap:wrap;gap:10px 16px;line-height:1.4}.logo-panel{align-items:flex-start;flex-direction:column;margin-top:10px;padding:20px 22px}.service-row{justify-content:flex-start;line-height:1.7}.section-space{padding:88px 10px}.intro-grid h2,.profile-heading h2{font-size:42px}.section-head h2{font-size:58px}.project-grid{display:block}.project-card,.project-card:nth-child(n){margin-bottom:16px}.project-visual img,.project-card:nth-child(4n+2) .project-visual img{height:290px}.profile-panel,.contact-panel{border-radius:24px;padding:28px 22px}.profile-facts{grid-template-columns:repeat(2,1fr)}.profile-facts div:nth-child(2){border-right:0}.profile-facts div:nth-child(n+3){border-top:1px solid var(--line)}.profile-facts div:nth-child(3){padding-left:0}.footer{flex-direction:column;gap:10px;line-height:1.5;padding:24px 8px}.gallery-panel{bottom:10px;max-height:calc(100vh - 20px);top:10px;width:calc(100% - 20px)}.gallery-header{padding:22px}.gallery-body{display:flex;flex-direction:column;gap:16px;padding:10px 22px 22px}.gallery-side{flex:none;max-height:220px;overflow:auto}.gallery-grid{display:block}.gallery-item,.gallery-item.wide{margin-bottom:14px}.gallery-item img,.gallery-item.wide img{min-height:180px}.gallery-header h2{font-size:34px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

.intro-section {
  margin-bottom: 24px;
  margin-top: 24px;
}

.logo-panel {
  margin-bottom: 24px;
  margin-top: 24px;
}

.intro-section .quiet-link {
  align-items: center;
  border: 1px solid var(--about-accent);
  border-radius: 999px;
  display: inline-flex;
  gap: 10px;
  margin-top: 8px;
  padding: 11px 16px;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.intro-section .quiet-link span {
  margin-left: 0;
  transition: transform .25s ease;
}

.intro-section .quiet-link:hover {
  background: var(--about-accent);
  box-shadow: 0 10px 22px rgba(17, 17, 17, .12);
  color: var(--white);
  transform: translateY(-2px);
}

.intro-section .quiet-link:hover span {
  color: currentColor;
  transform: translateY(3px);
}

.intro-section .quiet-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--about-accent) 28%, transparent);
  outline-offset: 3px;
}

.guestbook-overlay{inset:0;opacity:0;pointer-events:none;position:fixed;transition:opacity .24s ease;z-index:60}
.guestbook-overlay[hidden]{display:none}
.guestbook-overlay.is-open{opacity:1;pointer-events:auto}
.guestbook-backdrop{background:rgba(20,20,18,.32);inset:0;position:absolute}
.guestbook-panel{background:var(--paper);border:1px solid rgba(17,17,17,.1);border-radius:28px;box-shadow:0 26px 90px rgba(23,23,20,.2);left:50%;max-width:620px;position:absolute;top:50%;transform:translate(-50%,-46%) scale(.98);transition:transform .3s cubic-bezier(.2,.7,.2,1);width:calc(100% - 40px)}
.guestbook-overlay.is-open .guestbook-panel{transform:translate(-50%,-50%) scale(1)}
.guestbook-header{align-items:flex-start;border-bottom:1px solid var(--line);display:flex;gap:20px;justify-content:space-between;padding:28px 30px 22px}
.guestbook-header h2{font-family:var(--cn);font-size:clamp(32px,5vw,52px);letter-spacing:-.07em;line-height:1.05;margin:12px 0 8px}
.guestbook-header p:last-child{color:var(--muted);font-family:var(--cn);font-size:13px;line-height:1.7;margin:0}
.guestbook-form{display:grid;gap:18px;padding:26px 30px 30px}
.guestbook-form label{display:grid;gap:8px}.guestbook-form label>span{color:var(--orange);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.guestbook-form input,.guestbook-form textarea{background:#f0ede8;border:1px solid var(--line);border-radius:13px;color:var(--ink);font-family:var(--cn);padding:12px 13px;width:100%}.guestbook-form textarea{line-height:1.75;min-height:150px;resize:vertical}.guestbook-form input:focus,.guestbook-form textarea:focus{border-color:var(--orange);outline:2px solid rgba(239,117,82,.16)}
.guestbook-form-footer{align-items:flex-end;display:flex;gap:18px;justify-content:space-between}.guestbook-form-footer p{color:var(--muted);font-family:var(--mono);font-size:10px;line-height:1.6;margin:0;max-width:280px}.guestbook-form-footer button{flex:none}
@media (max-width:640px){.topbar-actions{gap:7px}.topbar-actions .guestbook-button{font-size:9px}.topbar-link.resume-button{font-size:9px}.guestbook-panel{border-radius:22px;width:calc(100% - 24px)}.guestbook-header{padding:22px 20px 17px}.guestbook-form{padding:20px}.guestbook-form-footer{align-items:stretch;flex-direction:column}.guestbook-form-footer button{width:100%}}

@media (max-width:640px) {
  .logo-panel {
    margin-bottom: 16px;
    margin-top: 16px;
  }

  .intro-section {
    margin-bottom: 16px;
    margin-top: 16px;
  }

  .intro-section .quiet-link {
    margin-top: 6px;
    min-height: 42px;
    padding: 10px 15px;
  }
}

/* Keep the service strip evenly spaced from both neighboring panels. */
.logo-panel {
  margin-bottom: 24px;
  margin-top: 24px;
}

@media (max-width:640px) {
  .logo-panel {
    margin-bottom: 16px;
    margin-top: 16px;
  }
}

/* Hero title treatment: split the English headline into two editorial color bands. */
.hero-panel h1 span {
  display: block;
  will-change: transform, opacity;
}
.hero-panel h1 span[data-hero-title-line1] { color: var(--orange); }
.hero-panel h1 span[data-hero-title-line2] { color: var(--accent-alt); }

/* Featured images use a stable frame without cropping the source artwork. */
.art-image-wrap{align-items:center;background:#f1efeb;display:flex;justify-content:center}
.art-image-wrap img{height:100%;object-fit:contain;object-position:center;transform:none!important;width:100%}

/* Keep display type open and readable across Chinese and Latin scripts. */
.hero-panel h1,
.intro-grid h2,
.section-head h2,
.profile-heading h2,
.contact-grid h2,
.project-info h3,
.gallery-header h2{letter-spacing:0}
.project-button:focus-visible,
.filter-button:focus-visible,
.icon-button:focus-visible,
.pill-button:focus-visible,
.quiet-link:focus-visible,
.topnav a:focus-visible,
.topbar-link:focus-visible,
.contact-line:focus-visible,
.footer a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* Gallery images keep their native aspect ratio so no artwork is cropped. */
.gallery-grid{align-content:start;align-items:start;grid-auto-rows:max-content}
.gallery-item,.gallery-item.wide{align-self:start;height:auto;min-height:0}
.gallery-item img,.gallery-item.wide img{height:auto;max-height:none;min-height:0;object-fit:contain;width:100%}
.gallery-item{content-visibility:auto;contain-intrinsic-size:320px 240px}

/* Project previews also preserve the complete source image. */
.project-visual{align-items:flex-start;display:flex}
.project-visual img,.project-card:nth-child(4n+2) .project-visual img{height:auto;max-height:none;min-height:0;object-fit:contain;object-position:center;width:100%}

/* Stable preview frames keep mixed source ratios aligned without cropping them. */
.project-visual{align-items:center;aspect-ratio:4 / 3;justify-content:center}
.project-visual img,.project-card:nth-child(4n+2) .project-visual img{height:100%;object-fit:contain;width:100%}
.project-card:hover .project-visual img{filter:brightness(.98);transform:none}

.scroll-progress{background:var(--orange);height:3px;inset:0 0 auto;pointer-events:none;position:fixed;transform:scaleX(0);transform-origin:left center;will-change:transform;z-index:100}
.project-button{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.project-button:hover{transform:translateY(-4px)}

/* The work index uses an even editorial grid instead of mixed card widths. */
.project-grid{align-items:start;grid-template-columns:repeat(3,minmax(0,1fr))}
.project-card,
.project-card:nth-child(4n+1),
.project-card:nth-child(4n+2),
.project-card:nth-child(4n+3){grid-column:span 1}

@media (max-width:980px){
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-card,
  .project-card:nth-child(4n+1),
  .project-card:nth-child(4n+2),
  .project-card:nth-child(4n+3){grid-column:span 1}
}

@media (max-width:640px){.project-grid{display:block}}

/* Keep the contact QR compact so it supports the card instead of dominating it. */
.wechat-contact{gap:14px}
.wechat-qr-frame{flex:0 0 92px;height:92px;padding:6px;width:92px}
.wechat-contact-copy{min-width:0}
@media (max-width:640px){.wechat-contact{gap:12px}.wechat-qr-frame{flex-basis:78px;height:78px;padding:5px;width:78px}}

/* Managed theme overrides keep the public site in sync with the admin color system. */
body{background:var(--bg);color:var(--ink)}
.panel,.gallery-panel,.art-caption{background:var(--paper)}
.contact-card,input,textarea,select{background:color-mix(in srgb,var(--paper) 82%,var(--bg))}
.art-topline,.project-visual,.gallery-item,.hero-art-card,.art-image-wrap,.wechat-qr-frame.is-empty{background:color-mix(in srgb,var(--paper) 78%,var(--bg))}
.hero-cn,.intro-copy,.profile-heading p,.section-head p,.contact-card>p,.gallery-side,.footer,.meta-line,.hero-foot,.section-count,.contact-line span,.wechat-contact-copy span{color:var(--muted)}
.dark-button,.filter-button.is-active,.icon-button{background:var(--black)}
.filter-button.is-active{border-color:var(--black)}
.float-label{border-color:var(--orange);color:var(--orange)}
.timeline-item strong,.project-meta{color:var(--accent-alt)}
html {
  /* Keep the viewport width stable while the project gallery locks page scroll. */
  scrollbar-gutter: stable;
}

/* Make the top navigation read as an interactive control group. */
.topnav {
  align-items: center;
  background: rgba(250, 250, 248, .72);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  gap: 4px;
  padding: 4px;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.topbar.is-scrolled .topnav {
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 20px rgba(23, 23, 20, .06);
}
.topnav a {
  align-items: center;
  border-radius: 999px;
  color: #6f6f69;
  display: inline-flex;
  font-size: 11px;
  justify-content: center;
  min-width: 58px;
  padding: 9px 13px;
  position: relative;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.topnav a:hover {
  background: #f0efeb;
  color: var(--ink);
  transform: translateY(-2px);
}
.topnav a:active {
  transform: translateY(0) scale(.96);
}
.topnav a.is-active {
  background: var(--black);
  box-shadow: 0 5px 12px rgba(8, 8, 8, .14);
  color: var(--white);
}
.topnav a.is-active::after {
  background: var(--orange);
  border-radius: 50%;
  content: "";
  height: 4px;
  position: absolute;
  right: 8px;
  top: 6px;
  width: 4px;
}
@media (max-width: 640px) {
  .topbar { gap: 8px; }
  .topnav { gap: 2px; max-width: 58vw; overflow: auto; padding: 3px; }
  .topnav a { font-size: 10px; min-width: 46px; padding: 8px 9px; }
  .topbar-link { display: none; }
}
.wordmark.nav-home {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 12px 8px 9px;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.wordmark.nav-home:hover {
  background: #f0efeb;
  transform: translateY(-2px);
}

.wordmark.nav-home.is-active {
  background: var(--black);
  box-shadow: 0 5px 12px rgba(8, 8, 8, .14);
  color: var(--white);
}

.resume-button {
  align-items: center;
  background: rgba(250, 250, 248, .72);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  padding: 9px 13px;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.resume-button:hover {
  background: #f0efeb;
  box-shadow: 0 5px 12px rgba(8, 8, 8, .08);
  color: var(--ink) !important;
  transform: translateY(-2px);
}

.resume-button:hover span {
  color: var(--orange) !important;
}

.guestbook-button {
  align-items: center;
  background: rgba(250, 250, 248, .72);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 6px;
  padding: 9px 13px;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.guestbook-button:hover {
  background: #f0efeb;
  box-shadow: 0 5px 12px rgba(8, 8, 8, .08);
  color: var(--ink) !important;
  transform: translateY(-2px);
}

.guestbook-button:hover span {
  color: var(--orange) !important;
}

.guestbook-button:active {
  transform: translateY(0) scale(.97);
}

.guestbook-button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.notification-button {
  align-items: center;
  background: rgba(250, 250, 248, .72);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 6px;
  padding: 9px 13px;
  position: relative;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.notification-button[hidden] { display: none; }
.notification-button:hover,
.notification-button[aria-expanded="true"] {
  background: #f0efeb;
  box-shadow: 0 5px 12px rgba(8, 8, 8, .08);
  color: var(--ink) !important;
  transform: translateY(-2px);
}
.notification-button:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.notification-icon {
  align-items: center;
  background: var(--orange);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 9px;
  height: 17px;
  justify-content: center;
  line-height: 1;
  width: 17px;
}
.notification-button[aria-expanded="true"] .notification-icon { animation: notification-pulse 1.8s ease-in-out infinite; }
@keyframes notification-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 117, 82, .18); }
  50% { box-shadow: 0 0 0 5px rgba(239, 117, 82, 0); }
}
.notification-popover {
  background: var(--paper);
  border: 1px solid rgba(17, 17, 17, .12);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(23, 23, 20, .16);
  max-width: min(360px, calc(100vw - 32px));
  padding: 16px 18px 17px;
  position: fixed;
  right: max(24px, calc((100vw - 1392px) / 2 + 24px));
  top: 76px;
  transform-origin: top right;
  width: 360px;
  z-index: 35;
}
.notification-popover[hidden] { display: none; }
.notification-popover::before {
  background: var(--paper);
  border-left: 1px solid rgba(17, 17, 17, .12);
  border-top: 1px solid rgba(17, 17, 17, .12);
  content: "";
  display: block;
  height: 11px;
  left: var(--notification-arrow-x, 50%);
  pointer-events: none;
  position: absolute;
  top: -6px;
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
  width: 11px;
}
.notification-popover-head { align-items: center; display: flex; justify-content: space-between; }
.notification-popover-label { color: var(--orange); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.notification-popover-close { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); cursor: pointer; display: inline-flex; font-size: 16px; height: 26px; justify-content: center; line-height: 1; padding: 0; transition: border-color .2s, color .2s, transform .2s; width: 26px; }
.notification-popover-close:hover { border-color: var(--orange); color: var(--orange); transform: rotate(8deg); }
.notification-popover-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.notification-popover h2 { font-family: var(--cn); font-size: 20px; line-height: 1.3; margin: 16px 0 8px; }
.notification-popover h2 { overflow-wrap: anywhere; }
.notification-popover p { max-height: 28dvh; overflow-y: auto; overscroll-behavior: contain; }
.notification-popover p { color: var(--muted); font-family: var(--cn); font-size: 13px; line-height: 1.75; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.notification-popover time { color: var(--muted); display: block; font-family: var(--mono); font-size: 9px; margin-top: 13px; }
.notification-popover-link { align-items: center; background: var(--black); border-radius: 999px; color: var(--white); display: inline-flex; font-family: var(--cn); font-size: 12px; gap: 8px; margin-top: 16px; padding: 9px 13px; transition: background .2s, transform .2s; }
.notification-popover-link:hover { background: var(--orange); transform: translateY(-2px); }
.notification-popover-link span { color: var(--orange); font-family: var(--mono); }
.notification-popover-link:hover span { color: var(--white); }

@media (max-width: 640px) {
  .topbar-link.resume-button {
    display: inline-flex;
    font-size: 10px;
    padding: 8px;
  }

  .topbar-actions .guestbook-button {
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 10px;
    padding: 8px 7px;
    white-space: nowrap;
  }
  .topbar-actions .notification-button {
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 10px;
    padding: 8px 7px;
    white-space: nowrap;
  }
  .notification-popover {
    max-width: none;
    padding: 15px 16px 16px;
    width: min(350px, calc(100vw - 24px));
  }

  .topnav a {
    min-width: 40px;
    padding: 8px 7px;
  }
}

/* Per-section text colors managed from the admin visual styles module. */
:root {
  --nav-text: #111111; --nav-active: #ffffff; --nav-accent: #ef7552;
  --hero-kicker: #ef7552; --hero-title: #ef7552; --hero-title-alt: #2f6258; --hero-body: #5f5f5a; --hero-accent: #ef7552;
  --about-kicker: #ef7552; --about-title: #111111; --about-title-alt: #ef7552; --about-body: #666660; --about-accent: #ef7552;
  --work-kicker: #ef7552; --work-title: #111111; --work-body: #777773; --work-card-title: #111111; --work-card-subtitle: #777773; --work-meta: #78a393; --work-accent: #ef7552;
  --profile-kicker: #ef7552; --profile-title: #111111; --profile-title-alt: #ef7552; --profile-body: #666660; --profile-label: #73a08f; --profile-accent: #ef7552;
  --contact-kicker: #ef7552; --contact-eyebrow: #777773; --contact-title: #111111; --contact-title-alt: #ef7552; --contact-body: #64645f; --contact-info: #777773; --contact-accent: #ef7552;
  --footer-text: #777773; --footer-accent: #ef7552;
}

.wordmark, .topnav a, .topbar-link { color: var(--nav-text); }
.wordmark-dot, .topnav a.is-active::after { background: var(--nav-accent); }
.topnav a.is-active, .wordmark.nav-home.is-active { color: var(--nav-active); }
.topnav a:hover, .topbar-link:hover, .wordmark.nav-home:hover { color: var(--nav-accent); }

.hero-panel .meta-line, .hero-panel .hero-foot { color: var(--hero-kicker); }
.hero-panel h1 span[data-hero-title-line1] { color: var(--hero-title); }
.hero-panel h1 span[data-hero-title-line2] { color: var(--hero-title-alt); }
.hero-panel .hero-cn { color: var(--hero-body); }
.hero-panel .float-label, .hero-panel .art-index { color: var(--hero-accent); }
.hero-panel .float-label { border-color: var(--hero-accent); }
.hero-panel .quiet-link, .hero-panel .quiet-link span { color: var(--hero-accent); }

.logo-panel-label, .service-row { color: var(--about-body); }
.intro-section .section-kicker { color: var(--about-kicker); }
.intro-section h2 { color: var(--about-title); }
.intro-section h2 em { color: var(--about-title-alt); }
.intro-section .intro-copy { color: var(--about-body); }
.intro-section .quiet-link, .intro-section .quiet-link span { color: var(--about-accent); }

.work-section .section-kicker { color: var(--work-kicker); }
.work-section .section-head h2 { color: var(--work-title); }
.work-section .section-head p, .work-section .section-count { color: var(--work-body); }
.work-section .project-info h3 { color: var(--work-card-title); }
.work-section .project-info p { color: var(--work-card-subtitle); }
.work-section .project-meta { color: var(--work-meta); }
.work-section .project-index { color: var(--work-accent); }
.work-section .filter-button:hover, .work-section .filter-button.is-active { background: var(--work-accent); border-color: var(--work-accent); }

.profile-panel .section-kicker { color: var(--profile-kicker); }
.profile-panel h2 { color: var(--profile-title); }
.profile-panel h2 em { color: var(--profile-title-alt); }
.profile-panel .profile-heading p, .profile-panel .timeline-item p { color: var(--profile-body); }
.profile-panel .mini-label, .profile-panel .timeline-item strong { color: var(--profile-label); }
.profile-panel .tag-cloud span { color: var(--profile-body); }
.profile-panel .profile-facts span { color: var(--profile-body); }

.contact-panel .section-kicker { color: var(--contact-kicker); }
.contact-panel .meta-line { color: var(--contact-eyebrow); }
.contact-panel h2 { color: var(--contact-title); }
.contact-panel h2 em { color: var(--contact-title-alt); }
.contact-panel .contact-card > p { color: var(--contact-body); }
.contact-panel .contact-line span, .contact-panel .wechat-contact-copy > span { color: var(--contact-info); }
.contact-panel .quiet-link, .contact-panel .quiet-link span { color: var(--contact-accent); }

.footer { color: var(--footer-text); }
.footer a:hover { color: var(--footer-accent); }

/* Keep dark navigation states readable when the configurable accent is dark. */
.topnav a.is-active:hover,
.wordmark.nav-home.is-active:hover { color: var(--nav-active); }
.resume-button:hover { color: var(--ink) !important; }
.resume-button:hover span { color: var(--orange) !important; }

/* The email action is a secondary pill button, not an underlined text link. */
.hero-actions .email-button { background: transparent; border: 1px solid var(--hero-accent); color: var(--hero-accent); }
.hero-actions .email-button:hover { background: var(--hero-accent); color: var(--white); }
.hero-actions .email-button span { color: currentColor; }

/* Keep every profile fact aligned to the same inner edge. */
.profile-facts div {
  padding-left: 18px;
  padding-right: 18px;
}

@media (max-width: 640px) {
  .profile-facts div,
  .profile-facts div:last-child {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Final mobile pass: one coherent narrow-screen rhythm for the existing layout. */
@media (max-width: 640px) {
  html { overflow-x: hidden; scrollbar-gutter: stable; scroll-padding-top: 84px; }
  body { min-width: 0; overflow-x: hidden; }
  .site-shell { padding: calc(74px + env(safe-area-inset-top, 0px)) 10px 10px; }

  .topbar {
    align-items: center;
    gap: 6px;
    height: 64px;
    left: 10px;
    padding: 0 4px;
    position: fixed;
    right: 10px;
    top: env(safe-area-inset-top, 0px);
    width: auto;
    background: rgba(250, 250, 248, .88);
    border-bottom: 1px solid rgba(17, 17, 17, .07);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 18px rgba(23, 23, 20, .05);
    backdrop-filter: blur(18px);
    transform: translateZ(0);
  }
  .topbar.is-scrolled { border-radius: 0 0 18px 18px; }
  .wordmark.nav-home {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 8px 8px 6px;
  }
  .wordmark.nav-home > span:last-child {
    display: block;
    max-width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topnav {
    flex: 1 1 auto;
    justify-content: flex-end;
    max-width: none;
    min-width: 0;
    overflow: visible;
  }
  .topnav a {
    flex: 0 0 auto;
    min-width: 0;
    padding: 8px 7px;
  }
  .topbar-link.resume-button {
    flex: 0 0 auto;
    padding: 8px 7px;
    white-space: nowrap;
  }

  .panel { border-radius: 24px; }
  .hero-panel {
    gap: 18px;
    min-height: 0;
    padding: 26px 18px 18px;
  }
  .hero-copy { align-self: start; }
  .meta-line { margin-bottom: 28px; }
  .hero-panel h1 {
    font-size: clamp(40px, 11vw, 56px);
    line-height: .98;
  }
  .hero-cn {
    font-size: 14px;
    line-height: 1.8;
    margin: 22px 0 20px;
  }
  .hero-actions { flex-wrap: wrap; gap: 10px; }
  .pill-button { min-height: 42px; padding: 11px 14px; }
  .hero-art {
    height: clamp(286px, 78vw, 350px);
    margin: 2px auto 0;
    width: 100%;
  }
  .hero-art-card { left: 4%; width: 84%; }
  .hero-art-shadow { right: 0; width: 78%; }
  .float-label { font-size: 9px; padding: 8px 9px; }
  .label-one { right: 0; }
  .label-two { left: 0; }
  .hero-foot { padding-top: 12px; }

  .logo-panel { gap: 12px; margin-top: 8px; padding: 17px 18px; }
  .service-row { gap: 6px 14px; }

  .section-space { padding: 70px 8px; }
  .section-kicker { margin-bottom: 22px; }
  .intro-grid h2, .profile-heading h2 { font-size: clamp(34px, 10vw, 44px); line-height: 1.1; }
  .intro-copy { font-size: 15px; line-height: 1.85; }
  .section-head h2 { font-size: clamp(46px, 14vw, 58px); line-height: 1; }
  .section-head p { line-height: 1.6; margin-top: 12px; }
  .filter-row { margin: 30px 0 16px; padding-bottom: 4px; }
  .filter-button { padding: 9px 12px; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row { scrollbar-width: none; }
  .project-card { margin-bottom: 24px; }
  .project-visual { aspect-ratio: 4 / 3; border-radius: 18px; }
  .project-info { padding: 13px 2px 0; }
  .project-info h3 { font-size: 19px; }

  .profile-panel, .contact-panel { padding: 24px 18px; }
  .profile-heading, .contact-grid { gap: 28px; }
  .profile-heading p { font-size: 15px; line-height: 1.8; }
  .profile-columns { gap: 34px; margin-top: 46px; }
  .timeline-item {
    gap: 5px 10px;
    grid-template-columns: minmax(82px, .34fr) minmax(0, .66fr);
    padding-bottom: 14px;
  }
  .timeline-item span, .timeline-item p { min-width: 0; }
  .timeline-item span { line-height: 1.5; }
  .timeline-item p { font-size: 12px; line-height: 1.65; }
  .profile-experience-pagination { justify-content: center; padding-top: 4px; }
  .profile-facts { margin-top: 44px; }
  .profile-facts div { min-width: 0; padding: 14px 12px 14px 0; }
  .profile-facts div:not(:first-child) { padding-left: 12px; }
  .profile-facts div:last-child { border-right: 0; grid-column: span 2; }
  .profile-facts strong { font-size: 14px; }

  .contact-grid h2 { font-size: clamp(45px, 13vw, 58px); line-height: 1; }
  .contact-card { border-radius: 18px; padding: 18px; }
  .contact-line { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .contact-line strong { overflow-wrap: anywhere; }
  .wechat-qr-frame { flex-basis: 76px; height: 76px; width: 76px; }
  .wechat-contact-copy strong { font-size: 13px; }

  .footer { padding: 22px 6px 8px; }

  .gallery-panel {
    border-radius: 22px;
    bottom: max(8px, env(safe-area-inset-bottom));
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom));
    top: max(8px, env(safe-area-inset-top));
    width: calc(100% - 16px);
    overscroll-behavior: contain;
  }
  .gallery-header { gap: 12px; padding: 18px; }
  .gallery-header h2 { font-size: clamp(28px, 8vw, 34px); line-height: 1.05; }
  .gallery-header p:last-child { line-height: 1.45; }
  .gallery-body { gap: 12px; padding: 8px 18px 18px; }
  .gallery-side { max-height: 180px; padding-right: 2px; }
  .gallery-grid { padding-right: 0; }
  .gallery-item, .gallery-item.wide { border-radius: 14px; margin-bottom: 12px; }
  .gallery-item img, .gallery-item.wide img { display: block; height: auto; min-height: 0; width: 100%; }
}

@media (max-width: 370px) {
  .wordmark.nav-home > span:last-child { max-width: 92px; }
  .topnav a { padding-left: 5px; padding-right: 5px; }
  .topbar-link.resume-button,
  .topbar-actions .guestbook-button { font-size: 9px; }
  .hero-panel { padding-left: 15px; padding-right: 15px; }
  .hero-panel h1 { font-size: 40px; }
  .profile-panel, .contact-panel { padding-left: 15px; padding-right: 15px; }
}

/* Mobile navigation and gallery readability pass. */
@media (max-width: 640px) {
  html { scroll-padding-top: 120px; }
  .site-shell { padding-top: calc(116px + env(safe-area-inset-top, 0px)); }
  .topbar {
    display: grid;
    grid-template-areas: "brand actions" "nav nav";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    height: auto;
    min-height: 104px;
    padding: 8px;
  }
  .wordmark.nav-home { grid-area: brand; min-width: 0; }
  .wordmark.nav-home > span:last-child { max-width: 150px; }
  .topbar-actions { grid-area: actions; gap: 6px; }
  .topnav {
    border-top: 1px solid rgba(17, 17, 17, .08);
    display: flex;
    grid-area: nav;
    justify-content: stretch;
    padding-top: 4px;
    width: 100%;
  }
  .topnav a { flex: 1 1 0; min-width: 0; text-align: center; }
  .topnav a, .topbar-actions .topbar-link, .wordmark.nav-home { min-height: 44px; }
  .topnav a { align-items: center; display: flex; justify-content: center; }
  .site-shell { padding-top: calc(132px + env(safe-area-inset-top, 0px)); }
  .guestbook-form input, .guestbook-form textarea { font-size: 16px; }
  .notification-popover { padding: 12px 14px; }
  .notification-popover h2 { font-size: 17px; margin-top: 10px; }
  .notification-popover-close { height: 36px; width: 36px; }
  .gallery-side { max-height: none; overflow: visible; }
  .gallery-body { overflow: auto; }
  .gallery-grid { overflow: visible; }

  /* Give the first fact a little more breathing room on narrow screens. */
  .profile-facts > div:first-child { padding-left: 12px; }
}

@media (max-width: 370px) {
  .wordmark.nav-home > span:last-child { max-width: 112px; }
  .topbar-actions .guestbook-button,
  .topbar-link.resume-button,
  .topbar-actions .notification-button { font-size: 9px; padding-left: 6px; padding-right: 6px; }
}

/* Project detail gallery: one consistent image width, natural image height, tap to inspect. */
.gallery-grid {
  align-content: start;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  overflow: auto;
  padding: 0 4px 4px 0;
}
.gallery-item,
.gallery-item.wide {
  background: transparent;
  border-radius: 0;
  height: auto;
  margin: 0;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  width: 100%;
  content-visibility: visible;
}
.gallery-image-button {
  background: #f1efeb;
  border: 0;
  border-radius: 14px;
  cursor: zoom-in;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}
.gallery-item img,
.gallery-item.wide img {
  height: auto;
  max-height: none;
  min-height: 0;
  object-fit: contain;
  transition: transform .3s ease;
  width: 100%;
}
.gallery-image-button.is-loading { min-height: 140px; }
.gallery-image-button.is-loading::after {
  animation: gallery-loading 1s linear infinite;
  border: 2px solid #d8d7d3;
  border-radius: 50%;
  border-top-color: var(--orange);
  content: "";
  height: 24px;
  left: calc(50% - 12px);
  position: absolute;
  top: calc(50% - 12px);
  width: 24px;
}
@keyframes gallery-loading { to { transform: rotate(360deg); } }
.gallery-image-button.is-error { min-height: 140px; }
.gallery-image-button.is-error img { visibility: hidden; }
.gallery-image-retry {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: block;
  left: 50%;
  padding: 12px 18px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.gallery-image-retry[hidden] { display: none; }
.gallery-image-button:hover img { transform: scale(1.012); }
.gallery-image-button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.gallery-image-zoom {
  background: rgba(17, 17, 17, .78);
  border-radius: 999px;
  bottom: 14px;
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0;
  padding: 9px 12px;
  position: absolute;
  right: 14px;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.gallery-image-button:hover .gallery-image-zoom,
.gallery-image-button:focus-visible .gallery-image-zoom { opacity: 1; transform: translateY(0); }
.image-lightbox {
  align-items: center;
  background: rgba(10, 10, 10, .94);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 72px 28px 28px;
  position: fixed;
  transition: opacity .22s;
  z-index: 60;
}
.image-lightbox[hidden] { display: none; }
.image-lightbox.is-open { opacity: 1; }
.image-lightbox-backdrop { background: transparent; border: 0; inset: 0; position: absolute; }
.image-lightbox-toolbar {
  align-items: center;
  color: rgba(255, 255, 255, .68);
  display: flex;
  font-family: var(--mono);
  font-size: 11px;
  justify-content: space-between;
  left: 24px;
  position: absolute;
  right: 24px;
  top: 18px;
  z-index: 1;
}
.image-lightbox-close {
  background: #fff;
  border: 0;
  border-radius: 50%;
  color: #111;
  cursor: pointer;
  font-size: 25px;
  height: 42px;
  line-height: 1;
  width: 42px;
}
.image-lightbox-viewport {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  width: 100%;
}
.image-lightbox-image { height: auto; max-height: 100%; max-width: 100%; object-fit: contain; position: relative; width: auto; }
.gallery-body { flex: 1 1 0; grid-template-rows: minmax(0, 1fr); }
.gallery-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.gallery-grid { flex: 1 1 auto; min-height: 0; }
.gallery-case-nav { border-top: 1px solid var(--line); display: grid; gap: 8px; margin-top: 22px; padding-top: 14px; }
.gallery-case-nav[hidden], .gallery-case-back[hidden], .gallery-case-content[hidden] { display: none; }
.gallery-case-link { align-items: center; background: #f3f1ed; border: 1px solid #e5e2dc; border-radius: 8px; box-shadow: none; color: var(--ink); cursor: pointer; display: flex; font-family: var(--cn); font-size: 14px; font-weight: 500; gap: 10px; justify-content: space-between; min-height: 46px; padding: 9px 12px; text-align: left; transition: background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; }
.gallery-case-link:hover, .gallery-case-link:focus-visible { background: #ece9e3; border-color: #d5d1c9; color: var(--orange); }
.gallery-case-link:hover { transform: translateX(2px); }
.gallery-case-link.is-active { background: #ece9e3; border-color: #d5d1c9; color: var(--orange); }
.gallery-case-link:focus-visible, .gallery-case-back:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.gallery-case-link span:first-child { min-width: 0; overflow-wrap: anywhere; }
.gallery-case-link span:last-child { color: var(--muted); flex: 0 0 auto; font-family: var(--mono); font-size: 14px; line-height: 1; transition: color .18s ease,transform .18s ease; }
.gallery-case-link:hover span:last-child, .gallery-case-link:focus-visible span:last-child, .gallery-case-link.is-active span:last-child { color: var(--orange); transform: translate(1px,-1px); }
.gallery-contact-link { margin-top: 16px; }
.gallery-case-back { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: 10px; margin: 0 0 14px; padding: 9px 12px; transition: border-color .18s ease,color .18s ease; }
.gallery-case-back:hover { border-color: var(--orange); color: var(--orange); }
.gallery-case-content { border-bottom: 1px solid var(--line); margin-bottom: 18px; padding: 4px 2px 18px; }
.gallery-case-content .mini-label { color: var(--orange); margin: 0 0 8px; }
.gallery-case-content h3 { font-family: var(--cn); font-size: clamp(24px, 3vw, 38px); line-height: 1.2; margin: 0 0 12px; overflow-wrap: anywhere; }
.gallery-case-content>p:last-child { color: var(--muted); font-family: var(--cn); font-size: 14px; line-height: 1.85; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gallery-project-description[hidden] { display: none; }
@media (max-width: 640px) {
  .gallery-overlay, .image-lightbox { width: 100vw; }
  .gallery-panel {
    border-radius: 0;
    bottom: 0;
    left: 50%;
    max-height: none;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
  }
  .gallery-header { flex: 0 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px 12px; }
  .gallery-header .mini-label { margin-bottom: 10px; }
  .gallery-header h2 { font-size: 26px; line-height: 1.2; margin-top: 0; }
  .gallery-header .icon-button { flex: 0 0 40px; height: 40px; width: 40px; }
  .gallery-body {
    display: block;
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 12px max(16px, env(safe-area-inset-bottom));
  }
  .gallery-main { display: block; min-height: 0; }
  .gallery-side { font-size: 13px; line-height: 1.75; overflow: visible; padding: 0 4px 18px; }
  .gallery-meta { margin-top: 12px; padding-top: 8px; }
  .gallery-side .dark-link { margin-top: 12px; }
  .gallery-grid { flex: initial; min-height: auto; overflow: visible; padding: 0; }
  .gallery-grid { gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .gallery-image-button { border-radius: 10px; }
  .gallery-image-zoom { bottom: 8px; font-size: 9px; padding: 7px 9px; right: 8px; }
  .gallery-case-nav { gap: 8px; grid-template-columns: minmax(0, 1fr); margin-top: 12px; padding-top: 12px; }
  .gallery-case-link { min-height: 44px; padding: 8px 11px; }
  .gallery-contact-link { margin-top: 14px; }
  .gallery-case-content { margin-bottom: 12px; padding-bottom: 12px; }
  .gallery-case-content h3 { font-size: 24px; }
  .gallery-case-content>p:last-child { font-size: 13px; }
  .image-lightbox { background: #101010; padding: calc(60px + env(safe-area-inset-top)) 4px max(8px, env(safe-area-inset-bottom)); }
  .image-lightbox-viewport { align-items: flex-start; display: block; }
  .image-lightbox-image { margin: 0 auto; max-height: none; width: 100%; }
  .image-lightbox-toolbar { left: 14px; right: 14px; top: 12px; }
}