:root {
      --navy: #0a2338;
      --navy-soft: #15354f;
      --red: #a3292d;
      --gold: #d2aa62;
      --paper: #f7f5f0;
      --white: #ffffff;
      --muted: #5e6973;
      --line: rgba(10, 35, 56, .14);
      --shadow: 0 14px 38px rgba(10, 35, 56, .13);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--navy);
      background: var(--paper);
      font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.7;
    }

    button, a { font: inherit; }

    a { color: inherit; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 64px;
      padding: 10px clamp(20px, 5vw, 72px);
      color: var(--white);
      background: rgba(10, 35, 56, .96);
      border-bottom: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(12px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .brand-logo-frame {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      overflow: hidden;
      border-radius: 50%;
      background: var(--white);
    }

    .brand-logo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform: scale(1.35);
    }

    .topbar-link {
      color: rgba(255,255,255,.86);
      text-decoration: none;
      font-size: 14px;
    }

    .topbar-link:hover { color: var(--gold); }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
      gap: clamp(28px, 5vw, 72px);
      align-items: center;
      width: min(1420px, 92vw);
      margin: 0 auto;
      padding: clamp(48px, 7vw, 94px) 0 52px;
    }

    .eyebrow {
      margin: 0 0 12px;
      color: var(--red);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-family: Georgia, "Noto Serif TC", "Songti TC", serif;
      font-size: clamp(2.25rem, 4.2vw, 4.2rem);
      font-weight: 500;
      letter-spacing: -.04em;
      line-height: 1.08;
      white-space: nowrap;
    }

    .english-title {
      margin: 18px 0 0;
      color: var(--navy-soft);
      font-family: Georgia, serif;
      font-size: clamp(1rem, 1.45vw, 1.2rem);
      letter-spacing: .01em;
      line-height: 1.45;
      white-space: nowrap;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
      margin: 24px 0 0;
      padding: 18px 0 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
    }

    .hero-image {
      margin: 0;
      padding: 12px;
      background: var(--white);
      box-shadow: var(--shadow);
      transform: rotate(.45deg);
    }

    .hero-image img {
      display: block;
      width: 100%;
      height: auto;
    }

    .intro-wrap {
      color: var(--white);
      background: var(--navy);
    }

    .intro {
      width: min(920px, 88vw);
      margin: 0 auto;
      padding: clamp(44px, 6vw, 76px) 0;
    }

    .intro-copy p {
      margin: 0;
      font-size: clamp(1.05rem, 1.7vw, 1.28rem);
      line-height: 1.9;
    }

    .intro-copy .en {
      margin-top: 18px;
      color: rgba(255,255,255,.72);
      font-family: Georgia, serif;
      font-size: 1rem;
      line-height: 1.75;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 11px 20px;
      border: 1px solid var(--gold);
      border-radius: 999px;
      color: var(--navy);
      background: var(--gold);
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease;
    }

    .button:hover { transform: translateY(-2px); background: #e3c07d; }

    .archive {
      width: min(1500px, 96vw);
      margin: 0 auto;
      padding: clamp(54px, 7vw, 96px) 0 100px;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      width: min(1280px, 92vw);
      margin: 0 auto 28px;
    }

    h2 {
      margin: 0;
      font-family: Georgia, "Noto Serif TC", serif;
      font-size: clamp(2rem, 4vw, 3.6rem);
      font-weight: 500;
      line-height: 1.15;
    }

    .section-note {
      max-width: 460px;
      margin: 0;
      color: var(--muted);
      text-align: right;
      font-size: 14px;
    }

    .gallery {
      columns: 4 280px;
      column-gap: 14px;
    }

    .photo-card {
      position: relative;
      width: 100%;
      margin: 0 0 14px;
      break-inside: avoid;
      overflow: hidden;
      border: 0;
      border-radius: 4px;
      background: var(--white);
      box-shadow: 0 3px 15px rgba(10, 35, 56, .1);
    }

    .photo-card {
      display: block;
      padding: 0;
      cursor: zoom-in;
    }

    .photo-card img {
      display: block;
      width: 100%;
      height: auto;
      transition: transform .35s ease, filter .35s ease;
    }

    .photo-card::after {
      content: attr(data-label);
      position: absolute;
      right: 10px;
      bottom: 9px;
      padding: 3px 8px;
      border-radius: 999px;
      color: var(--white);
      background: rgba(10, 35, 56, .78);
      font-size: 12px;
      opacity: 0;
      transition: opacity .2s ease;
    }

    .photo-card:hover img { transform: scale(1.012); filter: brightness(.92); }
    .photo-card:hover::after, .photo-card:focus-visible::after { opacity: 1; }

    .photo-card:focus-visible,
    .button:focus-visible,
    .lightbox button:focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 3px;
    }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 62px 74px;
      color: var(--white);
      background: rgba(3, 13, 22, .96);
    }

    .lightbox.open { display: flex; }

    .lightbox figure {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      margin: 0;
    }

    .lightbox img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: calc(100vh - 120px);
      object-fit: contain;
      box-shadow: 0 20px 70px rgba(0,0,0,.45);
    }

    .lightbox figcaption { margin-top: 12px; color: rgba(255,255,255,.76); font-size: 14px; }

    .icon-button {
      position: absolute;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 50%;
      color: var(--white);
      background: rgba(10,35,56,.55);
      cursor: pointer;
    }

    .close { top: 14px; right: 16px; font-size: 27px; }
    .previous { left: 14px; font-size: 30px; }
    .next { right: 14px; font-size: 30px; }

    .copyright {
      padding: 36px 20px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      text-align: center;
      font-size: 13px;
    }

    body.lightbox-open { overflow: hidden; }

    @media (max-width: 860px) {
      .hero { grid-template-columns: 1fr; width: min(720px, 90vw); padding-top: 38px; }
      .hero-image { transform: none; }
      .english-title { white-space: normal; }
      .section-head { display: block; }
      .section-note { margin-top: 12px; text-align: left; }
    }

    @media (max-width: 620px) {
      .topbar { min-height: 58px; padding-inline: 16px; }
      .topbar-link { display: none; }
      .hero { width: min(100% - 36px, 560px); padding-bottom: 38px; }
      h1 { font-size: clamp(2rem, 10vw, 3rem); }
      .meta { display: grid; }
      .intro, .section-head { width: min(100% - 36px, 560px); }
      .archive { width: min(100% - 20px, 600px); padding-top: 48px; }
      .gallery { columns: 2 145px; column-gap: 8px; }
      .photo-card { margin-bottom: 8px; }
      .lightbox { padding: 58px 10px 72px; }
      .lightbox img { max-height: calc(100vh - 150px); }
      .previous, .next { top: auto; bottom: 12px; }
      .previous { left: calc(50% - 62px); }
      .next { right: calc(50% - 62px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    }
  
    .topbar {background:#f7f5f0;color:var(--navy);border-bottom:1px solid var(--line);}
    .topbar-link {color:var(--navy);display:block;}
    .brand-subtitle {font-size:11px;letter-spacing:.01em;font-weight:400;display:block;line-height:1.3;}
    .brand-name {font-family:Georgia,serif;font-size:19px;letter-spacing:.13em;display:block;line-height:1.4;}
    .hero-shell {background:var(--navy);color:#fff;}
    .hero {width:min(1440px,100%);padding:0;gap:0;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);}
    .hero-copy {padding:clamp(44px,6vw,86px) clamp(24px,5vw,72px);}
    .hero .eyebrow {color:#d2aa62;letter-spacing:.16em;}
    h1 {font-size:clamp(3rem,5.8vw,5.8rem);line-height:1.12;white-space:normal;letter-spacing:.02em;}
    h1 span {display:block;font-size:clamp(1.65rem,2.8vw,2.65rem);margin-top:12px;line-height:1.35;letter-spacing:.04em;}
    .english-title {color:#e2c98b;white-space:normal;font-size:clamp(1rem,1.8vw,1.4rem);}
    .meta {color:#d3dce3;border-color:rgba(255,255,255,.2);font-size:13px;gap:8px 16px;}
    .hero-note {font-size:15px;color:#d3dce3;margin-top:24px;line-height:1.95;}
    .hero-mosaic {height:100%;min-height:620px;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:#152c3e;padding:18px;align-items:center;}
    .hero-mosaic figure {margin:0;min-width:0;align-self:center;}
    .hero-mosaic figure:first-child {grid-row:1/3;}
    .hero-mosaic img {display:block;width:100%;height:auto;max-height:570px;object-fit:contain;}
    .intro-wrap {background:var(--paper);color:var(--navy);border-bottom:1px solid var(--line);}
    .intro {width:min(1000px,88vw);}
    .intro .eyebrow {font-size:12px;margin-bottom:18px;}
    .intro-copy .en {color:var(--muted);}
    .intro .actions {margin-top:22px;}
    .button.secondary {background:transparent;color:inherit;border-color:currentColor;}
    .hero .button.secondary {color:#fff;border-color:rgba(255,255,255,.5);}
    .archive {padding-top:64px;}
    .filters {display:flex;flex-wrap:wrap;gap:8px;margin:0 auto 26px;width:min(1280px,92vw);}
    .filter {background:#fff;border:1px solid var(--line);color:var(--navy);padding:8px 14px;border-radius:30px;cursor:pointer;}
    .filter[aria-pressed="true"] {background:var(--navy);color:#fff;border-color:var(--navy);}
    .more-wrap {text-align:center;margin:30px 0;}
    .more-wrap button {cursor:pointer;}
    .photo-card img {background:#e8e3d9;}
    .gallery-status {width:min(1280px,92vw);margin:0 auto 20px;font-size:13px;color:var(--muted);}
    .skip-link {position:fixed;left:12px;top:-80px;z-index:200;padding:10px;background:var(--gold);}
    .skip-link:focus {top:10px;}
    @media(max-width:900px){.hero{grid-template-columns:1fr}.hero-copy{padding:44px 6vw 38px}.hero-mosaic{min-height:0;padding:20px 6vw 32px;grid-template-columns:1.1fr 1fr}.hero-mosaic img{max-height:400px}.hero-mosaic figure:first-child{max-width:460px}.hero h1{font-size:clamp(3rem,10vw,4.7rem)}.hero h1 span{font-size:clamp(1.7rem,6vw,2.7rem)}.hero .meta{display:flex}.brand-subtitle{font-size:9px}.brand{gap:8px}.topbar-link{font-size:13px}}
    @media(max-width:480px){.hero-copy{padding-top:38px}.hero .eyebrow{font-size:10px}.brand-logo-frame{width:34px;height:34px}.brand-subtitle{max-width:220px}.brand-name{font-size:17px}.topbar{gap:6px}.intro{padding-block:40px}.intro-copy p{font-size:16px}.button{font-size:13px;padding:10px 15px}.section-head h2{font-size:30px}.filters{width:calc(100% - 20px);gap:6px}.filter{font-size:12px;padding:8px 10px}.hero-note{font-size:14px}.hero-mosaic{padding-top:2px}.hero-mosaic img{max-height:270px}.copyright{font-size:11px}}

[hidden] { display: none !important; }




/* Daily download gallery */
html{scroll-behavior:smooth} [hidden]{display:none!important}
.daily-intro{max-width:1120px;margin:auto;padding:56px 24px 28px}.daily-intro h2{font-size:clamp(28px,4vw,40px);margin:10px 0 14px}.daily-intro p{max-width:740px;line-height:1.9;color:var(--muted)}
.day-grid{max-width:1280px;margin:auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.day-card{display:block;background:white;color:var(--navy);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;transition:transform .2s,border-color .2s}.day-card:hover{transform:translateY(-4px);border-color:var(--gold)}.day-cover{height:185px;background:#e9e4d9;padding:8px}.day-cover img{height:100%;width:100%;object-fit:contain}.day-card-copy{padding:17px 18px 20px}.day-card-copy small{color:var(--muted);display:block;margin-bottom:6px}.day-card-copy strong{display:block;font-size:25px;letter-spacing:.025em}.day-card-copy span{display:block;font-size:13px;margin-top:12px;color:var(--muted)}.day-card[aria-current=true]{outline:2px solid var(--gold);outline-offset:3px}
.curated-entry{max-width:1280px;margin:24px auto 0;padding:0 24px}.curated-entry a{color:var(--navy);font-size:14px;text-underline-offset:4px}
.archive{scroll-margin-top:16px;padding-top:48px}.gallery{columns:4 260px}.photo-entry{break-inside:avoid;margin:0 0 16px;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden}.photo-entry .photo-card{width:100%;margin:0;border:0;border-radius:0;box-shadow:none}.photo-meta{padding:11px 12px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px}.photo-meta span{font-size:12px;letter-spacing:.04em;color:var(--muted)}.download-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.jpg-download{font:inherit;font-size:12px;background:#173448;color:white;border:0;border-radius:5px;padding:7px 10px;cursor:pointer}.jpg-download:disabled{opacity:.65}.photo-download{font-size:12px;font-weight:600;color:var(--navy);padding:6px 9px;border:1px solid var(--line);border-radius:5px;text-decoration:none;white-space:nowrap}.photo-download:hover{background:#f3ede0}
.find-toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;width:min(1280px,92vw);margin:0 auto 20px;flex-wrap:wrap}.find-toolbar label{font-size:13px;color:var(--muted)}.find-toolbar input{border:1px solid var(--line);border-radius:7px;padding:11px 13px;font:inherit;min-width:230px;background:#fff}.original-album{font-size:13px;color:var(--navy);text-underline-offset:4px}.download-help{width:min(1280px,92vw);margin:0 auto 22px;font-size:13px;line-height:1.8;color:var(--muted)}.gallery-status{margin-bottom:18px}.empty-state{padding:40px;text-align:center;color:var(--muted)}
.lightbox figure{width:min(1100px,82vw);max-height:94vh;align-items:center}.lightbox figure img{max-height:73vh}.lightbox figcaption{text-align:center;line-height:1.8}.lightbox-actions{text-align:center;margin-top:12px}.lightbox-download{display:inline-block;background:var(--gold);color:var(--navy);padding:10px 20px;border-radius:5px;font-size:14px;font-weight:600;text-decoration:none}.lightbox-help{font-size:11px;color:#cbd6dd;margin-top:8px}.lightbox .close{top:16px;right:18px}.skip-link{z-index:300}
@media(max-width:900px){.day-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.day-cover{height:175px}.gallery{columns:3 220px}.daily-intro{padding-top:40px}}
@media(max-width:600px){.day-grid{padding:0 16px;gap:12px}.day-cover{height:145px}.day-card-copy{padding:12px}.day-card-copy strong{font-size:23px}.day-card-copy span{font-size:11px;line-height:1.7}.day-card-copy small{font-size:10px}.gallery{columns:2 140px}.photo-meta{padding:8px;flex-direction:column;align-items:stretch;gap:6px}.photo-download{text-align:center;font-size:11px}.photo-meta span{text-align:center;font-size:11px}.daily-intro{padding-inline:20px}.find-toolbar input{min-width:0;width:100%;margin-top:6px}.find-toolbar label{width:100%}.lightbox figure{width:86vw}.lightbox figure img{max-height:68vh}.lightbox .previous{left:3px}.lightbox .next{right:3px}}

.package-hint{font-size:11px;line-height:1.5;color:#6e6d68;margin:0 6px 16px;overflow-wrap:anywhere}.lightbox-help{overflow-wrap:anywhere}