:root {
  color-scheme: light;
  --black: #111111;
  --white: #ffffff;
  --line: #d8d8d8;
  --muted: #5f5f5f;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--black); }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--black); outline-offset: 5px; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 20; padding: 12px 16px; background: var(--black); color: var(--white); }
.skip-link:focus { top: 12px; }
.page-wrap { padding-left: clamp(24px, 6.2vw, 100px); padding-right: clamp(24px, 6.2vw, 100px); }

.site-header { min-height: 104px; display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(24px, 6.2vw, 100px); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 13px; font-weight: 900; font-size: 16px; line-height: .88; letter-spacing: -.075em; text-decoration: none; }
#wordmark-symbol{ height: 50px; }
.wordmark-period, .footer-name span { color: #8b8b8b; }
.header-right { display: flex; align-items: center; gap: clamp(25px, 5vw, 86px); font-size: 13px; }
.header-affiliation { color: var(--muted); }
.header-link { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; font-weight: bold; }
.header-link span { margin-left: 12px; }

.hero { position: relative; min-height: min(780px, calc(100svh - 104px)); display: flex; flex-direction: column; justify-content: space-between; padding-top: 31px; padding-bottom: 48px; overflow: hidden; }
.hero-topline { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; letter-spacing: .13em; font-weight: 700; }
.hero h1 { margin: 55px 0 40px; font-size: clamp(68px, 10.5vw, 172px); line-height: .88; letter-spacing: -.085em; font-weight: 800; }
.hero h1 em { font-family: Georgia, 'Times New Roman', serif; letter-spacing: -.075em; font-weight: 400; }
.hero-bottom { width: 100%; display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.hero-bottom p { max-width: 560px; margin: 0; font-size: clamp(18px, 1.75vw, 24px); line-height: 1.4; letter-spacing: -.035em; }
.text-link { flex-shrink: 0; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 7px; }
.text-link span { margin-left: 25px; }
.hero-index { position: absolute; right: 40px; top: 50%; transform: translateY(-50%) rotate(90deg); color: #777; font-size: 10px; letter-spacing: .1em; }

.intro, .offerings, .event { border-top: 1px solid var(--black); display: grid; grid-template-columns: minmax(160px, 29%) 1fr; gap: 36px; padding-top: 46px; padding-bottom: 130px; }
.section-label { display: flex; gap: 28px; padding-top: 7px; font-size: 12px; font-weight: bold; letter-spacing: .09em; }
.section-label span:first-child { color: #777; }
.intro-content { max-width: 810px; }
h2 { margin: 0; font-size: clamp(42px, 5vw, 76px); line-height: 1.03; letter-spacing: -.065em; font-weight: 700; }
.intro-content p { max-width: 700px; margin: 34px 0 0; font-size: clamp(19px, 2vw, 27px); line-height: 1.45; letter-spacing: -.035em; }
.intro-content p + p { margin-top: 20px; color: var(--muted); }
.offerings { padding-bottom: 100px; }
.offerings-content { min-width: 0; }
.offering-list { margin-top: 58px; }
.offering { border-top: 1px solid var(--line); display: grid; grid-template-columns: 45px minmax(180px, 1fr) minmax(190px, .8fr); align-items: baseline; gap: 18px; padding: 27px 0 31px; }
.offering:last-child { border-bottom: 1px solid var(--line); }
.offering-number { color: var(--muted); font-size: 13px; }
.offering h3 { font-size: clamp(21px, 2.1vw, 30px); letter-spacing: -.045em; font-weight: 600; margin: 0; }
.offering p { font-size: 16px; line-height: 1.45; color: var(--muted); margin: 0; }
.event { padding-bottom: 120px; }
.event-content { display: grid; grid-template-columns: 1fr minmax(230px, .7fr); gap: clamp(30px, 7vw, 120px); }
.event-content p { max-width: 490px; font-size: 20px; line-height: 1.5; margin: 28px 0 34px; }
.button-link { display: inline-flex; justify-content: space-between; gap: 36px; align-items: center; padding: 16px 18px; min-width: 185px; background: var(--black); color: var(--white); font-size: 14px; font-weight: bold; text-decoration: none; transition: background .2s ease; }
.button-link:hover { background: #404040; }
.button-link:focus-visible { outline-color: var(--black); }
.event-details { border-top: 1px solid var(--black); }
.event-details div { display: flex; justify-content: space-between; gap: 20px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.event-details span { font-size: 11px; font-weight: bold; letter-spacing: .1em; padding-top: 3px; }
.event-details strong { font-size: 17px; font-weight: 500; text-align: right; }
.site-footer { background: var(--black); color: var(--white); min-height: 280px; padding-top: 43px; padding-bottom: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.footer-name { font-weight: 800; font-size: clamp(38px, 6vw, 80px); line-height: 1; letter-spacing: -.07em; }
.footer-meta { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }
.footer-meta span { color: #aeaeae; }
.footer-meta a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

@media (max-width: 900px) {
  .hero { min-height: 650px; }
  .hero-index { display: none; }
  .intro, .offerings, .event { grid-template-columns: 1fr; gap: 42px; }
  .offering { grid-template-columns: 30px 1fr; }
  .offering p { grid-column: 2; }
  .event-content { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .site-header { min-height: 82px; }
  .header-affiliation, .hero-topline span:last-child { display: none; }
  .wordmark { font-size: 14px; }
  #wordmark-symbol { width: 32px; height: 32px; border-width: 6px; }
  .hero { min-height: min(700px, calc(100svh - 82px)); padding-top: 25px; padding-bottom: 42px; }
  .hero h1 { font-size: clamp(45px, 12.5vw, 86px); margin: 55px 0 50px; }
  .hero-bottom { display: block; }
  .hero-bottom p { margin-bottom: 38px; }
  .intro, .offerings, .event { padding-top: 28px; padding-bottom: 85px; }
  .section-label { gap: 20px; }
  .intro-content p { margin-top: 26px; }
  .offering-list { margin-top: 36px; }
  .offering { padding: 24px 0; }
  .site-footer { min-height: 240px; }
  .footer-meta { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } .button-link { transition: none; } }