@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: Newsreader;
  src: url("../fonts/newsreader-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 拉丁、西里尔、希腊、阿拉伯、希伯来、天城文、孟加拉文、泰文共用 Noto Sans，靠 unicode-range 取文件。
   中日韩同一码位字形不同，按 lang 分文件。 */
/* noto-faces:start */
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-7e, U+00C9, U+00D6, U+00DC, U+00E0-e2, U+00E4-ea, U+00EC-ee, U+00F1, U+00F3-f6, U+00F8, U+00FA-fd, U+0103, U+0105, U+0107, U+010B-10d, U+010F, U+0111, U+0119, U+011B, U+011F, U+0121, U+0127, U+0131, U+0142, U+0151, U+0159, U+015B, U+015F, U+0161, U+0165, U+017A, U+017C, U+017E, U+01B0, U+0219, U+021B, U+0388, U+0391, U+0395, U+0399, U+039C, U+03A0, U+03AC-3af, U+03B1-3b5, U+03B7-3bd, U+03BF-3c7, U+03C9-3ca, U+03CC-3ce, U+0406, U+0411, U+0414-415, U+0417-418, U+041A, U+041D-421, U+0423, U+0428, U+0430-443, U+0445-44f, U+0451, U+0456-457, U+1EA1, U+1EA3, U+1EA5, U+1EA9, U+1EB1, U+1EBB, U+1EBF, U+1EC1, U+1EC3, U+1EC7, U+1ECB, U+1ED9, U+1EDB, U+1EDD, U+1EE3, U+1EE5, U+1EE7, U+1EE9, U+1EEB, U+1EEF, U+2019;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-arabic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+0621-622, U+0625, U+0627-62a, U+062C-63a, U+0641-64a, U+0650-651, U+0653, U+0655, U+067E, U+0686, U+06A9, U+06AF, U+06CC;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-hebrew.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+05BE, U+05D0-5e2, U+05E4, U+05E6-5ea;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-devanagari.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0901-902, U+0905-909, U+090F, U+0914-915, U+0917-918, U+091B-91c, U+091E-91f, U+0921, U+0923-926, U+0928, U+092A-930, U+0932, U+0935, U+0937-939, U+093E-943, U+0947, U+0949, U+094B-94d, U+0964;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-bengali.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0981-982, U+0985-987, U+098F, U+0993, U+0995-998, U+099A, U+099C, U+099E-99f, U+09A1, U+09A3-9a6, U+09A8, U+09AA-9b0, U+09B2, U+09B6-9b9, U+09BC, U+09BE-9c3, U+09C7-9c8, U+09CB, U+09CD;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-thai.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E01-e02, U+0E04, U+0E07-e08, U+0E0B, U+0E0D, U+0E11, U+0E13-e17, U+0E19-e1c, U+0E1E, U+0E20-e23, U+0E25, U+0E27, U+0E29-e2b, U+0E2D, U+0E30-e35, U+0E37-e39, U+0E40-e44, U+0E47-e49, U+0E4C-e4d;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/noto-sans-sc.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3001-3002, U+4E00, U+4E0B, U+4E0E, U+4E2D, U+4E3A, U+4E89, U+4EA7, U+4ECE, U+4EE3, U+4F53, U+4F60, U+4FDD, U+517C, U+5230, U+524D, U+529B, U+52A8, U+5361, U+53EF, U+540E, U+542F, U+548C, U+54C1, U+5728, U+5730, U+578B, U+5B98, U+5BC6, U+5DF1, U+5E38, U+5F53, U+5F97, U+5FC3, U+5FC6, U+6210, U+62A4, U+63D0, U+6587, U+65E5, U+65F6, U+662F, U+663E, U+672C, U+6838, U+6A21, U+70BC, U+7247, U+7406, U+7410, U+7528, U+7684, U+77E5, U+788E, U+793A, U+79C1, U+7A0B, U+7AD9, U+7ADE, U+7B80, U+7BB1, U+7EDF, U+7F51, U+7FFB, U+81EA, U+8A00, U+8BA9, U+8BB0, U+8BBF, U+8BC6, U+8BD1, U+8BED, U+8D28, U+8DF3, U+8F6C, U+8FDC, U+90AE, U+91CF, U+94A5, U+95EE, U+9690, U+987E, U+FF0C, U+FF1A;
}

