@layer reset,base,layout,components,responsive;
@layer reset {
  * { box-sizing:border-box; }
  body,h1,h2,h3,p,figure,ul { margin:0; }
  button,input,textarea,select { font:inherit; }
  button,a { -webkit-tap-highlight-color:transparent; }
  button { color:inherit; }
  img { display:block; width:100%; height:auto; }
}
@layer base {
  :root { color-scheme:light; --paper:#f8f6f1; --footer:#f2efe8; --ink:#252623; --muted:#66665f; --line:#d1cec6; --accent:#7e9296; --serif:Georgia,'Times New Roman',serif; --sans:Arial,Helvetica,sans-serif; }
  html { background:var(--paper); color:var(--ink); font-family:var(--serif); }
  html:lang(zh) { --serif:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun',serif; --sans:'Microsoft YaHei','PingFang SC',Arial,sans-serif; }
  body { font-size:18px; line-height:1.5; }
  .viewer-open { overflow:hidden; }
  a { color:inherit; text-decoration:none; }
  a:hover { text-decoration:underline; text-underline-offset:5px; }
  button { cursor:pointer; }
  button:disabled { cursor:default; opacity:.45; }
  :focus-visible { outline:2px solid #45646b; outline-offset:5px; }
  h1,h2,h3 { font-weight:400; line-height:1.12; }
  h1,h2 { font-size:clamp(2.3rem,5.5cqw,4.7rem); }
  .eyebrow { font-family:var(--sans); font-size:.8rem; letter-spacing:.14em; }
  .skip-link { position:fixed; top:-100px; left:20px; z-index:100; padding:12px; background:var(--paper); }
  .skip-link:focus { top:10px; }
}
@layer layout {
  /* Keep photographs and typography on one canvas when the browser zooms out. */
  #app { width:100%; max-width:1440px; margin-inline:auto; container-type:inline-size; }
  .site-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:25px 3%; border-bottom:1px solid var(--line); }
  .brand { font-size:clamp(1.1rem,2cqw,1.7rem); line-height:1.2; white-space:nowrap; }
  .brand span { display:block; font-size:.8rem; margin-top:4px; }
  .header-navigation { display:flex; align-items:center; justify-content:flex-end; gap:30px; min-width:0; }
  .language-switch { display:flex; align-items:center; gap:9px; padding-left:20px; border-left:1px solid var(--line); font:.875rem/1.5 var(--sans); white-space:nowrap; }
  .language-switch a { padding-block:7px; color:var(--muted); }
  .language-switch [aria-current] { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
  .language-switch span { color:var(--line); }
  .site-nav { display:flex; flex-wrap:wrap; gap:clamp(14px,2.5cqw,40px); font: .8rem/1.4 var(--sans); text-transform:uppercase; }
  .site-nav a { padding:9px 0; }
  .site-nav [aria-current] { border-bottom:1px solid currentColor; }
  .content-width { width:84%; max-width:1200px; margin-inline:auto; }
  .wide-content { margin-inline:3%; }
  .site-footer { margin-top:72px; padding:38px 0; background:var(--footer); }
  .site-footer a { display:block; width:fit-content; font-size:1.1rem; overflow-wrap:anywhere; }
  .site-footer .eyebrow { margin-bottom:7px; }
  .contact-footer { margin-top:40px; }
  .home-masthead { text-align:center; padding:45px 3% 38px; }
  .home-masthead h1 { font-size:clamp(2.3rem,9.5cqw,8rem); white-space:nowrap; letter-spacing:-.045em; line-height:1; }
  :lang(zh) .home-masthead h1 { letter-spacing:.15em; padding-left:.15em; font-size:clamp(3rem,8.5cqw,7rem); }
  :lang(zh) .home-masthead p { font-style:normal; font-size:clamp(1rem,2cqw,1.6rem); }
  :lang(zh) .home-tagline { letter-spacing:.16em; }
  :lang(zh) .direction { line-height:1.9; }
  :lang(zh) .moments-hero h1 { line-height:1.2; letter-spacing:.12em; }
  .home-masthead p { margin-top:14px; font:italic clamp(1.15rem,2.4cqw,2rem)/1.45 var(--serif); letter-spacing:.035em; color:#66625a; }
  .masthead-rule { width:80px; height:1px; background:#93938d; margin:34px auto 0; }
  .home-photograph { position:relative; }
  .home-tagline { position:absolute; bottom:13%; left:0; right:0; text-align:center; color:var(--paper); font-size:clamp(1.1rem,3.5cqw,3rem); letter-spacing:.14em; }
  .home-nav { display:flex; justify-content:center; gap:7cqw; padding:36px 20px; font-size:clamp(1rem,2cqw,1.5rem); }
  .professional-banner { width:100%; }
  .editorial-section { padding:48px 0; border-bottom:1px solid var(--line); }
  .direction { max-width:1020px; font-size:clamp(1.15rem,2.25cqw,1.85rem); line-height:1.4; color:#555650; margin:25px 0 30px; }
  .cv-link { display:inline-flex; gap:25px; font-size:1.65rem; letter-spacing:.025em; padding:0 0 5px; border-bottom:1px solid currentColor; }
  .work-index { list-style:none; padding:0; margin-top:28px; font-size:clamp(1.4rem,3cqw,2.2rem); }
  .work-index li+li { margin-top:16px; }
  .toolkit-section h2 { font-size:clamp(2.2rem,5cqw,4rem); }
  .toolkit { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin-top:35px; font-size:1.4rem; color:#555650; gap:16px 0; }
  .toolkit li { padding:0 35px; border-left:1px solid var(--muted); line-height:1.1; }
  .toolkit li:first-child { padding-left:0; border:0; }
}
@layer components {
  .moments-hero { position:relative; margin-top:16px; }
  .moments-hero h1 { position:absolute; left:3.6%; bottom:4.2%; color:var(--paper); font-size:clamp(1.6rem,5.3cqw,6rem); line-height:1; }
  .medium-entrances { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; align-items:start; }
  .medium-entrances a { display:block; position:relative; }
  .medium-entrances h2 { position:absolute; bottom:3%; left:3.5%; font-size:clamp(1.7rem,3cqw,3rem); color:var(--paper); }
  .section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:13px; margin:55px 0 22px; }
  .section-heading h2 { font-size:clamp(1.8rem,3cqw,2.7rem); }
  .text-link { font:.8rem/1.5 var(--sans); text-transform:uppercase; color:var(--muted); white-space:nowrap; }
  .photo-gallery { columns:4; column-gap:18px; }
  .photo-link { display:block; width:100%; padding:0; margin:0 0 18px; border:0; background:transparent; break-inside:avoid; }
  .photo-link:hover { outline:1px solid var(--muted); outline-offset:4px; }
  .themes { display:flex; flex-wrap:wrap; gap:13px 30px; font-size:clamp(1.1rem,1.8cqw,1.5rem); }
  .gallery-heading { padding:60px 0 25px; }
  .gallery-heading .eyebrow { margin-top:18px; }
  .gallery-intro { max-width:680px; margin-top:20px; color:var(--muted); }
  .gallery-medium { display:flex; gap:26px; margin-top:25px; font-size:1.2rem; }
  .gallery-medium [aria-current] { border-bottom:1px solid; }
  .filters { display:flex; flex-wrap:wrap; gap:8px 24px; border-block:1px solid var(--line); padding:15px 0; margin:5px 0 28px; font: .875rem/1.5 var(--sans); }
  .filters a { padding:6px 0; }
  .filters [aria-current] { border-bottom:1px solid var(--ink); }
  .empty-gallery { padding:35px 0; color:var(--muted); }
  .photo-dialog { width:100vw; height:100dvh; max-width:none; max-height:none; border:0; margin:0; padding:24px 3%; background:var(--paper); color:var(--ink); }
  .photo-dialog::backdrop { background:var(--paper); }
  .viewer-controls { display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--line); font:.875rem var(--sans); }
  .viewer-controls div { display:flex; align-items:center; gap:20px; }
  .plain-button { background:none; border:0; border-bottom:1px solid transparent; padding:10px 2px; }
  .plain-button:hover { border-bottom-color:currentColor; }
  .viewer-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,25%); gap:4%; height:calc(100% - 73px); padding-top:26px; }
  .viewer-image { display:flex; justify-content:center; align-items:center; min-height:0; }
  .viewer-image img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
  .viewer-meta { overflow:auto; padding-block:15px; }
  .viewer-meta h2 { font-size:2rem; margin-bottom:30px; overflow-wrap:anywhere; }
  .viewer-meta dl { margin:0; }
  .viewer-meta dt { font:.75rem var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:23px; }
  .viewer-meta dd { margin:5px 0 0; font-size:1.1rem; overflow-wrap:anywhere; }
  .places-heading { margin:65px 0 55px; font-size:clamp(2rem,5cqw,4.5rem); }
  .places-layout { display:grid; grid-template-columns:7fr 3fr; align-items:start; gap:35px; }
  .map { width:100%; height:auto; display:block; }
  .country { fill:#e7e4dc; stroke:var(--paper); stroke-width:.65; vector-effect:non-scaling-stroke; cursor:pointer; transition:fill .15s; }
  .country.visited { fill:#8eaaa9; }
  .country:hover,.country.selected { fill:#b1bdbb; }
  .country.visited.selected { fill:#647f82; }
  .country:focus { outline:none; stroke:#354f56; stroke-width:2; }
  .country-panel { border-left:1px solid var(--line); padding-left:30px; min-height:300px; }
  .country-panel h2 { font-size:1.7rem; letter-spacing:.025em; }
  .country-panel .instruction { margin-top:27px; color:var(--muted); font-size:1.2rem; }
  .country-panel .visit { margin-top:30px; }
  .country-panel h3 { font-size:1.6rem; margin-bottom:10px; }
  .country-panel ul { padding:0; list-style:none; }
  .country-panel li { margin:5px 0; }
  .map-tools { display:flex; flex-wrap:wrap; gap:15px 30px; align-items:center; font:.8rem var(--sans); margin-top:20px; color:var(--muted); }
  .map-legend { display:flex; gap:18px; }
  .map-legend span::before { content:''; display:inline-block; width:10px; height:10px; margin-right:7px; background:#e7e4dc; }
  .map-legend span:last-child::before { background:#8eaaa9; }
  .country-picker { display:block; margin:22px 0 0; font: .875rem var(--sans); }
  .country-picker select { display:block; max-width:100%; width:280px; padding:10px; margin-top:8px; background:var(--paper); border:1px solid var(--line); color:var(--ink); }
}
@layer responsive {

  @media(max-width:1000px) { .photo-gallery { columns:3; } .site-header { align-items:flex-start; } .header-navigation { flex-wrap:wrap; gap:10px 25px; } .site-nav { justify-content:flex-end; } .places-layout { gap:20px; } }
  @media(max-width:700px) {
    body { font-size:16px; }
    .site-header { display:grid; grid-template-columns:1fr auto; gap:0; padding:20px 5% 13px; }
    .brand { font-size:1.3rem; }
    .brand span { display:none; }
    .header-navigation { display:contents; }
    .header-navigation .site-nav { grid-column:1/-1; grid-row:2; width:100%; margin-top:14px; }
    .language-switch { grid-column:2; grid-row:1; border-left:0; padding-left:0; margin-left:18px; }
    .site-nav { max-width:none; justify-content:space-between; gap:8px 15px; margin-top:18px; font-size:.75rem; }
    .content-width { width:90%; }
    .wide-content { margin-inline:5%; }
    .home-masthead { padding:34px 4% 26px; }
    .home-masthead h1 { font-size:9.2cqw; letter-spacing:-.045em; }
    .home-masthead p { font-size:clamp(1rem,4.25cqw,1.3rem); letter-spacing:.02em; margin-top:12px; }
    .masthead-rule { width:50px; margin-top:22px; }
    .home-nav { flex-direction:column; align-items:center; gap:20px; padding:35px 5%; font-size:1.3rem; }
    .home-tagline { font-size:4cqw; letter-spacing:.1em; }
    .editorial-section { padding:32px 0; }
    .direction { margin:20px 0 25px; }
    .work-index li+li { margin-top:14px; }
    .toolkit { font-size:1.1rem; margin-top:25px; }
    .toolkit li { padding-inline:18px; }
    .medium-entrances { grid-template-columns:1fr; gap:25px; margin-top:25px; }
    .medium-entrances h2 { font-size:2rem; }
    .moments-hero h1 { font-size:6cqw; }
    .photo-gallery { columns:2; column-gap:12px; }
    .photo-link { margin-bottom:12px; }
    .section-heading { margin-top:38px; }
    .gallery-heading { padding-top:35px; }
    .filters { gap:4px 18px; }
    .viewer-layout { grid-template-columns:1fr; height:auto; gap:25px; }
    .viewer-image img { max-height:65dvh; }
    .viewer-meta { padding-bottom:30px; }
    .viewer-meta dl { display:grid; grid-template-columns:95px 1fr; gap:15px; }
    .viewer-meta dt,.viewer-meta dd { margin:0; }
    .viewer-meta h2 { margin-bottom:25px; }
    .viewer-controls div { gap:15px; }
    .photo-dialog { padding:15px 5%; }
    .places-heading { margin:36px 0; }
    .places-layout { grid-template-columns:1fr; gap:35px; }
    .country-panel { border-left:0; border-top:1px solid var(--line); padding:25px 0 0; min-height:220px; }
    .site-footer { margin-top:45px; }
  }
  @media(prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }
}