/* PHPerKaigi 2027 top page
 * Desktop: calc(1 * var(--u)) = 1px of the 793px reference, scaled to the viewport.
 * Mobile (<768px): calc(1 * var(--u)) = 1px of a 390px layout.
 * Coordinates in comments are reference-image pixels.
 */
:root {
  /* calc(1 * var(--u)) = 1px of the 793px reference at the current width. JS refines this with
     the real content width (100vw includes the scrollbar). */
  --u: calc(100vw / 793);
  --u: calc(var(--vw, 100vw) / 793);
  --c-cyan: #0aaeef;
  --c-cyan-2: #1d9fe2;
  --c-blue: #0a6db8;
  --c-sub: #2ea8dd;
  --c-pin: #0279c3;
  --c-navy: #0d2f5a;
  --c-navy-2: #0b4d7b;
  --c-ink: #3b4a63;
  --c-gray: #5a6880;
  --c-line: #dbe8f1;
  --c-red: #ed485b;
  --c-teal: #0f6c96;
  --c-foot: #075f86;
  --c-page: #f7fcfe;
  --f-ja: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-en: "Montserrat", "Noto Sans JP", sans-serif;
  --f-hand: "Yomogi", "Noto Sans JP", cursive;
}
@media (max-width: 767.98px) {
  :root { --u: calc(var(--vw, 100vw) / 390); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--f-ja);
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd, p, h1, h2, h3, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
small { font-size: inherit; }
.ico { width: 1em; height: 1em; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 100; background: #fff; color: var(--c-navy); padding: 8px 14px; border-radius: 6px; font-weight: 700; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid #ff8a00; outline-offset: 2px; border-radius: 4px; }

/* width-relative unit from the page box (excludes the scrollbar, no 1600px cap) */
.page { position: relative; background: var(--c-page); }
main, .page > * { position: relative; }
main > * { position: relative; display: flow-root; }

/* section plates: decorative backgrounds cut from the reference */
.hero, .cta, .news, .about, .access, .schedule, .sponsors, .staff, .site-footer {
  background: var(--c-page) no-repeat center top / 100% auto;
}
.hero { background-image: url(../img/bg-hero.webp); height: calc(478 * var(--u)); }
.cta { background-image: url(../img/bg-cta.webp); height: calc(84 * var(--u)); z-index: 2; }
.news { background-image: url(../img/bg-news.webp); background-size: 100% 100%; min-height: calc(88 * var(--u)); }
.about { background-image: url(../img/bg-about.webp); height: calc(286 * var(--u)); }
.access { background-image: url(../img/bg-access.webp); height: calc(210 * var(--u)); }
.schedule { background-image: url(../img/bg-schedule.webp); height: calc(216 * var(--u)); }
.sponsors { background-image: url(../img/bg-sponsors.webp); background-size: 100% 100%; min-height: calc(264 * var(--u)); }
@media (min-width: 768px) { .sponsors .tiers { padding-bottom: 0; } }
.staff { background-image: url(../img/bg-staff.webp); background-size: 100% 100%; min-height: calc(170 * var(--u)); }
.site-footer { background-image: url(../img/bg-footer.webp); background-color: var(--c-foot); height: calc(187 * var(--u)); overflow: hidden; }

/* draft copy highlighting (?draft) */
.show-drafts [data-draft] { outline: 1.5px dashed #f07; outline-offset: 2px; }

/* ---------- shared parts ---------- */
.sec-head { position: absolute; z-index: 3; left: calc(33 * var(--u)); padding-left: calc(22 * var(--u)); }
.sec-head::before { /* pin line */
  content: ""; position: absolute; left: calc(1.6 * var(--u)); top: 0; width: calc(1.3 * var(--u)); height: calc(37 * var(--u));
  background: linear-gradient(var(--c-pin), rgba(2, 121, 195, .25));
}
.sec-head::after { content: ""; position: absolute; left: 0; top: calc(-2 * var(--u)); width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); border-radius: 50%; background: var(--c-pin); }
.sec-head__en { font: 800 calc(14.8 * var(--u))/1 var(--f-en); color: var(--c-blue); letter-spacing: .03em; }
.sec-head__ja { margin-top: calc(6.5 * var(--u)); font: 700 calc(8.4 * var(--u))/1 var(--f-ja); color: var(--c-sub); letter-spacing: .12em; }

.pill {
  position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: calc(13 * var(--u));
  height: calc(29 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(20 * var(--u)); border-radius: 99px;
  border: 1px solid #39aee0; background: rgba(255, 255, 255, .85);
  color: var(--c-navy); font: 700 calc(9 * var(--u))/1 var(--f-ja); letter-spacing: .02em; white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.pill .ico { width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--c-cyan-2); transition: transform .2s; }
.pill:hover { background: #e9f8ff; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(10, 120, 190, .18); }
.pill:hover .ico { transform: translateX(calc(3 * var(--u))); }
.pill:active { transform: translateY(1px); }

.tlink {
  display: inline-flex; align-items: center; gap: calc(9 * var(--u)); padding-bottom: calc(3 * var(--u));
  border-bottom: 1px solid #a9c9e0; color: var(--c-navy); font: 700 calc(8.6 * var(--u))/1 var(--f-ja); letter-spacing: .04em; white-space: nowrap;
}
.tlink .ico { width: calc(10 * var(--u)); height: calc(10 * var(--u)); transition: transform .2s; }
.tlink:hover { color: var(--c-cyan-2); border-color: currentColor; }
.tlink:hover .ico { transform: translateX(calc(3 * var(--u))); }

.date { font: 500 calc(15 * var(--u))/1 var(--f-en); letter-spacing: .01em; color: #0a2550; white-space: nowrap; }
.date small { margin-left: calc(5 * var(--u)); font-size: .56em; font-weight: 600; letter-spacing: .04em; }
.date-sep { margin: 0 calc(7 * var(--u)) 0 calc(8 * var(--u)); color: #0a2550; font: 400 calc(14 * var(--u))/1 var(--f-en); }

/* ---------- header ---------- */
.site-header { position: absolute; z-index: 10; left: 0; right: 0; top: 0; height: calc(60 * var(--u)); }
.site-header__logo { position: absolute; left: calc(31 * var(--u)); top: calc(6 * var(--u)); }
.site-header__logo img { height: calc(48 * var(--u)); width: auto; }
.menu-btn { display: none; }
.gnav { position: absolute; left: calc(474 * var(--u)); top: calc(21 * var(--u)); display: flex; align-items: center; }
.gnav__list { display: flex; gap: 0; }
.gnav__list a {
  display: block; padding: calc(4 * var(--u)) 0; margin-right: calc(18 * var(--u)); position: relative;
  font: 700 calc(8.2 * var(--u))/1 var(--f-en); letter-spacing: .03em; color: #183f69;
}
.gnav__list li:nth-child(2) a { margin-right: calc(17.5 * var(--u)); }
.gnav__list li:last-child a { margin-right: calc(21 * var(--u)); }
.gnav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(1.2 * var(--u)); background: var(--c-cyan); transform: scaleX(0); transition: transform .2s; transform-origin: left; }
.gnav__list a:hover::after { transform: scaleX(1); }
.gnav__social { display: flex; align-items: center; gap: 0; }
.sns { display: grid; place-items: center; color: #11294d; transition: color .2s, transform .2s; }
.sns:hover { color: var(--c-cyan-2); transform: translateY(-1px); }
.sns--x .ico { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.sns--youtube { margin-left: calc(21 * var(--u)); }
.sns--youtube .ico { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.sns--github { margin-left: calc(17 * var(--u)); }
.sns--github .ico { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* ---------- hero ---------- */
.hero__art { position: absolute; left: calc(330 * var(--u)); top: 0; width: calc(463 * var(--u)); height: calc(478 * var(--u)); }
/* official logo laid over the logo drawn inside the illustrations */
.art-logo { position: absolute; display: grid; place-items: center; }
.art-logo img { width: 100%; height: auto; }
.art-logo--banner { left: calc(206 * var(--u)); top: calc(199 * var(--u)); width: calc(68 * var(--u)); height: calc(73 * var(--u)); padding: calc(3 * var(--u)) calc(2 * var(--u)); background: #eaf3fb; box-shadow: 0 0 calc(3 * var(--u)) calc(3 * var(--u)) #eaf3fb; border-radius: calc(4 * var(--u)); }
.art-logo--screen { left: calc(86 * var(--u)); top: calc(53 * var(--u)); width: calc(46 * var(--u)); height: calc(54 * var(--u)); padding: calc(2 * var(--u)); background: #cfeafa; box-shadow: 0 0 calc(3 * var(--u)) calc(3 * var(--u)) #cfeafa; border-radius: calc(3 * var(--u)); }
.art-logo--screen img { filter: blur(.25px) saturate(.9); opacity: .92; }
.hero__copy { position: absolute; inset: 0; pointer-events: none; }
.hero__copy > * { pointer-events: auto; }
.hero__logo { position: absolute; left: calc(63 * var(--u)); top: calc(96 * var(--u)); }
.hero__logo img { width: calc(187 * var(--u)); height: auto; }
.hero__catch {
  position: absolute; left: calc(37 * var(--u)); top: calc(314 * var(--u)); white-space: nowrap;
  font: 900 calc(33 * var(--u))/1.2 var(--f-ja); letter-spacing: .03em; color: var(--c-navy-2);
}
.hero__lead {
  position: absolute; left: calc(40 * var(--u)); top: calc(362 * var(--u)); white-space: nowrap;
  font: 700 calc(15.5 * var(--u))/1.2 var(--f-ja); letter-spacing: .1em; color: #0e3a68;
}
.hero__meta { position: absolute; left: calc(36 * var(--u)); top: calc(393 * var(--u)); width: calc(296 * var(--u)); border-top: 1px solid #b8dcf0; padding-top: calc(15 * var(--u)); }
.hero__meta-row { display: flex; align-items: center; gap: calc(13 * var(--u)); }
.hero__meta-row dt { color: var(--c-cyan-2); display: grid; place-items: center; width: calc(14 * var(--u)); margin-left: calc(6 * var(--u)); }
.hero__meta-row--date dt .ico { width: calc(13.5 * var(--u)); height: calc(13.5 * var(--u)); }
.hero__meta-row--date .date { font-size: calc(16.6 * var(--u)); }
.hero__meta-row--date .date-sep { font-size: calc(15 * var(--u)); }
.hero__meta-row--venue { margin-top: calc(8 * var(--u)); }
.hero__meta-row--venue dt .ico { width: calc(11.5 * var(--u)); height: calc(13 * var(--u)); }
.hero__meta-row--venue dd { font: 700 calc(9.5 * var(--u))/1.4 var(--f-ja); color: #2a4a70; letter-spacing: .03em; }

/* ---------- CTA ribbons (2–6) ---------- */
.cta__list {
  position: absolute; left: calc(33 * var(--u)); right: calc(28 * var(--u)); top: calc(3 * var(--u)); display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: calc(15 * var(--u));
}
.cta-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0;
  height: calc(67 * var(--u)); padding: calc(11 * var(--u)) calc(6 * var(--u)) 0 calc(34 * var(--u)); color: #fff; isolation: isolate;
  transition: transform .2s, filter .2s;
}
.cta-btn__body, .cta-btn__tab { position: absolute; z-index: -1; pointer-events: none; }
.cta-btn__body {
  left: 0; right: 0; top: calc(11 * var(--u)); bottom: 0; border-radius: calc(9 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  background: var(--body-bg); box-shadow: 0 calc(5 * var(--u)) calc(14 * var(--u)) var(--shadow, rgba(0, 120, 190, .18));
  overflow: hidden;
}
.cta-btn__body::before { /* folded diagonal on the left */
  content: ""; position: absolute; inset: 0; background: var(--fold-bg);
  clip-path: polygon(0 0, 31% 0, 0 88%);
}
.cta-btn__body::after { /* soft gloss */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 calc(3 * var(--u)), rgba(255, 255, 255, 0) calc(3 * var(--u)) calc(7 * var(--u)));
}
.cta-btn__tab {
  left: 0; top: 0; width: calc(74 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(11 * var(--u)) calc(20 * var(--u)) 0 0;
  background: var(--tab-bg); box-shadow: 0 -1px 0 rgba(255, 255, 255, .25) inset;
}
.cta-btn__num { position: absolute; left: calc(16 * var(--u)); top: calc(14 * var(--u)); font: 500 calc(14.5 * var(--u))/1 var(--f-en); letter-spacing: .02em; color: var(--num, #fff); }
.cta-btn__icon { width: calc(27 * var(--u)); height: calc(27 * var(--u)); margin-right: calc(17 * var(--u)); color: var(--icon, #fff); }
.cta-btn__label { font: 900 calc(18.6 * var(--u))/1 var(--f-ja); font-feature-settings: "palt" 1; letter-spacing: .03em; white-space: nowrap; color: var(--label, #fff); }
.cta-btn__arrow { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: calc(20 * var(--u)); color: var(--arrow, #fff); transition: transform .2s; }
.cta-btn:hover { transform: translateY(calc(-2 * var(--u))); filter: brightness(1.05) saturate(1.05); }
.cta-btn:hover .cta-btn__arrow { transform: translateX(calc(4 * var(--u))); }
.cta-btn:active { transform: translateY(0); }
.cta-btn:focus-visible { outline-offset: 4px; border-radius: calc(12 * var(--u)); }

.cta-btn--cyan { --body-bg: linear-gradient(180deg, #19b8f2 0%, #06abed 55%, #0aa6ea 100%); --fold-bg: linear-gradient(200deg, #3cc6f5 40%, #1cb2ef); --tab-bg: linear-gradient(180deg, #38c3f4, #22b7f1); }
.cta-btn--white { --body-bg: linear-gradient(180deg, #ffffff 0%, #f1f9fd 60%, #e9f5fc 100%); --fold-bg: linear-gradient(200deg, #ffffff 30%, #d6edf9); --tab-bg: linear-gradient(180deg, #f9fdff, #eef8fd); --shadow: rgba(60, 140, 200, .16); --num: #1d9fe2; --icon: #1171b3; --label: #12395f; --arrow: #1d7fc4; }
.cta-btn--white .cta-btn__body { border: 1px solid rgba(255, 255, 255, .9); }
.cta-btn--teal { --body-bg: linear-gradient(180deg, #13739e 0%, #0f6a95 55%, #0c6590 100%); --fold-bg: linear-gradient(200deg, #0d9fdd 35%, #0b7fb6); --tab-bg: linear-gradient(180deg, #12a8e8, #0a9ad9); --shadow: rgba(5, 70, 110, .25); --icon-accent: #3ec0f2; }
.cta-btn--navy { --body-bg: linear-gradient(100deg, #12345f, #1b4a7d); --fold-bg: linear-gradient(160deg, #2a5f95, #12345f); --tab-bg: #2a6aa8; }
.cta-btn--sky { --body-bg: linear-gradient(100deg, #6ccdf5, #8fdaf8); --fold-bg: linear-gradient(160deg, #a5e3fa, #5ac4f0); --tab-bg: #a5e3fa; --label: #0d3a64; --icon: #0d6fb0; --arrow: #0d3a64; --num: #0d6fb0; }
.cta-btn--mint { --body-bg: linear-gradient(100deg, #17b6b1, #2cc6be); --fold-bg: linear-gradient(160deg, #4fd6cf, #14a5a0); --tab-bg: #4fd6cf; }
.cta--many { height: auto; min-height: calc(84 * var(--u)); padding-bottom: calc(12 * var(--u)); }
.cta--many .cta__list { position: relative; left: auto; right: auto; top: auto; margin: calc(3 * var(--u)) calc(28 * var(--u)) 0 calc(33 * var(--u)); gap: calc(12 * var(--u)); }
.cta--n5 .cta__list, .cta--n6 .cta__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cta--many .cta-btn { padding-left: calc(24 * var(--u)); }
.cta--many .cta-btn__icon { width: calc(21 * var(--u)); height: calc(21 * var(--u)); margin-right: calc(10 * var(--u)); }
.cta--many .cta-btn__label { font-size: calc(14.5 * var(--u)); }
.cta--many .cta-btn__arrow { margin-left: calc(12 * var(--u)); }
.cta--n4 .cta-btn__icon { display: none; }

/* ---------- NEWS ---------- */
.news .sec-head { top: calc(24 * var(--u)); }
.news__list { margin: calc(22 * var(--u)) calc(153 * var(--u)) 0 calc(150 * var(--u)); padding-bottom: calc(6 * var(--u)); border-top: 1px solid var(--c-line); max-width: calc(490 * var(--u)); }
.news__item { border-bottom: 1px solid var(--c-line); }
.news__item a { display: flex; align-items: center; min-height: calc(28.6 * var(--u)); padding: 0 calc(10 * var(--u)); gap: 0; transition: background-color .2s, color .2s; }
.news__item time { flex: none; width: calc(73 * var(--u)); font: 500 calc(8.8 * var(--u))/1 var(--f-en); color: #4c5d78; letter-spacing: .02em; }
.news__item span { font: 400 calc(9.5 * var(--u))/1.4 var(--f-ja); color: #2f3d55; letter-spacing: .03em; }
.news__item a:hover { background: rgba(10, 174, 239, .06); }
.news__item a:hover span { color: var(--c-cyan-2); }
.news__all { position: absolute; left: calc(692 * var(--u)); top: calc(45.5 * var(--u)); }

/* ---------- ABOUT ---------- */
.about .sec-head { top: calc(39.5 * var(--u)); }
.about__text { position: absolute; left: calc(34 * var(--u)); top: 0; }
.about__catch { position: absolute; left: 0; top: calc(88 * var(--u)); white-space: nowrap; font: 700 calc(23.6 * var(--u))/1.2 var(--f-ja); letter-spacing: .035em; color: var(--c-navy); }
.about__body { position: absolute; left: calc(2 * var(--u)); top: calc(125.5 * var(--u)); white-space: nowrap; font: 400 calc(10 * var(--u))/calc(17.3 * var(--u)) var(--f-ja); letter-spacing: .025em; color: #4d586d; }
.about__body span { display: block; }
.about__more.pill { left: calc(1 * var(--u)); top: calc(209 * var(--u)); width: calc(147 * var(--u)); height: calc(30 * var(--u)); }
.about__photo { position: absolute; left: calc(300 * var(--u)); top: calc(8 * var(--u)); width: calc(240 * var(--u)); height: calc(270 * var(--u)); }
.facts {
  position: absolute; left: calc(537 * var(--u)); top: calc(80 * var(--u)); width: calc(236 * var(--u)); height: calc(199 * var(--u)); padding: calc(15 * var(--u)) calc(12 * var(--u)) 0 calc(21 * var(--u));
  background: rgba(255, 255, 255, .95); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(40, 120, 180, .10), inset 0 0 0 1px rgba(210, 232, 245, .8);
}
.facts__title { display: flex; align-items: center; gap: calc(7 * var(--u)); font: 700 calc(9.4 * var(--u))/1 var(--f-ja); color: var(--c-navy); letter-spacing: .06em; }
.facts__title .ico { width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: var(--c-cyan-2); }
.facts dl { margin-top: calc(11 * var(--u)); border-top: 1px solid var(--c-line); }
.facts__row { display: flex; align-items: center; min-height: calc(37 * var(--u)); border-bottom: 1px solid var(--c-line); }
.facts__row:last-child { border-bottom: 0; min-height: calc(42 * var(--u)); }
.facts__row dt { flex: none; width: calc(66 * var(--u)); display: flex; align-items: center; gap: calc(9 * var(--u)); white-space: nowrap; font: 500 calc(7.2 * var(--u))/1 var(--f-ja); color: #56657c; }
.facts__row dt .ico { width: calc(16.5 * var(--u)); height: calc(16.5 * var(--u)); color: var(--c-cyan-2); }
.facts__row dd { font: 500 calc(8.7 * var(--u))/1.45 var(--f-ja); color: #1d3457; }
.facts .date { font-size: calc(9.4 * var(--u)); }
.facts .date small { margin-left: calc(3 * var(--u)); }
.facts .date-sep { font-size: calc(9 * var(--u)); margin: 0 calc(4 * var(--u)); }
.facts__row:first-child dd { white-space: nowrap; }

/* ---------- ACCESS ---------- */
.access .sec-head { top: calc(14 * var(--u)); }
.acc {
  position: absolute; background: rgba(255, 255, 255, .93);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(40, 120, 180, .09), inset 0 0 0 1px rgba(214, 233, 245, .9);
}
.acc--onsite { left: calc(90 * var(--u)); top: calc(7 * var(--u)); width: calc(411 * var(--u)); height: calc(197 * var(--u)); border-radius: calc(88 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u)) / calc(128 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u)); }
.acc--online { left: calc(511 * var(--u)); top: calc(7 * var(--u)); width: calc(257 * var(--u)); height: calc(195 * var(--u)); border-radius: calc(18 * var(--u)); overflow: hidden; }
.acc__body { position: absolute; }
.acc--onsite .acc__body { left: calc(29 * var(--u)); top: calc(20 * var(--u)); width: calc(200 * var(--u)); }
.acc--online .acc__body { left: calc(20 * var(--u)); top: calc(22 * var(--u)); width: calc(180 * var(--u)); }
.acc__title { display: flex; align-items: center; gap: calc(20 * var(--u)); font: 700 calc(14 * var(--u))/1 var(--f-ja); color: var(--c-cyan-2); letter-spacing: .06em; }
.acc--onsite .acc__title { padding-left: calc(46 * var(--u)); }
.acc__title .ico { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.acc--onsite .acc__title .ico { color: #1a9ae0; }
.acc--online .acc__title { gap: calc(12 * var(--u)); }
.acc__venue { margin-top: calc(13 * var(--u)); font: 700 calc(11 * var(--u))/1.4 var(--f-ja); color: #13335c; letter-spacing: .02em; }
.acc__addr { margin-top: calc(9 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); font: 500 calc(9.4 * var(--u))/1.4 var(--f-ja); color: #2a3b58; }
.acc__addr .ico { width: calc(9 * var(--u)); height: calc(12 * var(--u)); color: var(--c-cyan-2); }
.acc__text { margin-top: calc(12 * var(--u)); font: 400 calc(8.7 * var(--u))/calc(14 * var(--u)) var(--f-ja); color: #4a566b; letter-spacing: .02em; }
.acc__service { margin-top: calc(6 * var(--u)); padding-left: calc(20 * var(--u)); font: 700 calc(12 * var(--u))/1.3 var(--f-ja); color: #13335c; letter-spacing: .06em; }
.acc--online .acc__text { margin-top: calc(16 * var(--u)); font-size: calc(8.4 * var(--u)); }
.acc__note { margin-top: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); font: 700 calc(8.4 * var(--u))/1.4 var(--f-ja); color: #13335c; }
.acc__note .ico { width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: #ec4b5e; }
.acc__map { position: absolute; left: calc(235 * var(--u)); top: calc(11 * var(--u)); width: calc(163 * var(--u)); height: calc(144 * var(--u)); border-radius: calc(10 * var(--u)); overflow: hidden; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 60, 110, .12); }
.acc__map img { width: 100%; height: 100%; object-fit: cover; }
.acc__map figcaption { position: absolute; inset: auto 0 0 0; padding: calc(3 * var(--u)) calc(6 * var(--u)); font: 500 calc(6.4 * var(--u))/1.3 var(--f-ja); color: #fff; background: rgba(13, 47, 90, .62); transform: translateY(100%); transition: transform .2s; }
.acc__map:hover figcaption, .acc__map:focus-within figcaption { transform: none; }
.acc__map-badge { position: absolute; right: calc(7 * var(--u)); bottom: calc(7 * var(--u)); padding: calc(3 * var(--u)) calc(6 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, .92); font: 500 calc(6.8 * var(--u))/1 var(--f-ja); color: #43526a; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.acc__more.pill { height: calc(26 * var(--u)); font-size: calc(8.8 * var(--u)); }
.acc--onsite .acc__more { left: calc(28 * var(--u)); top: calc(157 * var(--u)); width: calc(154 * var(--u)); }
.acc--online .acc__more { left: calc(20 * var(--u)); top: calc(157 * var(--u)); width: calc(159 * var(--u)); }
.acc__photo { position: absolute; right: 0; top: 0; width: calc(104 * var(--u)); height: 100%; background: url(../img/online-photo.webp) right center / cover no-repeat; }

/* ---------- SCHEDULE ---------- */
.schedule .sec-head { top: calc(19 * var(--u)); }
.schedule__wave { position: absolute; left: 0; top: calc(22 * var(--u)); width: 100%; height: calc(60 * var(--u)); pointer-events: none; z-index: 1; }
.schedule__list { position: absolute; left: calc(17 * var(--u)); top: calc(57 * var(--u)); width: calc(758 * var(--u)); display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(6 * var(--u)); }
.sch {
  position: relative; height: calc(142 * var(--u)); padding-top: calc(11 * var(--u)); text-align: center;
  background: rgba(255, 255, 255, .88); border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(40, 120, 180, .07), inset 0 0 0 1px rgba(219, 235, 246, .9);
}
.sch__node {
  position: absolute; left: 50%; top: var(--ny, calc(7 * var(--u))); width: calc(11.5 * var(--u)); height: calc(11.5 * var(--u)); margin: calc(-5.75 * var(--u)) 0 0 calc(-5.75 * var(--u)); z-index: 2;
  border-radius: 50%; background: radial-gradient(circle, #44c3f3 0 38%, #fff 42% 62%, #1ea5e4 66%);
  box-shadow: 0 0 0 1px rgba(30, 165, 228, .25), 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 90, 150, .25);
}
.sch:nth-child(1) { --ny: calc(7 * var(--u)); } .sch:nth-child(2) { --ny: calc(9.5 * var(--u)); } .sch:nth-child(3) { --ny: calc(-9.5 * var(--u)); } .sch:nth-child(4) { --ny: calc(-3 * var(--u)); } .sch:nth-child(5) { --ny: calc(-3 * var(--u)); }
.sch__day { height: 0; overflow: visible; font: 700 calc(11 * var(--u))/1 var(--f-en); color: var(--c-red); letter-spacing: .04em; transform: translateY(calc(-5 * var(--u))); }
.sch__date { margin-top: calc(15 * var(--u)); display: flex; justify-content: center; align-items: baseline; gap: calc(5 * var(--u)); color: #0a2d63; }
.sch__date time { font: 700 calc(16 * var(--u))/1 var(--f-en); letter-spacing: .01em; }
.sch__date small { font: 700 calc(10 * var(--u))/1 var(--f-en); color: #164c86; letter-spacing: .03em; }
.sch__title { margin-top: calc(11 * var(--u)); height: calc(26 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); font: 700 calc(10 * var(--u))/1.25 var(--f-ja); color: #12305a; letter-spacing: .02em; }
.sch__title .ico { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: var(--c-cyan-2); }
.sch__title small { display: block; font-weight: 500; font-size: .92em; color: #56657c; }
.sch__body { margin-top: calc(17 * var(--u)); font: 400 calc(8.7 * var(--u))/calc(15 * var(--u)) var(--f-ja); color: #4a566b; letter-spacing: .02em; }

/* ---------- SPONSORS ---------- */
.sponsors .sec-head { top: calc(18 * var(--u)); }
.sponsors__intro { position: absolute; left: calc(242 * var(--u)); top: calc(18.5 * var(--u)); font: 400 calc(8.2 * var(--u))/calc(12.8 * var(--u)) var(--f-ja); color: #4a566b; letter-spacing: 0; white-space: nowrap; }
.sponsors__intro span { display: block; }
.sponsors__more.pill { left: calc(635 * var(--u)); top: calc(24 * var(--u)); width: calc(139 * var(--u)); height: calc(25 * var(--u)); font-size: calc(8 * var(--u)); gap: calc(9 * var(--u)); padding: 0 calc(12 * var(--u)); }
.tiers { margin: 0 calc(12 * var(--u)) 0 calc(15 * var(--u)); padding: calc(60 * var(--u)) 0 calc(8 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); align-items: stretch; }
.tier {
  display: flex; flex-direction: column; min-height: calc(196 * var(--u)); padding: calc(6 * var(--u)) calc(11 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u));
  background: rgba(255, 255, 255, .86); border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(40, 120, 180, .06), inset 0 0 0 1px rgba(219, 235, 246, .95);
}
.tier__name { display: flex; align-items: center; gap: calc(17 * var(--u)); font: 700 calc(8.6 * var(--u))/1 var(--f-ja); color: var(--tier-ink, #233a5c); letter-spacing: .04em; }
.tier__badge { flex: none; display: grid; place-items: center; width: calc(25 * var(--u)); height: calc(25 * var(--u)); margin-left: calc(-1 * var(--u)); border-radius: 50%; color: #fff; font: 700 calc(12.5 * var(--u))/1 var(--f-en); background: var(--tier-bg); box-shadow: inset 0 calc(-2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .15); }
.tier--a { --tier-bg: radial-gradient(circle at 35% 30%, #5e7695, #354c6a); }
.tier--b { --tier-bg: radial-gradient(circle at 35% 30%, #e0aa76, #bf834e); --tier-ink: #c08a63; }
.tier--c { --tier-bg: radial-gradient(circle at 35% 30%, #9aa5af, #6f7b86); --tier-ink: #445063; }
.tier--d { --tier-bg: radial-gradient(circle at 35% 30%, #a99895, #85716f); --tier-ink: #a07f7c; }
.tier__desc { margin-top: calc(10 * var(--u)); padding-left: calc(5 * var(--u)); font: 400 calc(9 * var(--u))/calc(14.2 * var(--u)) var(--f-ja); color: #4f5b70; letter-spacing: .02em; }
.tier__logos { margin-top: calc(8 * var(--u)); display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols), 1fr); }
.tier--a .tier__logos { --cols: 1; --gap: calc(6 * var(--u)); --h: calc(78 * var(--u)); }
.tier--b .tier__logos { --cols: 2; --gap: calc(4 * var(--u)); --h: calc(44 * var(--u)); }
.tier--c .tier__logos { --cols: 3; --gap: calc(6 * var(--u)) calc(3 * var(--u)); --h: calc(40 * var(--u)); }
.tier--d .tier__logos { --cols: 4; --gap: calc(7 * var(--u)) calc(4 * var(--u)); --h: calc(34 * var(--u)); }
.logo-tile {
  width: 100%; height: var(--h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u));
  background: #e7eef3; border-radius: calc(4 * var(--u)); color: #8a97a6; font: 500 calc(6.6 * var(--u))/1 var(--f-ja); letter-spacing: .02em;
  transition: background-color .2s, box-shadow .2s, transform .2s;
}
.logo-tile .ico { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.tier--b .logo-tile { font-size: calc(7 * var(--u)); }
.tier--b .logo-tile .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.tier--a .logo-tile { font-size: calc(9.6 * var(--u)); gap: calc(8 * var(--u)); }
.tier--a .logo-tile .ico { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.tier--d .logo-tile { font-size: calc(5.4 * var(--u)); gap: calc(3 * var(--u)); }
.tier--d .logo-tile .ico { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.logo-tile:has(img) { position: relative; background: #fff; box-shadow: inset 0 0 0 1px #e1eaf1; }
.logo-tile img { max-width: 78%; max-height: 64%; object-fit: contain; }
.tier--a .logo-tile img { max-width: 84%; max-height: 60%; }
.logo-tile__badge { position: absolute; right: calc(3 * var(--u)); bottom: calc(3 * var(--u)); padding: calc(1.5 * var(--u)) calc(3 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(13, 47, 90, .07); color: #6b7a8e; font: 500 calc(4.6 * var(--u))/1 var(--f-ja); letter-spacing: 0; }
.tier--a .logo-tile__badge { font-size: calc(6.4 * var(--u)); right: calc(5 * var(--u)); bottom: calc(5 * var(--u)); padding: calc(2 * var(--u)) calc(4 * var(--u)); }
.tier--b .logo-tile__badge, .tier--c .logo-tile__badge, .tier--d .logo-tile__badge { display: none; }
.tier__sample { margin: calc(-5 * var(--u)) 0 calc(9 * var(--u)); text-align: right; font: 500 calc(6.2 * var(--u))/1 var(--f-ja); color: #7a879a; }
.tier--a .tier__sample { display: none; }
.logo-tile:has(img):hover { background: #f6fbfe; }
.logo-tile:hover { background: #dde9f1; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(20, 100, 160, .12); transform: translateY(-1px); }
.tier > .tlink { align-self: center; font-size: calc(8.4 * var(--u)); }
.tier__logos { margin-bottom: calc(11 * var(--u)); }

.sp-dialog { width: min(92vw, 480px); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 40, 80, .3); color: var(--c-ink); }
.sp-dialog::backdrop { background: rgba(7, 40, 70, .45); backdrop-filter: blur(2px); }
.sp-dialog__inner { position: relative; padding: 28px 28px 24px; }
.sp-dialog__close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--c-navy); }
.sp-dialog__close:hover { background: #eef6fb; }
.sp-dialog__close .ico { width: 18px; height: 18px; }
.sp-dialog__tier { font: 700 12px/1 var(--f-ja); color: var(--c-cyan-2); letter-spacing: .06em; }
.sp-dialog__logo { margin-top: 14px; height: 140px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e1eaf1; display: grid; place-items: center; color: #8a97a6; font-size: 13px; }
.sp-dialog__logo img { max-width: 70%; max-height: 70%; object-fit: contain; }
.sp-dialog__logo .ico { width: 28px; height: 28px; margin: 0 auto 6px; }
.sp-dialog__name { margin-top: 16px; font: 700 18px/1.4 var(--f-ja); color: var(--c-navy); }
.sp-dialog__desc { margin-top: 8px; font-size: 14px; line-height: 1.8; }
.sp-dialog__links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.sp-dialog__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
.sp-dialog__links .ico { width: 16px; height: 16px; }
.sp-dialog__note { margin-top: 16px; font-size: 12px; color: #6a778a; }

/* ---------- STAFF ---------- */
.staff .sec-head { top: calc(29.5 * var(--u)); }
.staff__intro p { position: absolute; left: calc(36 * var(--u)); top: calc(71 * var(--u)); font: 400 calc(9.6 * var(--u))/calc(16 * var(--u)) var(--f-ja); color: #3e4b62; letter-spacing: .02em; white-space: nowrap; }
.staff__more.pill { left: calc(35 * var(--u)); top: calc(129 * var(--u)); width: calc(118 * var(--u)); height: calc(25 * var(--u)); font-size: calc(8.4 * var(--u)); gap: calc(12 * var(--u)); }
.staff__groups { margin-left: calc(222 * var(--u)); margin-right: calc(6 * var(--u)); padding: calc(23 * var(--u)) 0 calc(10 * var(--u)); display: grid; grid-template-columns: 103fr 157fr 132fr 173fr; min-height: calc(170 * var(--u)); }
.sg { position: relative; padding: calc(4 * var(--u)) 0 0; border-left: 1px solid rgba(160, 205, 232, .7); }
.sg::after { content: ""; position: absolute; left: -1px; bottom: calc(16 * var(--u)); height: calc(6 * var(--u)); }
.sg__name { padding-left: var(--title-x, calc(22 * var(--u))); font: 700 calc(9.6 * var(--u))/1 var(--f-ja); color: #15305a; letter-spacing: .04em; }
.sg__note { margin-top: calc(6 * var(--u)); padding-left: var(--title-x, calc(22 * var(--u))); font: 400 calc(7.2 * var(--u))/1 var(--f-ja); color: #6b778b; }
.sg__list { margin-top: var(--list-y, calc(16 * var(--u))); display: grid; grid-template-columns: repeat(var(--cols), var(--av)); gap: var(--gy, calc(4 * var(--u))) var(--gx, calc(5 * var(--u))); justify-content: center; padding-right: var(--list-pr, calc(0 * var(--u))); }
.sg__list img { width: var(--av); height: var(--av); border-radius: 50%; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(20, 100, 160, .12); }
.sg--chair { --title-x: calc(23 * var(--u)); --list-y: calc(24 * var(--u)); }
.sg--core { --title-x: calc(25 * var(--u)); --list-y: calc(13 * var(--u)); --gx: calc(7 * var(--u)); --gy: calc(8 * var(--u)); --list-pr: calc(0 * var(--u)); }
.sg--core .sg__list { padding-left: calc(20 * var(--u)); }
.sg--core.is-honeycomb li.row-odd { transform: translateX(calc(-20.5 * var(--u))); }
.sg--day { --title-x: calc(20 * var(--u)); --list-y: calc(13 * var(--u)); --gx: calc(5 * var(--u)); --gy: calc(4 * var(--u)); --list-pr: calc(18 * var(--u)); }
.sg--network { --title-x: calc(18 * var(--u)); --list-y: calc(13 * var(--u)); --gx: calc(2.5 * var(--u)); --gy: calc(4 * var(--u)); --list-pr: calc(14 * var(--u)); }

/* ---------- footer ---------- */
.site-footer { color: #fff; text-align: center; }
.site-footer__logo { position: absolute; left: calc(276 * var(--u)); top: calc(4 * var(--u)); width: calc(244 * var(--u)); height: calc(67 * var(--u)); display: grid; place-items: center; background: #fff; border-radius: calc(122 * var(--u)) calc(122 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u)) / calc(40 * var(--u)) calc(40 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 50, 90, .18); }
.site-footer__logo img { height: calc(46 * var(--u)); width: auto; margin-left: calc(-6 * var(--u)); }
.site-footer__years { position: absolute; left: calc(204 * var(--u)); top: calc(83 * var(--u)); width: calc(384 * var(--u)); height: calc(21 * var(--u)); display: flex; justify-content: center; gap: 0; border-bottom: 1px solid rgba(255, 255, 255, .38); }
.site-footer__years a { display: block; width: calc(40.2 * var(--u)); padding: calc(3 * var(--u)) 0 calc(6 * var(--u)); font: 500 calc(8.2 * var(--u))/1 var(--f-en); color: rgba(255, 255, 255, .92); letter-spacing: .02em; transition: color .2s; }
.site-footer__years a:hover { color: #9fe3ff; text-decoration: underline; text-underline-offset: calc(3 * var(--u)); }
.site-footer__links { position: absolute; left: 0; right: 0; top: calc(117 * var(--u)); display: flex; justify-content: center; font: 500 calc(8.6 * var(--u))/1.4 var(--f-ja); letter-spacing: .06em; }
.site-footer__links li + li { border-left: 1px solid rgba(255, 255, 255, .45); }
.site-footer__links a { display: block; padding: 0 calc(12 * var(--u)); }
.site-footer__links a:hover, .site-footer__powered a:hover { color: #9fe3ff; text-decoration: underline; }
.site-footer__copy { position: absolute; left: 0; right: 0; top: calc(149.5 * var(--u)); display: flex; justify-content: center; align-items: center; font: 400 calc(7.6 * var(--u))/1.4 var(--f-ja); letter-spacing: .04em; color: rgba(255, 255, 255, .92); }
.site-footer__powered { margin-left: calc(14 * var(--u)); padding-left: calc(14 * var(--u)); border-left: 1px solid rgba(255, 255, 255, .45); font-family: var(--f-en); }
.site-footer__hand { position: absolute; left: calc(622 * var(--u)); top: calc(50 * var(--u)); width: calc(150 * var(--u)); text-align: left; font: 400 calc(13.2 * var(--u))/1.3 var(--f-hand); color: #fff; white-space: nowrap; transform: rotate(-18deg); transform-origin: left top; text-shadow: 0 1px 4px rgba(0, 50, 80, .25); }
.site-footer__hand span { display: block; }
.site-footer__hand span:nth-child(1) { padding-left: calc(4 * var(--u)); }
.site-footer__hand span:nth-child(2) { padding-left: calc(14 * var(--u)); }
.site-footer__hand span:nth-child(3) { padding-left: calc(20 * var(--u)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* =====================================================================
 * Mobile (<768px): derived from the desktop design, calc(1 * var(--u)) = 1px @390px.
 * Same order and visual language; sections flow vertically.
 * ===================================================================== */
@media (max-width: 767.98px) {
  .hero, .cta, .news, .about, .access, .schedule, .sponsors, .staff, .site-footer { height: auto; min-height: 0; background-size: 100% auto; }
  .about, .access, .sponsors, .staff { background-image: none; }
  .sec-head { position: relative; left: auto; top: auto !important; margin: 0 0 calc(22 * var(--u)) calc(20 * var(--u)); }
  .sec-head__en { font-size: calc(22 * var(--u)); }
  .sec-head__ja { font-size: calc(11 * var(--u)); }
  .sec-head::before { height: calc(46 * var(--u)); }
  .pill { position: relative; display: flex; left: auto !important; top: auto !important; height: calc(44 * var(--u)) !important; font-size: 13px !important; padding: 0 calc(22 * var(--u)); gap: calc(14 * var(--u)); }
  .pill .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  .tlink { font-size: 13px; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) 0 calc(6 * var(--u)); }
  .tlink .ico { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

  /* header + menu */
  .site-header { position: fixed; height: calc(58 * var(--u)); background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(13, 47, 90, .06); }
  .site-header__logo { left: calc(14 * var(--u)); top: calc(8 * var(--u)); }
  .site-header__logo img { height: calc(42 * var(--u)); }
  .menu-btn { display: grid; place-items: center; position: absolute; right: calc(8 * var(--u)); top: calc(7 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); color: var(--c-navy); }
  .menu-btn .ico { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .menu-btn__close, .menu-open .menu-btn__open { display: none; }
  .menu-open .menu-btn__close { display: block; }
  .gnav {
    position: fixed; left: 0; right: 0; top: calc(58 * var(--u)); bottom: 0; display: none; flex-direction: column; align-items: stretch;
    padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u)); background: rgba(247, 252, 254, .98); overflow-y: auto;
  }
  .menu-open .gnav { display: flex; }
  .menu-open { overflow: hidden; }
  .gnav__list { flex-direction: column; }
  .gnav__list a, .gnav__list li:nth-child(2) a, .gnav__list li:last-child a { margin: 0; padding: calc(18 * var(--u)) calc(4 * var(--u)); font-size: 16px; border-bottom: 1px solid var(--c-line); }
  .gnav__list a::after { display: none; }
  .gnav__social { justify-content: center; gap: calc(28 * var(--u)); margin-top: calc(28 * var(--u)); }
  .sns { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .sns--youtube, .sns--github { margin: 0; }
  .sns .ico { width: calc(22 * var(--u)) !important; height: calc(22 * var(--u)) !important; }

  /* hero: illustration first, then logo + copy */
  .hero { padding-top: calc(58 * var(--u)); background: var(--c-page); }
  .hero__art { position: relative; left: auto; width: 100%; height: calc(400 * var(--u)); background: url(../img/bg-hero.webp) right top / auto 100% no-repeat; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .hero__art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-page) 0, rgba(247, 252, 254, 0) 14%); }
  .art-logo--banner { left: calc(174.9 * var(--u)); top: calc(166.5 * var(--u)); width: calc(56.9 * var(--u)); height: calc(61.1 * var(--u)); padding: calc(2 * var(--u)); }
  .hero__copy { position: relative; inset: auto; margin-top: calc(-46 * var(--u)); padding: 0 calc(20 * var(--u)) calc(34 * var(--u)); text-align: center; }
  .hero__logo, .hero__catch, .hero__lead, .hero__meta { position: relative; left: auto; top: auto; }
  .hero__logo img { width: calc(150 * var(--u)); margin: 0 auto; }
  .hero__catch { margin-top: calc(22 * var(--u)); font-size: calc(33 * var(--u)); letter-spacing: .02em; }
  .hero__lead { margin-top: calc(10 * var(--u)); font-size: calc(15.5 * var(--u)); letter-spacing: .06em; }
  .hero__meta { margin: calc(20 * var(--u)) auto 0; width: 100%; max-width: calc(350 * var(--u)); padding-top: calc(16 * var(--u)); text-align: left; }
  .hero__meta-row { justify-content: center; }
  .hero__meta-row--date .date { font-size: calc(18 * var(--u)); }
  .hero__meta-row--venue dd { font-size: 13px; }

  /* CTA ribbons stack */
  .cta { padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); background: var(--c-page); }
  .cta__list { position: static; grid-template-columns: 1fr; gap: calc(14 * var(--u)); }
  .cta-btn { height: calc(74 * var(--u)); padding-left: calc(26 * var(--u)); justify-content: flex-start; }
  .cta-btn__icon { margin: 0 calc(16 * var(--u)) 0 calc(30 * var(--u)); }
  .cta-btn__label { font-size: calc(20 * var(--u)); }
  .cta-btn__arrow { margin-left: auto; margin-right: calc(14 * var(--u)); }
  .cta--many .cta__list { margin: 0; gap: calc(14 * var(--u)); grid-template-columns: 1fr; }
  .cta--many .cta-btn { padding-left: calc(26 * var(--u)); }
  .cta--many .cta-btn__icon, .cta--n4 .cta-btn__icon { display: block; width: calc(27 * var(--u)); height: calc(27 * var(--u)); margin: 0 calc(16 * var(--u)) 0 calc(30 * var(--u)); }
  .cta--many .cta-btn__label { font-size: calc(20 * var(--u)); }
  .cta--many .cta-btn__arrow { margin-left: auto; }

  /* NEWS */
  .news { padding: calc(30 * var(--u)) 0 calc(30 * var(--u)); background-position: center top; }
  .news__list { margin: 0 calc(20 * var(--u)); max-width: none; }
  .news__item a { flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); padding: calc(14 * var(--u)) calc(4 * var(--u)); min-height: 0; }
  .news__item time { width: auto; font-size: 12.5px; }
  .news__item span { font-size: 14.5px; }
  .news__all { position: relative; left: auto; top: auto; display: flex; width: max-content; margin: calc(14 * var(--u)) calc(20 * var(--u)) 0 auto; }

  /* ABOUT */
  .about { padding: calc(34 * var(--u)) 0 calc(40 * var(--u)); }
  .about__text, .about__catch, .about__body { position: relative; left: auto; top: auto; }
  .about__text { padding: 0 calc(20 * var(--u)); }
  .about__catch { white-space: normal; font-size: calc(24 * var(--u)); }
  .about__body { margin-top: calc(14 * var(--u)); white-space: normal; font-size: 14.5px; line-height: 1.9; }
  .about__body span { display: inline; }
  .about__more.pill { width: max-content; margin-top: calc(20 * var(--u)); }
  .about__photo { position: relative; left: auto; top: auto; width: auto; height: calc(236 * var(--u)); margin: calc(28 * var(--u)) 0 0; background: url(../img/bg-about.webp) 51% 20% / 330% auto no-repeat; -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%); }
  .art-logo--screen { left: calc(169 * var(--u)); top: calc(53.4 * var(--u)); width: calc(74.6 * var(--u)); height: calc(87.6 * var(--u)); padding: calc(3 * var(--u)); }
  .facts { position: relative; left: auto; top: auto; width: auto; height: auto; margin: calc(-34 * var(--u)) calc(20 * var(--u)) 0; padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u)); }
  .facts__title { font-size: 15px; }
  .facts__title .ico { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .facts__row { min-height: calc(54 * var(--u)); padding: calc(8 * var(--u)) 0; }
  .facts__row:last-child { min-height: calc(54 * var(--u)); }
  .facts__row dt { width: calc(104 * var(--u)); font-size: 12px; gap: calc(10 * var(--u)); }
  .facts__row dt .ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .facts__row dd { font-size: 14px; }
  .facts .date { font-size: 13.5px; }
  .facts .date-sep { font-size: 12px; }
  .facts__row:first-child dd { white-space: normal; }

  /* ACCESS */
  .access { padding: calc(34 * var(--u)) 0 calc(36 * var(--u)); }
  .acc { position: relative; left: auto !important; top: auto; width: auto !important; height: auto !important; margin: 0 calc(20 * var(--u)) calc(18 * var(--u)); border-radius: calc(22 * var(--u)) !important; padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); }
  .acc__body { position: static; width: auto !important; }
  .acc--onsite .acc__title { padding-left: 0; gap: calc(12 * var(--u)); }
  .acc__title { font-size: calc(19 * var(--u)); }
  .acc__title .ico { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .acc__venue { font-size: 16px; }
  .acc__addr, .acc__note { font-size: 13.5px; }
  .acc__addr .ico { width: calc(12 * var(--u)); height: calc(16 * var(--u)); }
  .acc__note .ico { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .acc__text, .acc--online .acc__text { font-size: 14px; line-height: 1.85; }
  .acc__service { padding-left: 0; font-size: 16px; margin-top: calc(10 * var(--u)); }
  .acc__map { position: relative; left: auto; top: auto; width: 100%; height: calc(210 * var(--u)); margin-top: calc(18 * var(--u)); }
  .acc__map-badge { font-size: 11px; padding: calc(4 * var(--u)) calc(8 * var(--u)); }
  .acc__map figcaption { transform: none; font-size: 11px; padding: calc(6 * var(--u)) calc(10 * var(--u)); }
  .acc__map-badge { display: none; }
  .acc__more.pill { width: 100% !important; margin-top: calc(18 * var(--u)); }
  .acc--online { overflow: hidden; }
  .acc--online .acc__body { position: relative; z-index: 1; }
  .acc__photo { width: 46%; opacity: .4; }

  /* SCHEDULE: vertical wave timeline */
  .schedule { padding: calc(34 * var(--u)) 0 calc(40 * var(--u)); }
  .schedule__wave { display: none; }
  .schedule__list { position: relative; left: auto; top: auto; width: auto; margin: 0 calc(20 * var(--u)) 0 calc(20 * var(--u)); padding-left: calc(26 * var(--u)); grid-template-columns: 1fr; gap: calc(14 * var(--u)); }
  .schedule__list::before { content: ""; position: absolute; left: calc(7 * var(--u)); top: calc(10 * var(--u)); bottom: calc(10 * var(--u)); width: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: linear-gradient(#7fd3f6, #3dbdf1 50%, #7fd3f6); }
  .sch { height: auto; padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: calc(14 * var(--u)); align-items: center; }
  .sch__node { left: calc(-19.5 * var(--u)); top: calc(26 * var(--u)) !important; margin: calc(-6 * var(--u)) 0 0 calc(-6 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
  .sch__day { grid-column: 1 / -1; height: auto; transform: none; font-size: 12px; margin-bottom: calc(4 * var(--u)); }
  .sch__date { grid-column: 1 / -1; justify-content: flex-start; margin-top: 0; }
  .sch__date time { font-size: calc(20 * var(--u)); }
  .sch__date small { font-size: calc(12.5 * var(--u)); }
  .sch__title { grid-column: 1 / -1; justify-content: flex-start; margin-top: calc(10 * var(--u)); height: auto; font-size: 15px; }
  .sch__title .ico { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .sch__body { grid-column: 1 / -1; margin-top: calc(8 * var(--u)); font-size: 13.5px; line-height: 1.75; }
  .sch__body br { display: none; }

  /* SPONSORS */
  .sponsors { padding: calc(34 * var(--u)) 0 calc(36 * var(--u)); }
  .sponsors__intro { position: relative; left: auto; top: auto; margin: 0 calc(20 * var(--u)); white-space: normal; font-size: 14px; line-height: 1.85; }
  .sponsors__intro span { display: inline; }
  .sponsors__more.pill { width: max-content !important; margin: calc(16 * var(--u)) calc(20 * var(--u)) 0; font-size: 12.5px !important; }
  .tiers { margin: calc(22 * var(--u)) calc(20 * var(--u)) 0; padding: 0; grid-template-columns: 1fr; gap: calc(14 * var(--u)); }
  .tier { min-height: 0; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)); }
  .tier__name { font-size: 15px; gap: calc(12 * var(--u)); }
  .tier__badge { width: calc(32 * var(--u)); height: calc(32 * var(--u)); font-size: calc(16 * var(--u)); }
  .tier__desc { font-size: 13.5px; line-height: 1.75; padding-left: 0; }
  .tier__desc br { display: none; }
  .tier--a .tier__logos { --h: calc(150 * var(--u)); }
  .tier--b .tier__logos { --h: calc(84 * var(--u)); }
  .tier--c .tier__logos { --h: calc(62 * var(--u)); --gap: calc(6 * var(--u)); }
  .tier--d .tier__logos { --h: calc(56 * var(--u)); --gap: calc(6 * var(--u)); --cols: 3; }
  .logo-tile { font-size: 11px !important; gap: calc(6 * var(--u)) !important; }
  .logo-tile__badge { font-size: 9px !important; padding: 2px 4px !important; }
  .tier__sample { font-size: 11px; margin: -4px 0 10px; }
  .logo-tile .ico { width: calc(20 * var(--u)) !important; height: calc(20 * var(--u)) !important; }
  .tier--a .logo-tile .ico { width: calc(32 * var(--u)) !important; height: calc(32 * var(--u)) !important; }
  .tier--a .logo-tile { font-size: 14px !important; }
  .tier--d .logo-tile { font-size: 10px !important; }
  .tier > .tlink { font-size: 13px; }

  /* STAFF */
  .staff { padding: calc(34 * var(--u)) 0 calc(30 * var(--u)); }
  .staff__intro { padding: 0 calc(20 * var(--u)); }
  .staff__intro p { position: static; white-space: normal; font-size: 14.5px; line-height: 1.85; }
  .staff__intro br { display: none; }
  .staff__more.pill { width: max-content !important; margin-top: calc(16 * var(--u)); }
  .staff__groups { margin: calc(26 * var(--u)) calc(20 * var(--u)) 0; padding: 0; grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .sg { border-left: 0; border-top: 1px solid rgba(160, 205, 232, .7); padding: calc(18 * var(--u)) 0 calc(20 * var(--u)); }
  .sg__name, .sg__note { padding-left: 0; }
  .sg__name { font-size: 15px; }
  .sg__note { font-size: 11px; }
  .sg__list { margin-top: calc(14 * var(--u)); grid-template-columns: repeat(auto-fill, var(--m-av, calc(54 * var(--u)))); justify-content: start; gap: calc(10 * var(--u)); padding: 0 !important; }
  .sg__list img { width: var(--m-av, calc(54 * var(--u))); height: var(--m-av, calc(54 * var(--u))); }
  .sg--chair { --m-av: calc(96 * var(--u)); }
  .sg--core.is-honeycomb li.row-odd { transform: none; }

  /* footer */
  .site-footer { height: auto; padding: calc(44 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)); background-size: cover; background-position: 50% 30%; display: flex; flex-direction: column; }
  .site-footer__hand { order: 1; }
  .site-footer > nav { order: 2; }
  .site-footer__links { order: 3; }
  .site-footer__copy { order: 4; }
  .site-footer__logo, .site-footer__years, .site-footer__links, .site-footer__copy, .site-footer__hand { position: relative; left: auto; right: auto; top: auto; }
  .site-footer__logo { width: calc(240 * var(--u)); height: calc(70 * var(--u)); margin: 0 auto; }
  .site-footer__logo img { height: calc(46 * var(--u)); }
  .site-footer__hand { width: auto; margin: calc(30 * var(--u)) auto 0; transform: rotate(-8deg); font-size: calc(19 * var(--u)); text-align: center; }
  .site-footer__hand span { display: inline; padding: 0 !important; }
  .site-footer__hand span:nth-child(3) { display: block; }
  .site-footer__years { width: auto; height: auto; margin: calc(30 * var(--u)) 0 0; flex-wrap: wrap; justify-content: center; gap: calc(4 * var(--u)) 0; padding-bottom: calc(14 * var(--u)); }
  .site-footer__years a { width: calc(70 * var(--u)); padding: calc(10 * var(--u)) 0; font-size: 13.5px; }
  .site-footer__links { margin-top: calc(18 * var(--u)); font-size: 13.5px; }
  .site-footer__links a { padding: calc(8 * var(--u)) calc(14 * var(--u)); }
  .site-footer__copy { margin-top: calc(18 * var(--u)); flex-direction: column; gap: calc(8 * var(--u)); font-size: 12px; }
  .site-footer__powered { margin: 0; padding: 0; border: 0; }
}