:root {
  color-scheme: light;
  --paper: #faf9f5;
  --ink: #152238;
  --muted: #536073;
  --line: #deddd5;
  --yellow: #ffff00;
  font: 16px/1.55 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 2px solid #365a9d; outline-offset: 4px; }
.wrap { width: min(100% - 3rem, 77.5rem); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner, .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.4rem; padding-block: .65rem; }
.brand { display: inline-flex; gap: .6rem; align-items: center; text-decoration: none; font-weight: 800; line-height: 1.2; }
.brand small { display: block; color: var(--muted); font-size: .7rem; margin-top: .15rem; }
nav, .footer-inner > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(.65rem, 2.4vw, 1.9rem); }
nav a, footer a { font-size: .88rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
nav a:hover, footer a:hover, summary:hover { text-decoration: underline; text-underline-offset: 4px; }
nav .committee { color: var(--muted); font-size: .81rem; }
.hero { padding-top: clamp(1.6rem, 3vw, 3rem); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16.5rem) auto; gap: .85rem 1.4rem; align-items: end; margin-bottom: 1.35rem; }
h1 { font-size: clamp(2.12rem, 5.45vw, 5rem); font-weight: 780; letter-spacing: -.065em; line-height: 1.07; overflow-wrap: anywhere; }
.association { color: var(--muted); line-height: 1.4; font-size: .9rem; }
.motto { font-size: .84rem; font-weight: 700; margin-top: .27rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; width: max-content; max-width: 100%; gap: .8rem; min-height: 44px; background: var(--yellow); font-weight: 720; font-size: .85rem; padding: .5rem .8rem; border-radius: 100px; text-decoration: none; }
.button:hover { background: #efef00; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 2.44; object-fit: cover; object-position: 50% 69%; display: block; border-radius: 16px; }
.hero-photo figcaption { font-size: .74rem; color: var(--muted); margin-top: .45rem; }
.section { padding-block: clamp(1.6rem, 3.6vw, 3.6rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2.55rem); line-height: 1.14; margin-bottom: .8rem; letter-spacing: -.045em; }
h2 small { font-size: .46em; color: var(--muted); letter-spacing: .04em; margin-left: .35rem; white-space: nowrap; }
.hotline { padding-top: clamp(1.35rem, 2.5vw, 2.35rem); }
.hotline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.75rem; }
.hotline-grid a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .05rem .7rem; align-items: center; border-block-start: 1px solid var(--line); padding: .65rem 0; text-decoration: none; }
.hotline-grid a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.hotline-grid i { grid-area: 1 / 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #efeee6; }
.hotline-grid a span { grid-column: 2; font-size: .85rem; font-weight: 650; }
.hotline-grid a small, .download-grid span { color: var(--muted); font-size: .74rem; }
.hotline-grid a strong { grid-column: 2; font-variant-numeric: tabular-nums; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.18; }
.about { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.1rem, 4vw, 3.3rem); }
.about > img { width: 100%; display: block; border-radius: 14px; }
.count { display: flex; gap: .5rem; align-items: baseline; margin: .8rem 0; }
.count strong { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.history p + p { margin-top: .7rem; }
details { border-bottom: 1px solid var(--line); }
summary { padding: .65rem .15rem; cursor: pointer; font-weight: 680; }
summary span { color: var(--muted); font-size: .78rem; margin-left: .35rem; }
.archive { background: #f1f0ea; }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .1rem 1rem; }
.text-link { font-weight: 700; font-size: .87rem; text-underline-offset: 4px; }
.highlights, .gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; }
.highlights img, .gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 10px; }
.highlights figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .55rem; padding-top: .4rem; font-size: .85rem; }
.highlights time, .gallery figcaption { color: var(--muted); font-size: .77rem; }
.gallery-archive { margin-top: 1.6rem; }
.gallery-archive h3 { margin-bottom: .4rem; }
.gallery-archive details:first-of-type { border-top: 1px solid var(--line); }
.gallery { padding-bottom: .7rem; }
.gallery figcaption { padding-top: .35rem; }
.videos { display: flex; flex-wrap: wrap; gap: .4rem 1.35rem; margin-top: 1rem; font-size: .86rem; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.download-grid a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 0; border-block: 1px solid var(--line); text-decoration: none; font-weight: 680; }
.download-grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.affiliates { padding-top: 0; }
.affiliate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: .55rem; padding-bottom: .8rem; }
.affiliate-grid a { display: grid; place-items: center; padding: .35rem; }
.affiliate-grid img { width: 100%; height: 82px; object-fit: contain; }
footer { border-top: 1px solid var(--line); }
@media (max-width: 60rem) {
  .hero-copy { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-copy h1 { grid-column: 1 / -1; }
}
@media (max-width: 42rem) {
  .wrap { width: calc(100% - 2rem); }
  .hero-copy { grid-template-columns: 1fr; gap: .65rem; margin-bottom: .9rem; }
  .hero-photo img { aspect-ratio: 16 / 9; border-radius: 11px; }
  .hotline-grid { grid-template-columns: 1fr; }
  .hotline-grid a { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; }
  .hotline-grid i { grid-area: 1 / 1; width: 34px; height: 34px; }
  .hotline-grid a strong { grid-column: 3; }
  .about { grid-template-columns: 1fr; }
  .about > img { order: 2; }
  .highlights, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  nav a { font-size: .78rem; }
}
@media (max-width: 25rem) {
  .hotline-grid small { display: block; }
  .download-grid { grid-template-columns: 1fr; }
  .download-grid a + a { border-top: 0; }
}