:root {
  --paper: #f7f7f3;
  --ink: #111214;
  --muted: #68696b;
  --rule: #c8c9c7;
  --blue: #0a3888;
  --page: min(1380px, calc(100vw - 48px));
  --display: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --reading: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--reading); line-break: strict; word-break: normal; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 30; left: 1rem; top: 1rem; padding: .7rem 1rem; background: var(--ink); color: white; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.topbar { width: var(--page); margin: 0 auto; min-height: 54px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); font-size: .68rem; letter-spacing: .13em; }
.topbar p { margin: 0; color: var(--muted); }
.brand { text-decoration: none; font-weight: 700; }

main, .footer { width: var(--page); margin-inline: auto; }
.hero { border-inline: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.poster { position: relative; min-height: clamp(440px, 55vw, 760px); overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 80% 99%, rgba(10,56,136,.48), transparent 26%), radial-gradient(ellipse at 13% 102%, rgba(10,56,136,.38), transparent 24%), radial-gradient(circle at 72% 70%, rgba(10,56,136,.14), transparent 18%), linear-gradient(180deg, #fafafa, #f3f4f1); }
.poster::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .48; background-image: radial-gradient(circle, rgba(10,56,136,.7) 0 1px, transparent 1.2px), radial-gradient(circle, rgba(17,18,20,.45) 0 1px, transparent 1.2px); background-position: 0 0, 13px 17px; background-size: 23px 23px, 31px 31px; mask-image: linear-gradient(180deg, transparent 6%, rgba(0,0,0,.35) 40%, #000 100%); }
.poster::after { content: ""; position: absolute; z-index: -1; inset: 10% 8% 11%; opacity: .52; background: linear-gradient(90deg, transparent 0 19%, rgba(17,18,20,.48) 19% calc(19% + 1px), transparent calc(19% + 1px) 45%, rgba(10,56,136,.62) 45% calc(45% + 1px), transparent calc(45% + 1px)), linear-gradient(180deg, transparent 0 31%, rgba(10,56,136,.68) 31% calc(31% + 1px), transparent calc(31% + 1px) 66%, rgba(17,18,20,.45) 66% calc(66% + 1px), transparent calc(66% + 1px)), repeating-linear-gradient(145deg, transparent 0 52px, rgba(17,18,20,.22) 53px 54px, transparent 55px 88px); }
.poster-canvas, .poster-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster-canvas { z-index: -2; display: block; }
.poster-grid { z-index: -1; opacity: .24; background-image: linear-gradient(rgba(17,18,20,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.1) 1px, transparent 1px); background-size: 8.75vw 8.75vw; mask-image: linear-gradient(90deg, transparent 5%, #000 28%, #000 82%, transparent 97%); }
.poster-word { position: absolute; inset: 0; pointer-events: none; font-family: var(--display); font-weight: 700; }
.glyph { position: absolute; line-height: .8; filter: contrast(1.06); font-weight: 600; }
.glyph-light { left: 23%; top: 10%; font-size: clamp(12rem, 27vw, 27rem); transform: rotate(-7deg); }
.glyph-think { left: 44%; top: 20%; font-size: clamp(10.5rem, 23vw, 23rem); transform: rotate(4deg); }
.glyph-blue { left: 56%; top: 39%; font-size: clamp(9.5rem, 21vw, 21rem); color: var(--blue); transform: rotate(-13deg); mix-blend-mode: multiply; opacity: .92; }
.poster-kicker { position: absolute; top: 5%; left: 8%; margin: 0; color: var(--blue); font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.poster-vertical { position: absolute; right: 8%; top: 10%; margin: 0; color: var(--blue); font-family: var(--display); font-size: clamp(1rem, 1.45vw, 1.4rem); letter-spacing: .17em; writing-mode: vertical-rl; line-height: 1.5; }
.poster-side { position: absolute; left: 2.2%; top: 8%; bottom: 8%; margin: 0; writing-mode: vertical-rl; font-size: .52rem; letter-spacing: .48em; }

.hero-facts { display: grid; grid-template-columns: 1.45fr .82fr .9fr; align-items: start; gap: 0; padding: 34px 5%; background: rgba(247,247,243,.96); }
.hero-facts > div + div { border-left: 1px solid var(--rule); padding-left: 34px; }
.hero-facts h1 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 3.2vw, 3.45rem); font-weight: 500; letter-spacing: .03em; }
.hero-facts p { margin: .3rem 0; font-size: .8rem; line-height: 1.75; }
.eyebrow, .fact-label { color: var(--blue); font-size: .62rem !important; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.statement { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8%; padding: clamp(64px, 8vw, 118px) 5%; border-bottom: 1px solid var(--rule); }
.statement h2 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 4.2vw, 4.5rem); font-weight: 500; line-height: 1.3; }
.statement p { margin: .3rem 0 0; max-width: 49rem; font-size: .98rem; line-height: 2.05; }

.participants { padding: clamp(48px, 6vw, 84px) 5% clamp(58px, 7vw, 96px); border-bottom: 1px solid var(--rule); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 32px; }
.section-heading h2 { margin: 0; color: var(--blue); font-size: .82rem; letter-spacing: .16em; }
.section-heading p { margin: 0; color: var(--muted); font-size: .72rem; }
.people-field { list-style: none; margin: 0; padding: 28px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 0; row-gap: .25rem; }
.people-field li { min-width: 0; min-height: 2.35rem; padding: .38rem 1rem .38rem 0; display: flex; align-items: center; font-family: var(--display); font-size: 1rem; }
.people-field li:nth-child(5n + 1):not(:first-child) { border-left: 0; }
.people-field a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; border-bottom: 1px solid transparent; }
.people-field a:hover { color: var(--blue); border-color: currentColor; }
.mini-portrait { flex: 0 0 1.42rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; background: radial-gradient(circle at 50% 34%, currentColor 0 14%, transparent 15%), linear-gradient(145deg, transparent 48%, currentColor 49% 56%, transparent 57%); opacity: .7; }
.tone-blue { color: var(--blue); }
.tone-sage { color: #42655c; }
.link-mark { color: var(--blue); font-family: var(--reading); font-size: .72rem; }

.visit-grid { display: grid; grid-template-columns: 1.15fr 1fr .8fr; padding: 32px 5% 64px; }
.visit-grid > div { min-width: 0; padding-right: 34px; }
.visit-grid > div + div { border-left: 1px solid var(--rule); padding-left: 34px; }
.visit-grid h2 { margin: 0 0 1rem; color: var(--blue); font-size: .72rem; letter-spacing: .12em; }
.visit-grid p, .visit-grid dl { margin: .45rem 0; font-size: .78rem; line-height: 1.75; }
.venue-name { font-family: var(--display); font-size: 1.05rem !important; letter-spacing: .07em; }
.visit-grid dl div { display: grid; grid-template-columns: 4.5rem 1fr; }
.visit-grid dt { color: var(--muted); }
.visit-grid dd { margin: 0; }
.footer { display: flex; justify-content: space-between; gap: 2rem; padding: 18px 0 42px; color: var(--muted); font-size: .66rem; }
.footer p { margin: 0; }

@media (max-width: 1024px) {
  :root { --page: min(100vw - 32px, 980px); }
  .poster { min-height: 56vw; }
  .hero-facts { grid-template-columns: 1fr 1fr; }
  .hero-title { grid-column: 1 / -1; margin-bottom: 24px; }
  .hero-facts > .hero-date { border-left: 0; padding-left: 0; }
  .people-field { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .statement { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 620px) {
  :root { --page: 100%; }
  .topbar { width: 100%; padding: 0 15px; min-height: 48px; border-inline: 0; }
  .topbar p { font-size: .58rem; }
  .hero { border-inline: 0; }
  .poster { min-height: 69vh; max-height: 620px; background-position: 50% 50%; }
  .poster-grid { background-size: 22vw 22vw; opacity: .34; }
  .glyph-light { left: 7%; top: 15%; font-size: min(59vw, 14.5rem); }
  .glyph-think { left: 36%; top: 29%; font-size: min(54vw, 13rem); }
  .glyph-blue { left: 51%; top: 48%; font-size: min(48vw, 11.5rem); }
  .poster-kicker { left: 15px; top: 16px; font-size: .6rem; }
  .poster-side { display: none; }
  .poster-vertical { right: 12px; top: 12%; font-size: .92rem; }
  .hero-facts { display: block; padding: 24px 16px 34px; }
  .hero-facts > div + div { border-left: 0; border-top: 1px solid var(--rule); padding: 16px 0 0; margin-top: 16px; }
  .hero-facts h1 { font-size: clamp(1.85rem, 8.2vw, 2.55rem); line-height: 1.25; }
  .statement { padding: 58px 16px 62px; gap: 26px; }
  .statement h2 { font-size: clamp(2.35rem, 12vw, 3.7rem); line-height: 1.22; }
  .statement p { font-size: .9rem; line-height: 1.95; }
  .participants { padding: 45px 16px 58px; }
  .section-heading { display: block; margin-bottom: 20px; }
  .section-heading p { margin-top: .65rem; line-height: 1.7; }
  .people-field { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 20px; }
  .people-field li { min-height: 2.45rem; font-size: .94rem; padding-right: .5rem; }
  .visit-grid { display: block; padding: 0 16px 44px; }
  .visit-grid > div { padding: 25px 0; border-top: 1px solid var(--rule); }
  .visit-grid > div + div { border-left: 0; padding-left: 0; }
  .footer { padding: 20px 16px 34px; display: block; line-height: 1.7; }
  .footer a { display: inline-block; margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .poster-canvas, .poster-grid { display: none; }
  .poster { border-bottom: 1px solid CanvasText; }
}