@font-face {
  font-family: "Noto Sans TC";
  src: url("../fonts/noto-sans-tc.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3001-3002, U+4E00, U+4E0B, U+4E2D, U+4EE3, U+4F60, U+4FDD, U+517C, U+5230, U+524D, U+529B, U+52D5, U+5361, U+53F0, U+548C, U+54C1, U+5728, U+5730, U+578B, U+5DF1, U+5E38, U+5F80, U+5F97, U+5F9E, U+5FC3, U+61B6, U+6210, U+63D0, U+6587, U+65E5, U+662F, U+6642, U+672C, U+6838, U+6A21, U+7063, U+70BA, U+7149, U+722D, U+7247, U+73FE, U+7406, U+7463, U+7522, U+7528, U+7684, U+77E5, U+788E, U+79C1, U+7A2E, U+7AD9, U+7AEF, U+7AF6, U+7D71, U+7DB2, U+7E41, U+7FFB, U+81EA, U+8207, U+8A00, U+8A18, U+8A9E, U+8B58, U+8B6F, U+8B77, U+8B93, U+8CEA, U+8DF3, U+8F49, U+9060, U+91D1, U+9470, U+96B1, U+9867, U+9AD4, U+FF08-ff09, U+FF0C, U+FF1A;
}

@font-face {
  font-family: "Noto Sans HK";
  src: url("../fonts/noto-sans-hk.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3001-3002, U+4E00, U+4E0B, U+4E2D, U+4EE3, U+4F60, U+4FDD, U+517C, U+5230, U+524D, U+529B, U+52D5, U+5361, U+548C, U+54C1, U+5728, U+5730, U+578B, U+5BC6, U+5DF1, U+5E38, U+5F80, U+5F97, U+5F9E, U+5FC3, U+61B6, U+6210, U+63D0, U+6587, U+65E5, U+662F, U+6642, U+672C, U+6838, U+6A21, U+6E2F, U+70BA, U+7149, U+722D, U+7247, U+73FE, U+7406, U+7463, U+7522, U+7528, U+7684, U+77E5, U+788E, U+79C1, U+7A2E, U+7AD9, U+7AEF, U+7AF6, U+7D20, U+7D71, U+7DB2, U+7E41, U+7FFB, U+81EA, U+8207, U+8A00, U+8A18, U+8A9E, U+8B58, U+8B6F, U+8B77, U+8B93, U+8CEA, U+8DF3, U+8F49, U+9060, U+9470, U+96B1, U+9867, U+9999, U+9AD4, U+FF08-ff09, U+FF0C, U+FF1A;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3001-3002, U+3044, U+304B-304e, U+3057-305a, U+3064-306b, U+306E-3071, U+3078-307a, U+307E-307f, U+3089, U+308B, U+3092, U+3099-309a, U+30A4, U+30A6-30a7, U+30AB-30ae, U+30B5-30ba, U+30C6-30c9, U+30CF-30d1, U+30D5-30d7, U+30E2, U+30E9-30eb, U+30ED, U+30F3-30f4, U+30FC, U+4E00, U+4EE3, U+51FA, U+5206, U+53D6, U+54C1, U+56DE, U+5B88, U+5E38, U+5F15, U+5F37, U+61B6, U+65AD, U+65E5, U+6642, U+6697, U+672C, U+6B21, U+7247, U+7528, U+77E5, U+7FFB, U+81EA, U+88FD, U+8A00, U+8A18, U+8A33, U+8A9E, U+8CBB, U+8CEA, U+9375, U+9ED9, U+FF1A;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/noto-sans-kr.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+AC01, U+AC1C, U+ACA9, U+ACB0, U+ACBD, U+ACE0, U+ACFC, U+AD6D, U+AE30, U+AED8, U+B0B4, U+B2C8, U+B2E4, U+B300, U+B378, U+B3CC, U+B4DC, U+B4ED, U+B824-b825, U+B85C-b85d, U+B97C, U+B9AC, U+B9CC, U+BAA8, U+BB35, U+BC88, U+BCF4, U+BE44, U+C0AC, U+C0C1, U+C11C, U+C2DC, U+C554, U+C5B4-c5b5, U+C5B8, U+C5D0, U+C5ED, U+C5F0, U+C640, U+C6A9, U+C6D0, U+C6F9, U+C73C, U+C744, U+C74C, U+C758, U+C774, U+C778, U+C77C, U+C790, U+C798, U+C7AC, U+C7C1, U+C815, U+C81C, U+C870, U+C9C0, U+C9C8, U+CD94, U+CE74, U+CEEC, U+D0A4, U+D0B5, U+D2B8, U+D488, U+D504, U+D558, U+D55C, U+D568, U+D574, U+D604;
}
/* noto-faces:end */

:root {
  --canvas: #f7f9fb;
  --stage: #edf2f6;
  --surface: #ffffff;
  --ink: #202d3b;
  --body: #465667;
  --accent: #315e91;
  --visited: #625284;
  --shadow: rgb(30 53 77 / 10%);
  --sans: "Noto Sans", system-ui, sans-serif;
  --sans-sc: "Noto Sans SC", "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sans-tc: "Noto Sans TC", "Noto Sans", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --sans-hk: "Noto Sans HK", "Noto Sans", "PingFang HK", "Microsoft JhengHei", sans-serif;
  --sans-ja: "Noto Sans JP", "Noto Sans", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --sans-ko: "Noto Sans KR", "Noto Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--ink) var(--canvas); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.65;
}

html[lang="zh-CN"] body { font-family: var(--sans-sc); }
html[lang="zh-TW"] body { font-family: var(--sans-tc); }
html[lang="zh-HK"] body { font-family: var(--sans-hk); }
html[lang="ja"] body { font-family: var(--sans-ja); }
html[lang="ko"] body { font-family: var(--sans-ko); }

html[lang="th"] body,
html[lang="hi"] body,
html[lang="bn"] body { line-height: 1.85; }

html[lang="ar"] body,
html[lang="fa"] body,
html[lang="he"] body { line-height: 1.8; }

::selection { background: var(--ink); color: var(--surface); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: 0;
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--surface);
  padding: 0.45rem 0.75rem;
  z-index: 5;
}

.skip:focus { transform: none; }

.top,
.sheet {
  width: min(72rem, calc(100% - 40px));
  margin-inline: auto;
}

.top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1.4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.lang {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.lang-current,
.lang-list button {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 0;
  cursor: pointer;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  box-shadow: 0 3px 12px var(--shadow);
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  white-space: nowrap;
  border-radius: 8px;
}

.lang-list {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 4;
  width: 16rem;
  max-height: 18rem;
  margin: 0;
  padding: 0.35rem;
  overflow: auto;
  list-style: none;
  background: var(--surface);
  box-shadow: 0 12px 32px var(--shadow);
  border-radius: 12px;
}

.lang-list button {
  width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.5rem;
  text-align: start;
  background: transparent;
}

.lang-list button[aria-current="true"] {
  color: var(--accent);
  background: var(--stage);
  font-weight: 500;
}

.lang-current:lang(zh-CN),
.lang-list button:lang(zh-CN) { font-family: var(--sans-sc); }
.lang-current:lang(zh-TW),
.lang-list button:lang(zh-TW) { font-family: var(--sans-tc); }
.lang-current:lang(zh-HK),
.lang-list button:lang(zh-HK) { font-family: var(--sans-hk); }
.lang-current:lang(ja),
.lang-list button:lang(ja) { font-family: var(--sans-ja); }
.lang-current:lang(ko),
.lang-list button:lang(ko) { font-family: var(--sans-ko); }

.mark {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 22%;
  box-shadow: 0 3px 12px var(--shadow);
}

.legal-name {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.sheet {
  display: grid;
  gap: 2.5rem;
  padding: 3.5rem 0 2.4rem;
}

.intro { display: flex; align-items: end; gap: 2rem; }
.theater { min-width: 0; }
.contact { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

h1 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(4.5rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.suffix {
  margin: 1.2rem 0 0;
  font-family: var(--sans);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.stage { --columns: 2; }

.figures {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: 1rem;
}

.figure {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 2rem;
  color: var(--body);
  background: var(--surface);
  border: 1px solid rgb(49 94 145 / 10%);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 220ms ease-out, background 220ms, border-color 220ms;
}

.stage[data-density="compact"] { --columns: 3; }
.stage[data-density="dense"] { --columns: 4; }
.stage:not([data-density="spacious"]) .figure { padding: 1.4rem; }
.stage:not([data-density="spacious"]) .pic { height: 5rem; }
.stage:not([data-density="spacious"]) h2 { font-size: 1.25rem; }
@media (hover: hover) {
  .figure:hover {
    transform: translateY(-3px);
    background: var(--stage);
    border-color: rgb(49 94 145 / 25%);
  }
}
.figure:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }

.pic { display: block; width: 100%; height: 6.5rem; margin-bottom: 1.5rem; }
h2 {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.figure p { margin: 0; overflow-wrap: anywhere; }
.figure a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-block: 0.5rem;
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* Stretch the real link over its project so native navigation works everywhere. */
.figure a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.figure a::after { content: "↗"; flex-shrink: 0; transition: transform 220ms ease-out; }
.figure a:visited { color: var(--visited); }
.figure a:focus-visible { outline: none; }
@media (hover: hover) {
  .figure:hover a::after { transform: translate(2px, -2px); }
}
.figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--light-x, 50%) var(--light-y, 40%), rgb(113 174 228 / 24%), transparent 75%);
  opacity: 0;
  transition: opacity 250ms;
}
.figure.is-lit::before { opacity: 1; }

.lang-current:hover,
.lang-list button:hover { background: var(--stage); }

address {
  margin: 0.8rem 0 0;
  font-family: var(--sans);
  font-style: normal;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
}

.mails { display: flex; flex-wrap: wrap; gap: 0 1.4rem; align-items: center; }

.mail {
  color: var(--ink);
  appearance: none;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  min-height: 44px;
  padding: 0.55rem 0.15rem;
  cursor: pointer;
}

.mail.is-ready { border-bottom-color: var(--accent); }
.mail:disabled { cursor: default; }
.mail canvas { display: block; }

noscript { color: var(--body); }

@media (max-width: 900px) {
  .stage[data-density="dense"] { --columns: 3; }
}

@media (max-width: 700px) {
  .stage[data-density] { --columns: 2; }
  .intro { display: block; }
  h1 { font-size: clamp(3.2rem, 10vw, 5.4rem); }
  .sheet { padding-top: 2.5rem; gap: 2rem; }
  .figure { padding: 1.4rem; }
}

@media (max-width: 860px) {
  .top { flex-wrap: wrap; }
  .brand { flex: 1 1 15rem; }
  .lang { display: contents; }
  .lang-current { flex-shrink: 0; margin-left: auto; padding-inline: 0.45rem; }
  .lang-list {
    position: static;
    flex-basis: 100%;
    width: auto;
    max-width: 20rem;
    margin-inline-start: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .figure, .figure::before, .figure a::after { transition: none; }
  .figure:hover, .figure:hover a::after { transform: none; }
}

@media (max-width: 480px) {
  .stage[data-density] { --columns: 1; }
}