@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500&family=Noto+Serif+SC:wght@300;500;700&display=swap");
@font-face {
  font-family: "DIN 1451 Fette Breitschrift 1936";
  src: url("../fonts/DIN1451-36breit.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root{--bg:#fff;--header-bg:rgba(255,255,255,.97);--surface:#fafafa;--card-bg:#fff;--text:#111;--muted:#565656;--subtle:#7a7a7a;--line:#d8d8d8;--soft-line:#ececec;--accent:#ed2174;--green:#5cfc90;--accent-soft:#fae8f0;--max-width:1180px;--nav-width:1320px;--brand-divider:var(--green)}
:root[data-theme="dark"]{--bg:#101011;--header-bg:rgba(16,16,17,.96);--surface:#1a1a1d;--card-bg:#171719;--text:#f4f4f4;--muted:#c9c9c9;--subtle:#999;--line:#333338;--soft-line:#25252a;--accent:#5cfc90;--green:#5cfc90;--accent-soft:#173822;--brand-divider:#ed2174}
*{box-sizing:border-box}html{overflow-y:scroll;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Lora","Noto Serif SC","Source Han Serif SC","Songti SC",serif;font-size:16px;font-weight:300;line-height:1.75;transition:background .2s,color .2s}a{color:inherit;text-decoration:none}p{margin:0;color:var(--muted);text-wrap:pretty}img{display:block;max-width:100%}.site-header{position:sticky;top:0;z-index:20;background:var(--header-bg);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.nav{width:min(var(--nav-width),calc(100% - 32px));min-height:82px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:inline-flex;align-items:center;gap:14px;flex:0 0 auto}.brand-logos img{width:38px;height:38px;object-fit:contain}:root[data-theme="dark"] .brand-logos img{filter:invert(1) grayscale(1) contrast(1.18)}.brand-text{display:inline-flex;align-items:baseline;gap:12px;line-height:1.2;white-space:nowrap}.brand-text strong,.brand-text small{font-family:"Noto Serif SC","Source Han Serif SC",serif;font-size:19px;font-weight:500;letter-spacing:.02em}.brand-text strong{display:inline-flex;align-items:baseline;gap:13px}.brand-text strong:after{content:"";display:inline-block;width:3px;height:18px;background:var(--brand-divider);transform:translateY(2px)}.brand-text small{color:var(--accent)}.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:clamp(10px,1vw,16px);font-size:15px;white-space:nowrap}.nav-menu{position:relative;display:inline-flex;align-items:center}.nav-links>a,.nav-menu>a{position:relative;padding:28px 0 25px;color:var(--text);font-size:15px;transition:color .16s,font-size .16s}.nav-links>a.is-active,.nav-menu>a.is-active{font-size:16px;font-weight:500}.nav-links>a:after,.nav-menu>a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .18s}.nav-links>a.is-active:after,.nav-menu>a.is-active:after{transform:scaleX(1)}.nav-dropdown{position:absolute;top:100%;left:50%;min-width:200px;padding:18px;background:var(--card-bg);border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.12);transform:translate(-50%,8px);opacity:0;visibility:hidden;display:grid;gap:10px;transition:.18s}.nav-menu:hover .nav-dropdown,.nav-menu:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translate(-50%,0)}.nav-dropdown a{padding:6px 10px;border-left:3px solid var(--green);color:var(--muted)}.nav-dropdown a:hover{color:var(--text);background:var(--surface)}.nav-toggle,.theme-toggle{border:1px solid var(--line);background:var(--card-bg);color:var(--text)}.nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;gap:4px;flex-direction:column}.nav-toggle span{width:18px;height:2px;background:currentColor}.theme-toggle{width:78px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.theme-icon{width:22px;height:22px;fill:currentColor}.theme-icon-sun{color:#ed2174}.theme-icon-moon{color:#666}:root[data-theme="dark"] .theme-icon-sun{color:#777}:root[data-theme="dark"] .theme-icon-moon{color:#5cfc90}main{min-height:70vh}.home-hero{width:min(1440px,calc(100% - 48px));margin:38px auto 0;display:grid;grid-template-columns:minmax(340px,.86fr) minmax(460px,1.14fr);gap:38px;align-items:center}.home-hero-copy h1{margin:0;font-size:clamp(56px,8vw,118px);line-height:.98;font-weight:500;letter-spacing:0}.home-hero-copy h1 span,.home-hero-copy h1 small{display:block}.home-hero-copy h1 small{margin-top:8px;color:var(--accent);font-size:clamp(26px,3.2vw,48px)}.home-hero-copy>p{max-width:620px;margin-top:28px;font-size:18px}.hero-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:32px}.text-link,.inline-link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:500}.text-link:after,.inline-link:after{content:">";color:var(--accent)}.hero-media{overflow:hidden;border:1px solid var(--line);background:var(--surface)}.brand-poster img{width:100%;height:min(58vw,620px);object-fit:cover}.home-quote{width:min(var(--max-width),calc(100% - 40px));margin:42px auto 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}.home-quote p{font-size:clamp(26px,4vw,54px);color:var(--text);letter-spacing:.08em}.home-quote span{display:block;margin-top:8px;color:var(--accent)}.section-block{width:min(var(--max-width),calc(100% - 40px));margin:74px auto}.page-hero{width:min(var(--max-width),calc(100% - 40px));margin:72px auto 0;display:grid;grid-template-columns:1fr minmax(260px,520px);gap:36px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:34px}.page-label{margin:0 0 10px;color:var(--accent);text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:500}.page-hero h1{margin:0;font-size:clamp(44px,7vw,96px);line-height:1.04;font-weight:500}.page-hero>p{font-size:18px}.intro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.intro-grid article{background:var(--bg);padding:36px}.intro-grid h2,.section-heading h2,.text-stack h2,.detail-panel h2,.process-grid h2{margin:0 0 12px;font-size:28px;line-height:1.25;font-weight:500}.entry-grid,.group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.group-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.entry-card{min-height:220px;border:1px solid var(--line);background:var(--card-bg);padding:22px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .18s,border-color .18s,box-shadow .18s}.entry-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 48px rgba(0,0,0,.1)}.entry-card figure{height:150px;margin:-6px -6px 18px;display:grid;place-items:center;background:var(--surface);overflow:hidden}.entry-card figure img{width:100%;height:100%;object-fit:contain}.entry-card span{color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.entry-card strong{margin-top:6px;font-size:24px;line-height:1.25;font-weight:500}.entry-card small{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.6}.split-section,.group-detail,.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:28px;align-items:center}.split-section p,.text-stack p,.contact-layout p{margin-top:12px}.media-frame,.group-symbol{border:1px solid var(--line);background:var(--surface);overflow:hidden}.media-frame img{width:100%;height:420px;object-fit:cover}.group-symbol{display:grid;place-items:center;min-height:360px}.group-symbol img{width:70%;max-height:300px;object-fit:contain}:root[data-theme="dark"] .group-symbol img,:root[data-theme="dark"] .entry-card figure img:not([src*="鎴愪负"]):not([src*="鏆楄壊"]){filter:invert(1) grayscale(1) contrast(1.1)}.detail-panel{align-self:stretch;border:1px solid var(--line);padding:32px;background:var(--card-bg);display:flex;flex-direction:column;justify-content:center;gap:24px}.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}.tag-cloud span{padding:8px 12px;border:1px solid var(--line);background:var(--surface);color:var(--text)}.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.process-grid article{background:var(--bg);padding:28px;min-height:210px}.process-grid article>span{display:block;margin-bottom:20px;color:var(--accent);font-size:28px}.timeline{display:grid;gap:0;border-left:1px solid var(--line)}.timeline article{position:relative;padding:0 0 34px 34px}.timeline article span{position:absolute;left:-7px;top:8px;width:13px;height:13px;border-radius:50%;background:var(--accent)}.timeline h2{margin:0 0 8px;font-size:28px;font-weight:500}.text-stack{max-width:860px}.contact-card,address{font-style:normal;border:1px solid var(--line);background:var(--card-bg);padding:30px}.site-footer{margin-top:90px;padding:34px 20px;border-top:1px solid var(--line);text-align:center}.site-footer p{font-size:14px;color:var(--subtle)}@media (max-width:1100px){.brand-text small{display:none}.nav-links{gap:10px}.group-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-hero{grid-template-columns:1fr}.page-hero{grid-template-columns:1fr}.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:860px){.nav{min-height:72px}.nav-toggle{display:inline-flex}.nav-links{position:absolute;left:0;right:0;top:72px;background:var(--header-bg);border-bottom:1px solid var(--line);padding:16px 24px;display:none;flex-direction:column;align-items:stretch;white-space:normal}.nav-links.is-open{display:flex}.nav-links>a,.nav-menu>a{padding:10px 0}.nav-menu{display:block}.nav-dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;margin:6px 0 10px;padding:10px;background:var(--surface)}.theme-toggle{width:54px}.theme-icon-moon{display:none}.brand-text strong{font-size:17px}.home-hero{width:min(100% - 28px,720px);margin-top:28px}.home-hero-copy h1{font-size:52px}.section-block,.page-hero{width:calc(100% - 28px);margin-top:48px}.intro-grid,.entry-grid,.group-grid,.split-section,.group-detail,.contact-layout,.process-grid{grid-template-columns:1fr}.media-frame img{height:300px}.entry-card{min-height:auto}.group-symbol{min-height:260px}}
/* First visual tuning pass after content review */
.home-hero {
  width: min(1260px, calc(100% - 56px));
  grid-template-columns: minmax(300px, 0.74fr) minmax(520px, 1.26fr);
  gap: 46px;
  margin-top: 54px;
}
.home-hero-copy h1 {
  font-size: clamp(42px, 5.4vw, 82px);
  line-height: 1.08;
}
.home-hero-copy h1 small {
  font-size: clamp(22px, 2.3vw, 34px);
}
.home-hero-copy > p {
  max-width: 560px;
  font-size: 17px;
}
.hero-media.brand-poster {
  border: 0;
  background: #070707;
}
.brand-poster img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}
.page-hero {
  margin-top: 62px;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.82fr);
  gap: 44px;
}
.page-hero h1 {
  max-width: 820px;
  font-size: clamp(40px, 4.65vw, 72px);
  line-height: 1.08;
}
.page-hero > p {
  max-width: 560px;
  font-size: 17px;
}
.group-grid {
  gap: 20px;
}
.group-grid .entry-card {
  min-height: 330px;
}
.group-grid .entry-card figure {
  height: 138px;
  margin: -2px -2px 20px;
}
.group-grid .entry-card figure img {
  width: 82%;
  height: 82%;
}
.entry-card strong {
  font-size: 22px;
}
.entry-card small {
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 1200px) {
  .home-hero {
    grid-template-columns: 1fr;
  }
  .brand-poster img {
    max-height: none;
  }
}
@media (max-width: 860px) {
  .home-hero {
    width: calc(100% - 28px);
    gap: 28px;
  }
  .home-hero-copy h1 {
    font-size: clamp(40px, 12vw, 56px);
  }
  .page-hero h1 {
    font-size: clamp(36px, 11vw, 52px);
  }
  .group-grid .entry-card {
    min-height: auto;
  }
}

.method-list {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.method-list article {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 34px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.method-list article:first-child {
  border-top: 0;
}
.method-list span {
  color: var(--accent);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 500;
}
.method-list h2 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.24;
  font-weight: 500;
}
.method-list p {
  max-width: 820px;
  margin-top: 14px;
  font-size: 16px;
}
@media (max-width: 860px) {
  .method-list article {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .method-list h2 {
    font-size: 24px;
  }
}


/* Reused organization visualization from the mechanical group site */
.qianli-hero > p {
  max-width: 520px;
}

.organization-section {
  padding-top: 52px;
}

.organization-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(360px, 1fr);
  align-items: end;
  gap: 72px;
  margin-bottom: 28px;
}

.organization-intro h1,
.organization-intro h2 {
  margin: 2px 0 0;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.3;
}

.organization-intro > p {
  max-width: 660px;
  padding-bottom: 5px;
  font-size: 17px;
  line-height: 1.8;
}

.organization-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(680px, 100%);
  margin-bottom: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.organization-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.organization-tabs button svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: currentColor;
}

.organization-tabs button:last-child {
  border-right: 0;
}

.organization-tabs button::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.35);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.organization-tabs button:hover,
.organization-tabs button:focus-visible,
.organization-tabs button.is-active {
  background: var(--card-bg);
  color: var(--text);
}

.organization-tabs button.is-active {
  font-weight: 500;
}

.organization-tabs button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.organization-tabs button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.organization-stage {
  min-height: 590px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.org-lane {
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
  gap: 34px;
  padding: 26px 0;
  border-bottom: 1px solid var(--soft-line);
}

.org-lane:last-child {
  border-bottom: 0;
}

.org-lane-label {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  padding-top: 4px;
}

.org-lane-label > span {
  color: var(--accent);
  font-family: "Lora", serif;
  font-size: 13px;
  font-weight: 500;
}

.org-lane-label h2 {
  margin: 0 0 7px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
}

.org-lane-label p {
  font-size: 13px;
  line-height: 1.65;
}

.org-lane-track {
  display: grid;
  align-items: stretch;
  gap: 14px;
}

.org-lane-track--single {
  grid-template-columns: minmax(0, 1fr);
}

.org-lane-track--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.org-lane-track--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.org-lane-track--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.org-lane-track--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.org-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 142px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: inherit;
  text-decoration: none;
  outline: none;
  transition:
    opacity 160ms linear,
    transform 160ms ease,
    border-color 160ms ease,
    background-color 240ms ease,
    box-shadow 160ms ease;
}

.org-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--soft-line);
  transition: background-color 160ms ease;
}

.org-card:hover,
.org-card:focus-visible,
.org-card.is-focused {
  z-index: 2;
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.org-card:hover::before,
.org-card:focus-visible::before,
.org-card.is-focused::before {
  background: var(--accent);
}

.organization-stage.has-focus .org-card {
  opacity: 0.48;
}

.organization-stage.has-focus .org-card.is-focused {
  opacity: 1;
}

.org-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Recruitment schedule and application details. */
.recruit-section {
  align-items: start;
}

.recruit-info > h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
}

.recruit-info-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.recruit-info-block h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
}

.recruit-info-block p {
  margin: 0;
}

.recruit-info-block a {
  color: var(--accent);
  overflow-wrap: anywhere;
}

.recruit-schedule {
  margin: 0;
}

.recruit-schedule > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.recruit-schedule > div:last-child {
  border-bottom: 0;
}

.recruit-schedule dt {
  color: var(--text);
  font-weight: 500;
}

.recruit-schedule dd {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 560px) {
  .recruit-schedule > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.org-card-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.org-card-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
}

.org-lane-track--five .org-card-head h3 {
  font-size: 17px;
  white-space: nowrap;
}

.org-card-title > span {
  color: var(--accent);
  font-size: 12px;
  line-height: 1.5;
}

.org-card-logo {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
}

.org-card-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

.org-card-logo--pair {
  grid-template-columns: repeat(2, 1fr);
  width: 56px;
  flex-basis: 56px;
}

.org-card-logo--pair img {
  width: 27px;
  height: 27px;
}

:root[data-theme="dark"] .org-card-logo img {
  filter: brightness(0) saturate(100%) invert(1);
}

:root[data-theme="dark"] .org-card-logo--pair img {
  filter: none;
}

.org-card-detail {
  font-size: 13px;
  line-height: 1.65;
}

.org-card-tags,
.org-child-units {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.org-card-tag {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

.org-child-units .org-card-tag {
  flex: 1 1 100px;
  justify-content: center;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.org-card--management {
  min-height: 188px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.org-card--management::before,
.org-card--global::before {
  background: var(--brand-divider);
}

.org-card--tone-blue {
  background: color-mix(in srgb, var(--card-bg) 91%, #6e9dca);
}

.org-card--tone-blue::before {
  background: #6e9dca;
}

.org-card--tone-teal {
  background: color-mix(in srgb, var(--card-bg) 91%, #64aaa0);
}

.org-card--tone-teal::before {
  background: #64aaa0;
}

.org-card--tone-green {
  background: color-mix(in srgb, var(--card-bg) 91%, #62a66f);
}

.org-card--tone-green::before {
  background: #62a66f;
}

.org-card--tone-amber {
  background: color-mix(in srgb, var(--card-bg) 91%, #c59a4b);
}

.org-card--tone-amber::before {
  background: #c59a4b;
}

.org-card--tone-violet {
  background: color-mix(in srgb, var(--card-bg) 91%, #8976b2);
}

.org-card--tone-violet::before {
  background: #8976b2;
}

.org-card--tone-rose {
  background: color-mix(in srgb, var(--card-bg) 91%, #bd6f84);
}

.org-card--tone-rose::before {
  background: #bd6f84;
}

.org-management-sections {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
}

.org-management-sections > div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.org-management-sections strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.org-card--advisor::before {
  background: #9a6bbd;
}

.org-card--core::before {
  background: #c49a36;
}

.org-card--formal::before {
  background: #9aa1aa;
}

.org-card--trainee::before {
  background: #b9784b;
}

.organization-context {
  display: grid;
  grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr);
  gap: 22px;
  min-height: 72px;
  padding: 17px 0 0;
}

.organization-context strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.organization-context span {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1080px) {
  .about-subpage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-intro {
    grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1fr);
    gap: 36px;
  }

  .org-lane {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 24px;
  }

  .org-lane-track--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .org-lane-track--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .organization-section {
    padding-top: 36px;
  }

  .organization-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 22px;
  }

  .organization-intro h1,
  .organization-intro h2 {
    font-size: 29px;
  }

  .organization-intro > p {
    min-width: 0;
    font-size: 15px;
  }

  .organization-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-tabs button:nth-child(2) {
    border-right: 0;
  }

  .organization-tabs button:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .organization-stage {
    min-height: 0;
  }

  .org-lane {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }

  .org-lane-label {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .org-lane-track--two,
  .org-lane-track--three,
  .org-lane-track--four,
  .org-lane-track--five {
    grid-template-columns: 1fr;
  }

  .org-card {
    min-height: 0;
  }

  .org-management-sections,
  .organization-context {
    grid-template-columns: 1fr;
  }

  .organization-context {
    gap: 4px;
    min-height: 94px;
  }
}

/* Polished technical group cards: normalized icon canvas and fixed baselines */
.group-grid {
  align-items: stretch;
}
.group-grid .entry-card {
  display: grid;
  grid-template-rows: 174px 42px 52px minmax(112px, 1fr);
  align-content: start;
  justify-content: stretch;
  min-height: 438px;
  padding: 26px 22px 28px;
}
.group-grid .entry-card figure {
  width: 100%;
  height: 174px;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--surface);
}
.group-grid .entry-card figure img {
  width: 142px;
  height: 142px;
  object-fit: contain;
}
.group-grid .entry-card span {
  display: flex;
  align-items: end;
  min-height: 42px;
  margin: 0;
  line-height: 1.35;
}
.group-grid .entry-card strong {
  display: flex;
  align-items: start;
  min-height: 52px;
  margin-top: 0;
  font-size: 23px;
  line-height: 1.28;
}
.group-grid .entry-card small {
  display: block;
  margin-top: 0;
  line-height: 1.72;
}
.group-grid .entry-card figure img {
  filter: brightness(0) saturate(100%);
}

/* Global recruitment letter. */
html.has-recruit-letter {
  overflow: hidden;
}

.recruit-letter-trigger {
  position: fixed;
  top: 50%;
  right: clamp(30px, 3.2vw, 58px);
  bottom: auto;
  z-index: 19;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line));
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.recruit-letter-trigger i {
  font-size: 25px;
  line-height: 1;
}

.recruit-letter-trigger:hover,
.recruit-letter-trigger:focus-visible {
  background: var(--accent);
  color: #111;
  transform: translate(-4px, -50%);
  outline: 0;
}

body[data-page="home"] .recruit-letter-trigger {
  animation: recruit-letter-attention 5s ease-out infinite;
}

body[data-page="home"] .recruit-letter-trigger:hover,
body[data-page="home"] .recruit-letter-trigger:focus-visible {
  animation-play-state: paused;
}

@keyframes recruit-letter-attention {
  0%, 72%, 100% {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }
  80% {
    border-color: var(--accent);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18), 0 0 0 7px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 58%, transparent);
  }
  90% {
    border-color: var(--accent);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18), 0 0 0 2px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 32%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .recruit-letter-trigger {
    animation: none;
  }
}

.recruit-letter-dialog {
  width: min(1080px, calc(100% - 32px));
  max-width: none;
  max-height: min(88dvh, 900px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}

.recruit-letter-dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(3px);
}

.recruit-letter-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(88dvh, 900px);
}

.recruit-letter-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 238px;
  min-height: 0;
}

.recruit-letter-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.recruit-letter-header .page-label {
  margin-bottom: 5px;
  font-size: 10px;
}

.recruit-letter-header h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
}

.recruit-letter-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.recruit-letter-close:hover,
.recruit-letter-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.recruit-letter-close i {
  font-size: 21px;
  line-height: 1;
}

.recruit-letter-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 28px 36px;
  scrollbar-color: var(--accent) var(--surface);
}

.recruit-letter-content > * {
  width: min(100%, 68ch);
  margin-right: auto;
  margin-left: auto;
}

.recruit-letter-content p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
  text-indent: 2em;
}

.recruit-letter-content p + p {
  margin-top: 10px;
}

.recruit-letter-content strong {
  color: var(--text);
  font-weight: 600;
}

.recruit-letter-content .recruit-letter-lead,
.recruit-letter-content .recruit-letter-closing {
  color: var(--text);
}

.recruit-letter-content .recruit-letter-lead {
  margin-bottom: 15px;
}

.recruit-letter-content .recruit-letter-closing {
  margin-top: 18px;
}

.recruit-letter-opening {
  padding: 30px 0 26px;
}

.recruit-letter-opening p:first-child,
.recruit-letter-opening p:last-child {
  color: var(--text);
}

.recruit-letter-content section {
  padding: 30px 0 28px;
  border-top: 1px solid var(--line);
}

.recruit-letter-content h3 {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  margin: 0 0 18px;
  font-size: 21px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0;
}

.recruit-letter-content h3 span {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.recruit-letter-content h4 {
  margin: 27px 0 13px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0;
}

.recruit-letter-lines,
.recruit-letter-questions {
  margin: 16px 0;
  padding: 13px 16px;
  border-left: 2px solid var(--accent);
  background: var(--surface);
}

.recruit-letter-lines p,
.recruit-letter-questions p {
  color: var(--text);
  text-indent: 0;
}

.recruit-letter-lines p + p,
.recruit-letter-questions p + p {
  margin-top: 3px;
}

.recruit-letter-content blockquote {
  margin: 22px 0;
  padding: 17px 20px;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  color: var(--text);
  font-size: 20px;
  text-align: center;
}

.recruit-letter-content .recruit-letter-callout {
  padding: 15px 18px;
  border: 0;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  text-indent: 0;
}

.recruit-letter-content .recruit-letter-warning {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.recruit-letter-content .recruit-letter-dialogue {
  width: min(100%, 30em);
  margin-right: auto;
  margin-left: auto;
  font-size: 18px;
  font-style: italic;
}

.recruit-letter-signature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 4px;
  border-top: 1px solid var(--line);
  color: var(--text);
}

.recruit-letter-signature a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}

.recruit-letter-toc {
  min-height: 0;
  overflow-y: auto;
  padding: 28px 20px;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, var(--card-bg));
  scrollbar-width: none;
}

.recruit-letter-toc::-webkit-scrollbar {
  display: none;
}

.recruit-letter-toc > p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.recruit-letter-toc ol,
.recruit-letter-toc li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recruit-letter-toc li + li {
  margin-top: 3px;
}

.recruit-letter-toc button {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  padding: 9px 9px 9px 10px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.recruit-letter-toc button span {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.85;
}

.recruit-letter-toc button:hover,
.recruit-letter-toc button:focus-visible,
.recruit-letter-toc button.is-active {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  outline: 0;
}

@media (max-width: 820px) {
  .recruit-letter-dialog {
    width: min(760px, calc(100% - 24px));
  }

  .recruit-letter-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .recruit-letter-toc {
    display: none;
  }
}

@media (max-width: 620px) {
  .recruit-letter-trigger {
    top: 50%;
    right: 12px;
    bottom: auto;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
  }

  .recruit-letter-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  .recruit-letter-shell {
    max-height: calc(100dvh - 16px);
  }

  .recruit-letter-header {
    gap: 14px;
    padding: 18px 18px 16px;
  }

  .recruit-letter-header h2 {
    font-size: 20px;
  }

  .recruit-letter-content {
    padding: 0 18px 28px;
  }

  .recruit-letter-opening {
    padding-top: 24px;
  }

  .recruit-letter-content section {
    padding: 25px 0 23px;
  }

  .recruit-letter-content h3 {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    font-size: 18px;
  }

  .recruit-letter-content p {
    font-size: 14px;
    line-height: 1.85;
  }

  .recruit-letter-signature {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

:root[data-theme="dark"] .group-grid .entry-card figure img {
  filter: none;
}

/* Technical group selection colors mirror the organization diagram. */
.group-grid .entry-card:nth-child(1) {
  --group-tone: #c59a4b;
}

.group-grid .entry-card:nth-child(2) {
  --group-tone: #6e9dca;
}

.group-grid .entry-card:nth-child(3) {
  --group-tone: #8976b2;
}

.group-grid .entry-card:nth-child(4) {
  --group-tone: #62a66f;
}

.group-grid .entry-card:nth-child(5) {
  --group-tone: #bd6f84;
}

.group-grid .entry-card:hover,
.group-grid .entry-card:focus-visible,
.group-grid .entry-card:active,
.group-grid .entry-card.is-active {
  border-color: var(--group-tone);
  background: color-mix(in srgb, var(--card-bg) 91%, var(--group-tone));
  box-shadow: 0 14px 34px color-mix(in srgb, transparent 82%, var(--group-tone));
}

.group-grid .entry-card:hover figure,
.group-grid .entry-card:focus-visible figure,
.group-grid .entry-card:active figure,
.group-grid .entry-card.is-active figure {
  background: color-mix(in srgb, var(--surface) 91%, var(--group-tone));
}

.group-grid .entry-card:focus-visible {
  outline: 2px solid var(--group-tone);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .group-grid .entry-card {
    grid-template-rows: 160px 38px 48px auto;
    min-height: 400px;
  }
  .group-grid .entry-card figure {
    height: 160px;
  }
  .group-grid .entry-card figure img {
    width: 132px;
    height: 132px;
  }
}
@media (max-width: 860px) {
  .group-grid .entry-card {
    grid-template-rows: 148px auto auto auto;
    min-height: auto;
  }
  .group-grid .entry-card figure {
    height: 148px;
  }
}

/* Compact method list with image slots */
.method-list {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.method-list article {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(220px, 300px);
  gap: 28px;
  align-items: center;
  min-height: 168px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.method-list article:first-child {
  border-top: 0;
}
.method-list span {
  color: var(--accent);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 500;
}
.method-list h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.28;
  font-weight: 500;
}
.method-list p {
  max-width: 780px;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
}
.method-media {
  align-self: stretch;
  min-height: 124px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.method-media span {
  color: var(--subtle);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.method-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 980px) {
  .method-list article {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .method-media {
    grid-column: 2;
    min-height: 150px;
  }
}
@media (max-width: 680px) {
  .method-list article {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 0;
  }
  .method-list h2 {
    font-size: 22px;
  }
  .method-media {
    grid-column: auto;
  }
}

/* Smaller method typography refinement */
.method-list article {
  min-height: 150px;
  padding: 18px 0;
}
.method-list span {
  font-size: 19px;
}
.method-list h2 {
  font-size: clamp(19px, 1.55vw, 24px);
  line-height: 1.32;
}
.method-list p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
}
.method-media {
  min-height: 110px;
}
@media (max-width: 680px) {
  .method-list h2 {
    font-size: 20px;
  }
}

/* Match mechanical subsite dropdown menu typography */
.nav-dropdown a {
  font-size: 14px;
  line-height: 1.4;
}

/* Home quote and acknowledgements reused from the mechanical group site */
.home-quote {
  position: relative;
  min-height: 136px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 108px 16px 128px;
  text-align: initial;
}

.quote-stage {
  min-width: 0;
  min-height: 102px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 360ms ease, transform 360ms ease;
}

.quote-stage.is-switching {
  opacity: 0;
  transform: translateY(4px);
}

.quote-stage p {
  color: var(--text);
  font-size: 24px;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0;
  text-wrap: balance;
}

.quote-stage span {
  display: block;
  margin-top: 2px;
  color: var(--subtle);
  font-size: 14px;
}

.quote-random-button {
  transform: translateX(20px);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.quote-random-button:hover,
.quote-random-button:focus-visible {
  border-color: var(--accent);
  transform: translateX(20px) rotate(18deg);
}

.quote-random-button svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.acknowledgements {
  padding-bottom: 76px;
}

/* Culture inheritance and standalone talent portrait */
.culture-page-hero > p,
.persona-page-hero > p {
  max-width: 520px;
}

.culture-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.culture-manifesto {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  column-gap: clamp(48px, 7vw, 110px);
  row-gap: 18px;
  align-items: start;
  padding: 42px 0;
  border-bottom: 1px solid var(--line);
}

.culture-manifesto .culture-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.culture-manifesto h2 {
  margin: 0;
  font-size: clamp(24px, 2.05vw, 32px);
  font-weight: 500;
  line-height: 1.38;
  text-align: left;
  white-space: nowrap;
}

.culture-manifesto > p:not(.culture-kicker) {
  color: var(--text);
  font-size: 17px;
  line-height: 2;
}

.culture-manifesto blockquote {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding: 24px 30px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--text);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.75;
}

.culture-section-heading {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: end;
  margin-bottom: 30px;
}

.culture-section-heading h2,
.culture-contract-intro h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.25;
}

.culture-section-heading > p {
  max-width: 620px;
  padding-bottom: 4px;
  font-size: 16px;
}

.culture-motive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.culture-motive-grid article {
  min-height: 230px;
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}

.culture-motive-grid article:last-child {
  border-right: 0;
}

.culture-motive-grid span,
.culture-pathway-list > li > span {
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.culture-motive-grid h3,
.culture-pathway-list h3,
.culture-contract-list h3 {
  margin: 36px 0 10px;
  font-size: 22px;
  font-weight: 500;
}

.culture-motive-grid p,
.culture-pathway-list p,
.culture-contract-list p {
  font-size: 15px;
  line-height: 1.85;
}

.culture-pathway-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.culture-pathway-list li {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.culture-pathway-list > li > span {
  padding-top: 7px;
  font-size: 16px;
}

.culture-pathway-list h3 {
  margin: 0 0 8px;
}

.culture-pathway-list p {
  max-width: 980px;
}

.culture-contract {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(480px, 1.2fr);
  gap: clamp(44px, 7vw, 110px);
  padding: 42px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.culture-contract-intro > p:not(.culture-kicker) {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.95;
}

.culture-contract-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.culture-contract-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  min-height: 170px;
  padding: 24px;
  background: var(--bg);
}

.culture-contract-list i {
  color: var(--accent);
  font-size: 26px;
}

.culture-contract-list h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.culture-pillar-list {
  border-top: 1px solid var(--line);
}

.culture-pillar {
  --pillar-tone: var(--accent);
  display: grid;
  grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1.58fr);
  gap: clamp(38px, 6vw, 96px);
  padding: 38px 0 42px;
  border-bottom: 1px solid var(--line);
}

.culture-pillar--equal {
  --pillar-tone: #5ce092;
}

.culture-pillar--inheritance {
  --pillar-tone: #68a9ed;
}

.culture-pillar--engineering {
  --pillar-tone: #e9a85f;
}

.culture-pillar-head {
  position: relative;
  align-self: start;
  min-height: 150px;
  padding: 12px 20px 16px 0;
  border-right: 2px solid var(--pillar-tone);
}

.culture-pillar-head > span {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--pillar-tone);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.culture-pillar-head > i {
  position: absolute;
  top: 6px;
  right: 18px;
  color: var(--pillar-tone);
  font-size: 31px;
  line-height: 1;
  opacity: 0.82;
}

.culture-pillar-head > p {
  margin: 0 0 8px;
  color: var(--pillar-tone);
  font-family: var(--font-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.culture-pillar-head h3 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 500;
  line-height: 1.25;
}

.culture-pillar-copy {
  min-width: 0;
}

.culture-pillar-lead {
  max-width: 980px;
  margin: 0 0 28px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.9;
}

.culture-pillar-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.culture-pillar-points > div {
  min-height: 150px;
  padding: 22px 22px 8px 0;
}

.culture-pillar-points > div + div {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.culture-pillar-points strong {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
}

.culture-pillar-points p {
  font-size: 14px;
  line-height: 1.85;
}

.culture-practice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.culture-practice-grid article {
  position: relative;
  min-height: 210px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.culture-practice-grid i {
  position: absolute;
  top: 25px;
  right: 26px;
  color: var(--accent);
  font-size: 28px;
  line-height: 1;
  opacity: 0.78;
}

.culture-practice-grid span {
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.culture-practice-grid h3 {
  margin: 34px 0 10px;
  font-size: 21px;
  font-weight: 500;
}

.culture-practice-grid p {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.85;
}

.culture-closing {
  max-width: 980px;
  text-align: center;
}

.culture-closing p {
  color: var(--text);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.75;
}

.culture-closing small {
  display: inline;
  color: var(--subtle);
  font-size: 13px;
}

.culture-report-source {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.culture-report-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.culture-report-open i {
  color: var(--accent);
  font-size: 18px;
}

.culture-report-open:hover,
.culture-report-open:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  outline: 0;
}

html.has-culture-report {
  overflow: hidden;
}

.culture-report-dialog {
  width: min(1120px, calc(100% - 32px));
  max-width: none;
  max-height: min(90dvh, 920px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.culture-report-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(4px);
}

.culture-report-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(90dvh, 920px);
}

.culture-report-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  padding: 28px 30px 24px;
  border-bottom: 1px solid var(--line);
}

.culture-report-label,
.culture-report-section-label {
  margin: 0 0 7px;
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.culture-report-header h2 {
  margin: 0;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1.28;
}

.culture-report-header > div > p:last-child {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.culture-report-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 21px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.culture-report-close:hover,
.culture-report-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
  transform: rotate(5deg);
}

.culture-report-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  min-height: 0;
}

.culture-report-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
  scrollbar-width: thin;
  padding: 0 34px 38px;
}

.culture-report-content > section {
  max-width: 780px;
  margin: 0 auto;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 24px;
}

.culture-report-content > section:last-child {
  border-bottom: 0;
}

.culture-report-content h3 {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 500;
  line-height: 1.35;
}

.culture-report-content p,
.culture-report-content li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.culture-report-content p {
  margin: 0 0 14px;
}

.culture-report-content strong {
  color: var(--text);
  font-weight: 600;
}

.culture-report-lead {
  color: var(--text) !important;
  font-size: 17px !important;
}

.culture-report-cards,
.culture-report-mechanisms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.culture-report-cards > div,
.culture-report-mechanisms > div {
  padding: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.culture-report-cards p,
.culture-report-mechanisms p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
}

.culture-report-mechanisms i {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 24px;
}

.culture-report-content blockquote {
  margin: 24px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text);
  font-size: 17px;
  line-height: 1.85;
}

.culture-report-list {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.culture-report-list li {
  padding: 10px 0 10px 16px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 48%, var(--line));
}

.culture-report-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.culture-report-compare > div {
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.culture-report-compare span {
  color: var(--text);
  font-weight: 600;
}

.culture-report-compare ul {
  margin: 14px 0 0;
  padding-left: 1.2em;
}

.culture-report-note {
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 46%, var(--line));
  color: var(--subtle) !important;
  font-size: 13px !important;
}

.culture-report-toc {
  min-height: 0;
  overflow-y: auto;
  padding: 28px 18px;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, var(--card-bg));
}

.culture-report-toc > p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.culture-report-toc button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 10px 9px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.culture-report-toc button span {
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 10px;
  line-height: 1.9;
}

.culture-report-toc button:hover,
.culture-report-toc button:focus-visible,
.culture-report-toc button.is-active {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  outline: 0;
}

@media (max-width: 820px) {
  .culture-report-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .culture-report-toc {
    display: none;
  }
}

@media (max-width: 620px) {
  .culture-report-source {
    flex-direction: column;
    gap: 10px;
  }

  .culture-report-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  .culture-report-shell {
    max-height: calc(100dvh - 16px);
  }

  .culture-report-header {
    gap: 14px;
    padding: 22px 18px 18px;
  }

  .culture-report-close {
    width: 38px;
    height: 38px;
  }

  .culture-report-content {
    padding: 0 18px 28px;
  }

  .culture-report-content > section {
    padding: 28px 0;
  }

  .culture-report-cards,
  .culture-report-mechanisms,
  .culture-report-compare {
    grid-template-columns: 1fr;
  }
}

.join-persona {
  display: grid;
  gap: 42px;
}

.persona-page {
  --trait-self: #edb858;
  --trait-team: #68a9ed;
  --trait-work: #e86b72;
}

.join-lead {
  max-width: 1180px;
  margin: 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.95;
  text-wrap: pretty;
}

.trait-group {
  --trait-tone: var(--accent);
  display: grid;
  gap: 18px;
  scroll-margin-top: 112px;
}

.trait-group--self {
  --trait-tone: var(--trait-self);
}

.trait-group--team {
  --trait-tone: var(--trait-team);
}

.trait-group--work {
  --trait-tone: var(--trait-work);
}

.trait-group-heading {
  display: grid;
  grid-template-columns: max-content minmax(280px, 1fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: end;
}

.trait-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

.trait-heading-icon {
  width: 28px;
  color: var(--trait-tone);
  font-size: 27px;
  line-height: 1;
  text-align: center;
}

.trait-intro {
  width: min(100%, 820px);
  margin: 0;
  justify-self: end;
  padding-bottom: 2px;
  text-align: right;
}

.trait-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.trait-card {
  position: relative;
  min-height: 144px;
  padding: 24px;
  border: 1px solid var(--line);
  outline: none;
  background: var(--card-bg);
  overflow: hidden;
  transition: border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.trait-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--trait-tone);
  content: "";
  opacity: 0.72;
  transform: scaleY(0.34);
  transition: opacity 300ms ease, transform 300ms ease;
}

.trait-card-icon {
  position: absolute;
  top: 21px;
  right: 22px;
  color: var(--trait-tone);
  font-size: 27px;
  line-height: 1;
  opacity: 0.72;
  transition: opacity 300ms ease, transform 300ms ease;
}

.trait-card:hover,
.trait-card:focus-visible,
.trait-card:focus-within {
  border-color: var(--trait-tone);
  background: color-mix(in srgb, var(--trait-tone) 8%, var(--card-bg));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--trait-tone) 12%, transparent);
  transform: translateY(-2px);
}

.trait-card:is(:hover, :focus-visible, :focus-within)::before {
  opacity: 1;
  transform: scaleY(1);
}

.trait-card:is(:hover, :focus-visible, :focus-within) .trait-card-icon {
  opacity: 1;
  transform: translateY(-2px) scale(1.06);
}

.trait-card h3 {
  padding-right: 42px;
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.trait-summary,
.trait-detail {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.trait-detail {
  max-height: 0;
  line-height: 1.75;
  opacity: 0;
  overflow: hidden;
  transition: max-height 300ms ease, margin-top 300ms ease, opacity 300ms ease;
}

.trait-card:hover .trait-detail,
.trait-card:focus-visible .trait-detail,
.trait-card:focus-within .trait-detail {
  max-height: 280px;
  margin-top: 16px;
  opacity: 1;
}

.member-section-rail button.persona-rail-self {
  --accent: #edb858;
}

.member-section-rail button.persona-rail-team {
  --accent: #68a9ed;
}

.member-section-rail button.persona-rail-work {
  --accent: #e86b72;
}

@media (max-width: 980px) {
  .culture-manifesto,
  .culture-section-heading,
  .culture-contract {
    grid-template-columns: 1fr;
  }

  .culture-motive-grid,
  .culture-contract-list,
  .culture-practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .culture-pillar {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .culture-pillar-head {
    min-height: 0;
    padding-right: 0;
    padding-bottom: 22px;
    border-right: 0;
    border-bottom: 2px solid var(--pillar-tone);
  }

  .culture-pillar-head > i {
    right: 2px;
  }

  .trait-group-heading {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }

  .trait-intro {
    width: 100%;
    justify-self: start;
    text-align: left;
  }

  .culture-motive-grid article:nth-child(2) {
    border-right: 0;
  }

  .culture-motive-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .trait-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .culture-manifesto {
    padding: 28px 0;
  }

  .culture-manifesto blockquote {
    padding: 20px;
  }

  .culture-motive-grid,
  .culture-contract-list,
  .culture-practice-grid,
  .culture-pillar-points,
  .trait-grid {
    grid-template-columns: 1fr;
  }

  .culture-pillar-points > div {
    min-height: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }

  .culture-pillar-points > div + div {
    padding-left: 0;
    border-left: 0;
  }

  .culture-pillar-points > div:last-child {
    border-bottom: 0;
  }

  .culture-motive-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .culture-motive-grid article:last-child {
    border-bottom: 0;
  }

  .culture-pathway-list li {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .culture-contract-list article {
    min-height: 0;
  }

  .join-persona {
    gap: 34px;
  }

  .join-lead {
    font-size: 17px;
  }

  .trait-card {
    min-height: 0;
    padding: 20px;
  }

  .trait-card-icon {
    top: 18px;
    right: 18px;
  }
}

/* Interactive team meme archive */
.has-meme-dialog {
  overflow: hidden;
}

.meme-page-hero {
  align-items: center;
}

.meme-page-hero h1 {
  font-size: clamp(42px, 5vw, 70px);
}

@media (min-width: 861px) {
  .meme-page-hero {
    grid-template-columns: max-content minmax(620px, 1fr);
  }

  .meme-hero-copy {
    max-width: none;
    white-space: nowrap;
  }
}

.meme-stage {
  margin-top: 34px;
}

.meme-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.meme-stage-actions,
.meme-year-filters {
  display: flex;
  align-items: center;
}

.meme-stage-actions {
  gap: 10px;
}

.meme-year-filters {
  border: 1px solid var(--line);
}

.meme-year-filters button,
.meme-season-picker summary,
.meme-random-button {
  min-height: 42px;
  border: 0;
  background: var(--card-bg);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}

.meme-year-filters button {
  padding: 0 15px;
  border-right: 1px solid var(--line);
}

.meme-year-filters button:last-child {
  border-right: 0;
}

.meme-year-filters button:hover,
.meme-year-filters button.is-active,
.meme-season-picker.is-active > summary {
  background: var(--accent);
  color: var(--bg);
}

.meme-season-picker {
  position: relative;
}

.meme-season-picker summary {
  display: flex;
  min-width: 126px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  list-style: none;
  border-left: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}

.meme-season-picker summary::-webkit-details-marker {
  display: none;
}

.meme-season-picker summary i {
  font-size: 17px;
  transition: transform .18s;
}

.meme-season-picker[open] summary i {
  transform: rotate(180deg);
}

.meme-season-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: -1px;
  z-index: 8;
  display: grid;
  width: 142px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

.meme-season-menu button {
  width: 100%;
  border-right: 0;
  border-bottom: 1px solid var(--soft-line);
  text-align: left;
}

.meme-season-menu button:last-child {
  border-bottom: 0;
}

.meme-random-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--line);
}

.meme-random-button:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
}

.meme-random-button i {
  color: var(--accent);
  font-size: 18px;
}

.meme-stream-shell {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.meme-stream-corner {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--subtle);
  font-family: Arial, sans-serif;
  line-height: 1.05;
  pointer-events: none;
}

.meme-stream-corner span {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.meme-stream-corner strong {
  font-size: 11px;
  letter-spacing: .12em;
}

.meme-stream-corner--toolbar {
  position: static;
  flex: 0 0 auto;
  min-width: 116px;
}

.meme-streams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 18px 0;
}

.meme-particle {
  position: absolute;
  left: 0;
  z-index: 1;
  width: max-content;
  max-width: none;
  will-change: transform;
}

.meme-particle.is-static {
  transform: none;
}

.meme-barrage-word {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: none;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 12px;
  min-width: 164px;
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--meme-color) 48%, var(--line));
  border-radius: 3px;
  background: color-mix(in srgb, var(--meme-color) 10%, var(--card-bg));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: rotate(var(--meme-tilt, 0deg));
  transition: border-color .18s, background .18s, color .18s, transform .18s, box-shadow .18s;
}

.meme-barrage-word strong {
  display: block;
  font-size: calc(18px + var(--meme-weight) * 2px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.meme-barrage-word.is-long-term {
  gap: 10px;
  padding-inline: 16px;
}

.meme-barrage-word.is-long-term strong {
  font-size: calc(16px + var(--meme-weight) * 1.6px);
}

.meme-barrage-word span {
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.meme-barrage-word:hover,
.meme-barrage-word:focus-visible {
  z-index: 1;
  border-color: var(--meme-color);
  background: color-mix(in srgb, var(--meme-color) 22%, var(--card-bg));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--meme-color) 18%, transparent);
  outline: 0;
  transform: translateY(-4px) rotate(0deg) scale(1.025);
}

.meme-barrage-word--amber,
.meme-dialog[data-tone="amber"] {
  --meme-color: #efb85b;
}

.meme-barrage-word--rose,
.meme-dialog[data-tone="rose"] {
  --meme-color: #e66c91;
}

.meme-barrage-word--blue,
.meme-dialog[data-tone="blue"] {
  --meme-color: #65aee8;
}

.meme-barrage-word--cyan,
.meme-dialog[data-tone="cyan"] {
  --meme-color: #48c6ca;
}

.meme-barrage-word--violet,
.meme-dialog[data-tone="violet"] {
  --meme-color: #a88be8;
}

.meme-barrage-word--mint,
.meme-dialog[data-tone="mint"] {
  --meme-color: #71cf9b;
}

.meme-stage-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 2px 0;
  font-size: 11px;
}

.meme-stage-footer > span {
  color: var(--accent);
  font-family: Arial, sans-serif;
  letter-spacing: .04em;
}

.meme-stage-footer p {
  max-width: 540px;
  font-size: 11px;
  text-align: right;
}

.meme-dialog {
  width: min(1220px, calc(100vw - 48px));
  max-width: none;
  height: min(760px, calc(100vh - 48px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
}

.meme-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(5px);
}

.meme-dialog-shell {
  position: relative;
  display: grid;
  grid-template-columns: 497px minmax(560px, 1fr);
  height: 100%;
}

.meme-dialog-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: grid;
  gap: 10px;
}

.meme-dialog-controls button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
}

.meme-dialog-controls .meme-dialog-close {
  border-radius: 50%;
}

.meme-dialog-controls button:hover {
  border-color: var(--meme-color);
  color: var(--meme-color);
}

.meme-dialog-media {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.meme-dialog-image {
  display: grid;
  min-height: 0;
  padding: 32px;
  place-items: center;
}

.meme-dialog-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.meme-image-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 380px;
  max-height: 620px;
  place-content: center;
  border: 1px solid color-mix(in srgb, var(--meme-color) 60%, var(--line));
  color: var(--muted);
  text-align: center;
}

.meme-image-placeholder i {
  margin-bottom: 18px;
  color: var(--meme-color);
  font-size: 46px;
}

.meme-image-placeholder strong {
  max-width: 300px;
  font-size: 20px;
  font-weight: 500;
}

.meme-image-placeholder span {
  margin-top: 8px;
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .2em;
}

.meme-image-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transform: translateY(-50%);
}

.meme-image-arrow--previous { left: 16px; }
.meme-image-arrow--next { right: 16px; }
.meme-image-arrow:hover { border-color: var(--meme-color); color: var(--meme-color); }

.meme-image-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  gap: 20px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.meme-image-footer > div {
  display: flex;
  gap: 7px;
}

.meme-image-footer button {
  width: 18px;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--line);
  cursor: pointer;
}

.meme-image-footer button.is-active {
  background: var(--meme-color);
}

.meme-dialog-copy {
  min-width: 0;
  padding: 42px 48px 30px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--meme-color) 48%, var(--line)) transparent;
}

.meme-dialog-copy::-webkit-scrollbar {
  width: 8px;
}

.meme-dialog-copy::-webkit-scrollbar-track {
  background: transparent;
}

.meme-dialog-copy::-webkit-scrollbar-thumb {
  border: 2px solid var(--card-bg);
  border-radius: 8px;
  background: color-mix(in srgb, var(--meme-color) 48%, var(--line));
}

.meme-dialog-copy > header {
  display: block;
  padding-bottom: 28px;
  padding-right: 58px;
  border-bottom: 1px solid var(--line);
}

.meme-dialog-copy .page-label {
  color: var(--meme-color);
}

.meme-dialog-season {
  margin-top: 18px;
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.meme-dialog-copy h2 {
  width: max-content;
  max-width: 100%;
  margin: 4px 0 0;
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  white-space: nowrap;
}

.meme-dialog.is-long-term .meme-dialog-copy h2 {
  font-size: clamp(34px, 3.25vw, 46px);
  line-height: 1.08;
}

.meme-dialog.is-extra-long-term .meme-dialog-copy h2 {
  font-size: clamp(31px, 2.9vw, 42px);
}

.meme-dialog-summary {
  margin-top: 14px;
  color: var(--text);
  font-size: 17px;
}

.meme-definition-list {
  margin: 0;
}

.meme-definition-list > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--soft-line);
}

.meme-definition-list dt {
  color: var(--meme-color);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .08em;
}

.meme-definition-list dd {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}

.meme-definition-list .meme-example {
  margin-top: 18px;
  padding: 15px 17px;
  border-bottom: 0;
  border-left: 3px solid var(--meme-color);
  background: color-mix(in srgb, var(--meme-color) 8%, var(--card-bg));
}

.meme-example dd {
  color: var(--text);
  font-size: 14px;
}

.meme-dialog-note {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  color: var(--subtle);
  font-size: 10px;
  line-height: 1.6;
}

.meme-dialog-note i {
  flex: 0 0 auto;
  color: var(--meme-color);
  font-size: 15px;
}

@media (max-width: 900px) {
  .meme-stage-toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 18px;
  }

  .meme-stage-actions {
    flex: 1 1 420px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .meme-dialog-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 42%) minmax(0, 58%);
  }

  .meme-dialog-media {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .meme-dialog-image {
    padding: 24px;
  }

  .meme-image-placeholder {
    min-height: 210px;
  }

  .meme-dialog-copy {
    padding: 30px 28px;
  }
}

@media (max-width: 620px) {
  .meme-stage {
    margin-top: 38px;
  }

  .meme-year-filters {
    flex: 1 1 auto;
  }

  .meme-year-filters > button,
  .meme-season-picker {
    flex: 1 1 0;
  }

  .meme-season-picker summary {
    min-width: 0;
  }

  .meme-random-button {
    flex: 0 0 auto;
    justify-content: center;
  }

  .meme-stream-shell {
    min-height: 410px;
  }

  .meme-streams {
    padding-top: 42px;
  }

  .meme-barrage-word {
    min-width: 142px;
    padding: 11px 13px;
  }

  .meme-barrage-word strong {
    font-size: calc(16px + var(--meme-weight) * 1.5px);
  }

  .meme-stage-footer {
    flex-direction: column;
    gap: 5px;
  }

  .meme-stage-footer p {
    text-align: left;
  }

  .meme-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
  }

  .meme-dialog-shell {
    grid-template-rows: minmax(230px, 36%) minmax(0, 64%);
  }

  .meme-dialog-controls {
    top: 10px;
    right: 10px;
    gap: 7px;
  }

  .meme-dialog-controls button {
    width: 38px;
    height: 38px;
  }

  .meme-dialog-copy {
    padding: 24px 20px 30px;
  }

  .meme-dialog-copy h2 {
    width: auto;
    font-size: 40px;
    white-space: normal;
  }

  .meme-dialog.is-long-term .meme-dialog-copy h2 {
    font-size: 30px;
  }

  .meme-dialog.is-extra-long-term .meme-dialog-copy h2 {
    font-size: 27px;
  }

  .meme-definition-list > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

/* Team history: alternating central timeline and archival letter dialog. */
.history-page-hero {
  grid-template-columns: minmax(320px, 0.66fr) minmax(420px, 1.34fr);
  gap: 36px;
}

.history-page-hero h1 {
  font-size: clamp(42px, 5.8vw, 76px);
}

.history-page-hero > p {
  max-width: none;
  justify-self: end;
  font-size: 14px;
  white-space: nowrap;
}

.history-experience {
  width: min(var(--max-width), calc(100% - 48px));
  margin: 62px auto 100px;
}

.history-timeline-list {
  display: grid;
  gap: 82px;
}

.history-phase {
  scroll-margin-top: 104px;
}

.history-phase-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 36px;
  align-items: end;
  margin-bottom: 34px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line);
}

.history-phase-header > div > span,
.history-phase-header > div > p {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.history-phase-header > div > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.history-phase-header > div > p {
  display: inline-block;
  margin-left: 12px;
  color: var(--subtle);
  font-size: 11px;
}

.history-phase-header h2 {
  margin: 5px 0 0;
  max-width: none;
  font-size: clamp(23px, 2vw, 31px);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.history-phase-header > p {
  max-width: 360px;
  justify-self: end;
  font-size: 14px;
  line-height: 1.8;
}

.history-phase-nodes {
  position: relative;
  display: grid;
  gap: 24px;
}

.history-phase-nodes::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 4%, var(--line) 96%, transparent);
  transform: translateX(-50%);
}

.history-node {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  min-height: 198px;
  align-items: center;
}

.history-node-card {
  position: relative;
  grid-row: 1;
  width: min(100%, 500px);
  min-height: 178px;
  padding: 24px 28px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--card-bg) 94%, var(--accent));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.history-node:nth-child(odd) .history-node-card {
  grid-column: 1;
  justify-self: end;
}

.history-node:nth-child(even) .history-node-card {
  grid-column: 3;
  justify-self: start;
}

.history-node-cover {
  position: relative;
  grid-row: 1;
  width: min(100%, 500px);
  min-height: 178px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}

.history-node:nth-child(odd) .history-node-cover {
  grid-column: 3;
  justify-self: start;
}

.history-node:nth-child(even) .history-node-cover {
  grid-column: 1;
  justify-self: end;
}

.history-node-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.history-node:hover .history-node-cover img {
  transform: scale(1.025);
}

.history-node-cover figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 22px 16px 11px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.76), transparent);
  color: #fff;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.5;
}

.history-node-cover.is-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--subtle);
  background:
    linear-gradient(135deg, transparent 49.7%, color-mix(in srgb, var(--line) 72%, transparent) 50%, transparent 50.3%),
    color-mix(in srgb, var(--surface) 88%, #aeb2b8);
}

.history-node-cover.is-placeholder i {
  font-size: 34px;
}

.history-node-cover.is-placeholder span {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.history-node-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0.7;
  transition: opacity 180ms ease;
}

.history-node:nth-child(odd) .history-node-card::after {
  right: 0;
}

.history-node:nth-child(even) .history-node-card::after {
  left: 0;
}

.history-node-card:hover,
.history-node-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: color-mix(in srgb, var(--card-bg) 88%, var(--accent));
  box-shadow: 0 18px 42px color-mix(in srgb, #000 14%, transparent);
  transform: translateY(-3px);
  outline: 0;
}

.history-node-card:hover::after,
.history-node-card:focus-visible::after {
  opacity: 1;
}

.history-node-era,
.history-node-years,
.history-node-open {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.history-node-era {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.history-node-years {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}

.history-node-card > strong {
  display: block;
  margin-top: 3px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
}

.history-node-card > p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.75;
}

.history-node-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: var(--accent);
  font-size: 11px;
}

.history-node-open i {
  font-size: 16px;
  transition: transform 180ms ease;
}

.history-node-card:hover .history-node-open i,
.history-node-card:focus-visible .history-node-open i {
  transform: translate(2px, -2px);
}

.history-node-marker {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  width: 58px;
  height: 58px;
  justify-self: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 8px var(--bg);
}

.history-node-marker b {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.history-node-marker.is-range {
  height: 86px;
  border-radius: 29px;
}

.history-node-marker.is-range b {
  display: grid;
  gap: 5px;
  place-items: center;
}

.history-node-marker.is-range b span {
  display: block;
}

.history-node-marker.is-range b i {
  color: color-mix(in srgb, var(--accent) 72%, var(--muted));
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 0.55;
}

.history-phase-rail {
  position: fixed;
  z-index: 18;
  top: 50%;
  left: clamp(30px, 3.2vw, 58px);
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.history-phase-rail button {
  position: relative;
  display: grid;
  grid-template-columns: 4px;
  place-items: center;
  width: 24px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.history-phase-rail button > span {
  width: 3px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 46%, transparent);
  transition: height 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.history-phase-rail button > b {
  position: absolute;
  left: 19px;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 8px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 160ms ease;
}

.history-phase-rail button > em {
  position: absolute;
  left: 32px;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font-size: 10px;
  font-style: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-5px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.history-phase-rail button:hover > span,
.history-phase-rail button:focus-visible > span,
.history-phase-rail button.is-active > span {
  height: 46px;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 72%, transparent);
}

.history-phase-rail button:hover > b,
.history-phase-rail button:focus-visible > b,
.history-phase-rail button.is-active > b {
  opacity: 1;
}

.history-phase-rail button:hover > em,
.history-phase-rail button:focus-visible > em {
  opacity: 1;
  transform: translateX(0);
}

.history-phase-rail button:focus-visible {
  outline: 0;
}

.has-history-dialog {
  overflow: hidden;
}

.history-dialog {
  width: min(1180px, calc(100vw - 48px));
  max-width: none;
  height: min(780px, calc(100vh - 48px));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.32);
}

.history-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(5px);
}

.history-dialog-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  height: 100%;
}

.history-dialog-close {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.history-dialog-close i {
  font-size: 21px;
}

.history-dialog-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 58px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 82%, #aeb2b8);
}

.history-carousel {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.history-carousel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.history-carousel-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--muted) 74%, transparent);
  background:
    linear-gradient(135deg, transparent 49.7%, color-mix(in srgb, var(--line) 70%, transparent) 50%, transparent 50.3%),
    color-mix(in srgb, var(--surface) 80%, #aeb2b8);
}

.history-carousel-placeholder i {
  font-size: 46px;
}

.history-carousel-placeholder span {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.history-carousel-arrow {
  position: absolute;
  z-index: 2;
  top: calc(50% - 29px);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text);
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(7px);
}

.history-carousel-arrow i {
  font-size: 25px;
}

.history-carousel-arrow--previous {
  left: 18px;
}

.history-carousel-arrow--next {
  right: 18px;
}

.history-carousel-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 0 20px;
  border-top: 1px solid var(--line);
  background: var(--card-bg);
}

.history-carousel-footer > span {
  min-width: 0;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-carousel-dots {
  display: flex;
  gap: 6px;
}

.history-carousel-dots button {
  width: 18px;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--line);
  cursor: pointer;
  transition: background-color 160ms ease, width 160ms ease;
}

.history-carousel-dots button.is-active {
  width: 28px;
  background: var(--accent);
}

.history-letter {
  min-width: 0;
  overflow-y: auto;
  padding: 50px 42px 42px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.history-letter-header > span {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.history-letter-header > p {
  margin-top: 15px;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.history-letter-header h2 {
  margin: 3px 0 0;
  font-size: clamp(28px, 3.3vw, 42px);
  font-weight: 500;
  line-height: 1.25;
}

.history-letter-facts {
  display: grid;
  margin: 28px 0 0;
  border-bottom: 1px solid var(--line);
}

.history-letter-facts > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.history-letter-facts dt,
.history-letter-facts dd {
  margin: 0;
}

.history-letter-facts dt {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.history-letter-facts dd {
  color: var(--text);
  font-size: 13px;
  line-height: 1.65;
}

.history-letter-copy {
  margin-top: 28px;
}

.history-letter-copy p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.95;
  text-indent: 2em;
}

.history-letter-copy p + p {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .history-page-hero {
    grid-template-columns: 1fr;
  }

  .history-page-hero > p {
    justify-self: start;
    white-space: normal;
  }

  .history-phase-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .history-phase-header > p {
    justify-self: start;
    max-width: 650px;
  }

  .history-phase-header h2 {
    white-space: normal;
    text-wrap: balance;
  }

  .history-phase-rail {
    display: none;
  }

  .history-dialog-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 42vh) minmax(0, 1fr);
  }

  .history-dialog-media {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .history-letter {
    padding: 34px 30px;
  }
}

@media (max-width: 680px) {
  .history-experience {
    width: calc(100% - 28px);
    margin-top: 42px;
  }

  .history-timeline-list {
    gap: 58px;
  }

  .history-phase-nodes {
    gap: 16px;
  }

  .history-phase-nodes::before {
    left: 20px;
  }

  .history-node {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 0;
  }

  .history-node:nth-child(n) .history-node-card {
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    padding: 19px 20px 18px;
  }

  .history-node:nth-child(n) .history-node-cover {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    height: 156px;
    margin-top: 8px;
  }

  .history-node:nth-child(n) .history-node-card::after {
    right: auto;
    left: 0;
  }

  .history-node-marker {
    grid-column: 1;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 5px var(--bg);
  }

  .history-node-marker b {
    font-size: 9px;
  }

  .history-node-marker.is-range {
    height: 64px;
    border-radius: 20px;
  }

  .history-node-marker.is-range b {
    gap: 3px;
  }

  .history-node-card > strong {
    font-size: 20px;
  }

  .history-dialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }

  .history-dialog-shell {
    grid-template-rows: minmax(220px, 36vh) minmax(0, 1fr);
  }

  .history-dialog-close {
    top: 10px;
    right: 10px;
  }

  .history-carousel-arrow {
    width: 36px;
    height: 36px;
  }

  .history-carousel-arrow--previous {
    left: 10px;
  }

  .history-carousel-arrow--next {
    right: 10px;
  }

  .history-letter {
    padding: 28px 20px 34px;
  }

  .history-letter-header h2 {
    padding-right: 34px;
    font-size: 27px;
  }

  .history-letter-facts > div {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-node-card,
  .history-node-open i,
  .history-carousel-dots button {
    transition: none;
  }

  .history-node-cover img,
  .history-phase-rail button > span,
  .history-phase-rail button > em {
    transition: none;
  }
}

.partner-heading {
  margin-top: 54px;
  padding-top: 46px;
  border-top: 1px solid var(--line);
}

.thanks-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.thanks-card {
  min-height: 136px;
  display: grid;
  grid-template-rows: 66px auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
  padding: 18px 18px 14px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  text-align: center;
  transition: border-color 160ms ease, transform 160ms ease;
}

.thanks-card:hover,
.thanks-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.thanks-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 66px;
}

.thanks-card img {
  width: auto;
  max-width: 88%;
  max-height: 58px;
  object-fit: contain;
  object-position: center;
}

.thanks-card strong {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: inherit;
  line-height: 1.45;
}

.sponsor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sponsor-card .thanks-logo-frame {
  height: 72px;
  padding: 10px 16px;
  background: var(--surface);
  overflow: hidden;
}

.sponsor-card img {
  max-width: 86%;
  max-height: 52px;
}

.sponsor-card--cubemars img {
  transform: scale(2.55);
}

:root:not([data-theme="dark"]) .sponsor-card--cubemars img,
:root:not([data-theme="dark"]) .partner-marquee-item--cubemars img {
  filter: brightness(0);
}

.logo-cqu img {
  max-width: 80%;
  max-height: 54px;
}

.logo-sxic img {
  max-width: 92%;
  max-height: 42px;
}

.logo-pivot img {
  max-height: 69px;
}

.logo-rm img {
  max-height: 30px;
  filter: invert(1);
}

:root[data-theme="dark"] .logo-sxic img,
:root[data-theme="dark"] .logo-pivot img {
  filter: invert(1) brightness(1.08);
}

:root[data-theme="dark"] .logo-rm img {
  filter: none;
}

@media (max-width: 860px) {
  .home-quote {
    min-height: 82px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 14px 0;
  }

  .quote-stage {
    text-align: left;
  }

  .quote-stage p {
    font-size: 19px;
  }

  .quote-random-button {
    transform: none;
    width: 34px;
    height: 34px;
  }

  .quote-random-button:hover,
  .quote-random-button:focus-visible {
    transform: rotate(18deg);
  }

  .thanks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .thanks-card {
    min-height: 124px;
    padding: 14px 12px 12px;
  }

  .thanks-card strong {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .thanks-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep two-word group labels intentionally split into two lines */
.group-grid .entry-card span {
  display: block;
  min-height: 42px;
  line-height: 1.25;
  white-space: normal;
}

/* Archive video carousel and message wall */
.video-feature {
  border-top: 0;
  padding-top: 0;
}

.video-carousel {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(300px, 380px);
  gap: 28px;
  align-items: stretch;
}

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  height: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.video-placeholder strong,
.video-placeholder span {
  display: block;
}

.video-copy {
  border: 1px solid var(--line);
  background: var(--card-bg);
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video-subtitle {
  margin: 14px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.video-copy h3 {
  margin: 4px 0 14px;
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1.2;
  font-weight: 500;
}

.video-copy > p:not(.page-label):not(.video-subtitle) {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.62;
}

.video-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.video-actions button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.video-actions button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.45;
}

.video-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.video-list button {
  min-height: 126px;
  padding: 21px 28px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.video-list button:hover,
.video-list button:focus-visible,
.video-list button.is-active {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.video-list button.is-active {
  background: var(--surface);
}

.video-list span {
  display: block;
  margin-bottom: 9px;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: none;
}

.video-list strong {
  display: block;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
}

.video-list small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 1120px) {
  .video-carousel {
    grid-template-columns: 1fr;
  }
  .video-copy {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .video-list {
    grid-template-columns: 1fr;
  }
}

/* Desktop technical cards reveal their summary as a fixed-stage transition. */
@media (hover: hover) and (min-width: 861px) {
  .group-grid .entry-card {
    position: relative;
    display: block;
    min-height: 312px;
    overflow: hidden;
  }

  .group-grid .entry-card figure {
    position: absolute;
    top: 20px;
    left: 22px;
    width: calc(100% - 44px);
    height: 170px;
    margin: 0;
    transition:
      top 280ms ease,
      left 280ms ease,
      width 280ms ease,
      height 280ms ease,
      background-color 220ms ease;
  }

  .group-grid .entry-card figure img {
    width: 132px;
    height: 132px;
    transition:
      width 280ms ease,
      height 280ms ease;
  }

  .group-grid .entry-card span,
  .group-grid .entry-card strong,
  .group-grid .entry-card small {
    position: absolute;
    right: 22px;
    left: 22px;
    margin: 0;
  }

  .group-grid .entry-card span {
    top: 196px;
    min-height: 42px;
    transition:
      top 280ms ease,
      right 280ms ease;
  }

  .group-grid .entry-card strong {
    top: 236px;
    min-height: 52px;
    transition:
      top 280ms ease,
      font-size 280ms ease;
  }

  .group-grid .entry-card:nth-child(5) strong {
    top: 218px;
  }

  .group-grid .entry-card small {
    top: 112px;
    opacity: 0;
    transform: translateY(56px);
    pointer-events: none;
    transition:
      opacity 180ms ease,
      transform 300ms ease;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) figure {
    top: 26px;
    left: calc(100% - 84px);
    width: 62px;
    height: 62px;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) figure img {
    width: 46px;
    height: 46px;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) span {
    top: 30px;
    right: 94px;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) strong {
    top: 70px;
    min-height: 34px;
    font-size: 20px;
  }

  .group-grid .entry-card:nth-child(5):is(:hover, :focus-visible, :active, .is-active) strong {
    top: 54px;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) small {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 70ms;
  }
}

@media (hover: hover) and (min-width: 861px) and (max-width: 1100px) {
  .group-grid .entry-card {
    min-height: 312px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .group-grid .entry-card,
  .group-grid .entry-card figure,
  .group-grid .entry-card figure img,
  .group-grid .entry-card span,
  .group-grid .entry-card strong,
  .group-grid .entry-card small {
    transition: none;
  }
}
/* Compact subpage heroes and avoid duplicate divider lines */
.page-hero {
  margin-top: 46px;
  gap: 36px;
  padding-bottom: 24px;
}

.page-hero h1 {
  font-size: clamp(34px, 3.65vw, 56px);
  line-height: 1.12;
}

.page-hero > p {
  font-size: 15px;
  line-height: 1.62;
}

.page-hero + .section-block {
  margin-top: 54px;
}

.page-hero + .meme-stage {
  margin-top: 26px;
}

.video-feature {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 860px) {
  .page-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    margin-top: 34px;
    padding-bottom: 22px;
  }

  .page-hero h1 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .page-hero + .section-block {
    margin-top: 38px;
  }

  .page-hero + .meme-stage {
    margin-top: 24px;
  }
}

/* Group logos in the technical-groups dropdown. */
.nav-dropdown a[href="group-mechanical.html"],
.nav-dropdown a[href="group-control.html"],
.nav-dropdown a[href="group-vision.html"],
.nav-dropdown a[href="group-hardware.html"],
.nav-dropdown a[href="group-operations.html"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.nav-dropdown a[href="group-mechanical.html"] {
  --nav-group-tone: #c59a4b;
}

.nav-dropdown a[href="group-control.html"] {
  --nav-group-tone: #6e9dca;
}

.nav-dropdown a[href="group-vision.html"] {
  --nav-group-tone: #8976b2;
}

.nav-dropdown a[href="group-hardware.html"] {
  --nav-group-tone: #62a66f;
}

.nav-dropdown a[href="group-operations.html"] {
  --nav-group-tone: #bd6f84;
}

.nav-dropdown a[href="group-mechanical.html"]::after,
.nav-dropdown a[href="group-control.html"]::after,
.nav-dropdown a[href="group-vision.html"]::after,
.nav-dropdown a[href="group-hardware.html"]::after,
.nav-dropdown a[href="group-operations.html"]::after {
  content: "";
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.nav-dropdown a[href="group-mechanical.html"]::after {
  background-image: url("../images/brand/group-icons/mechanical.png");
}

.nav-dropdown a[href="group-control.html"]::after {
  background-image: url("../images/brand/group-icons/control.png");
}

.nav-dropdown a[href="group-vision.html"]::after {
  background-image: url("../images/brand/group-icons/vision.png");
}

.nav-dropdown a[href="group-hardware.html"]::after {
  background-image: url("../images/brand/group-icons/hardware.png");
}

.nav-dropdown a[href="group-operations.html"]::after {
  background-image: url("../images/brand/group-icons/operations.png");
}

.nav-dropdown a[href^="group-"]:hover::after,
.nav-dropdown a[href^="group-"]:focus-visible::after {
  border-color: var(--nav-group-tone);
  background-color: color-mix(in srgb, #fff 90%, var(--nav-group-tone));
  transform: translateX(-1px);
}

/* Brand wordmark and shared dropdown icon system. */
.brand-text {
  align-items: center;
  line-height: 1;
}

.brand-text strong {
  align-items: center;
  line-height: 1;
}

.brand-text strong::after {
  transform: none;
}

.brand-text small {
  font-family:
    "DIN 1451 Fette Breitschrift 1936",
    "Arial Black",
    sans-serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.brand-text small.brand-flip {
  position: relative;
  display: inline-block;
  width: 154px;
  height: 40px;
  overflow: hidden;
  line-height: 1;
  perspective: 560px;
}

.brand-flip-inner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transform-origin: 50% 50%;
  transition: transform 460ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.brand-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 6px;
  backface-visibility: hidden;
}

.brand-flip-face--front {
  transform: rotateX(0deg) translateZ(20px);
}

.brand-flip-face--back {
  transform: rotateX(-90deg) translateZ(20px);
}

.brand-flip-face--back img {
  width: 78px;
  height: auto;
  max-height: 38px;
  object-fit: contain;
}

.brand:hover .brand-flip-inner,
.brand:focus-visible .brand-flip-inner {
  transform: rotateX(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .brand-flip-inner {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .brand-text small.brand-flip {
    display: none;
  }
}

.home-wordmark {
  font-family:
    "DIN 1451 Fette Breitschrift 1936",
    "Arial Black",
    sans-serif;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.nav-dropdown {
  min-width: 148px;
  gap: 3px;
  padding: 10px;
}

.nav-dropdown a {
  position: relative;
  border-left: 0;
}

.nav-dropdown a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 80%;
  background: var(--accent);
  transform: translateY(-50%);
}

.nav-dropdown a.nav-item-with-icon {
  display: grid;
  grid-template-columns: minmax(80px, max-content) 24px;
  justify-content: start;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 3px 6px 3px 10px;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.nav-dropdown a.nav-item-with-icon::after {
  content: none;
}

.nav-item-label {
  min-width: 0;
}

.nav-item-logo,
.nav-item-mdi {
  position: relative;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.nav-item-logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

.nav-dropdown a.nav-item-with-icon--unit {
  grid-template-columns: minmax(80px, max-content) 48px;
}

.nav-item-logo-pair {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 48px;
  height: 24px;
}

.nav-item-logo-pair img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

.nav-item-mdi {
  font-size: 20px;
  font-style: normal;
  line-height: 1;
}

:root[data-theme="dark"] .nav-item-logo,
:root[data-theme="dark"] .nav-item-mdi {
  background: transparent;
  color: var(--text);
}

:root[data-theme="dark"] .nav-item-logo img {
  filter: brightness(0) saturate(100%) invert(1);
}

:root[data-theme="dark"] .nav-item-logo-pair img {
  filter: none;
}

.org-card[id] {
  scroll-margin-top: 112px;
}

/* Primary navigation icon watermarks and spacing. */
.nav-links {
  gap: clamp(15px, 1.35vw, 22px);
}

.nav-utilities {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

@media (min-width: 1101px) {
  .nav-utilities {
    position: relative;
    right: clamp(24px, 1.8vw, 30px);
  }
}

.nav-map-link {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  color: var(--muted);
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.nav-map-link:hover,
.nav-map-link:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--accent);
  outline: none;
}

.nav-map-link .mdi {
  font-size: 22px;
  line-height: 1;
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .nav-links {
    transform: translateX(1em);
  }
}

@media (min-width: 1301px) {
  .nav-links {
    transform: translateX(clamp(80px, 4.5vw, 92px));
  }
}

@media (max-width: 860px) {
  .nav-utilities {
    gap: 0;
  }

  .nav-map-link {
    display: none;
  }
}

/* Hierarchical page return control */
.page-back-nav {
  position: fixed;
  top: clamp(170px, 19vh, 210px);
  left: max(12px, calc((100vw - var(--max-width)) / 2 - 74px));
  z-index: 19;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
}

.page-back-link {
  display: grid;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line));
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.1);
  line-height: 1;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.page-back-link .mdi {
  font-size: 22px;
  line-height: 1;
}

.page-back-link:hover,
.page-back-link:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #111;
  transform: translateX(4px);
  outline: none;
}

@media (min-width: 861px) and (max-width: 1300px) {
  body:has(.page-back-nav) .page-hero,
  body:has(.page-back-nav) .history-experience {
    width: calc(100% - 130px);
    margin-right: 40px;
    margin-left: 90px;
  }
}

@media (max-width: 860px) {
  .page-back-nav {
    top: 142px;
    left: 12px;
    width: 41px;
    height: 41px;
  }

  .page-back-link {
    width: 41px;
    height: 41px;
  }

  .page-back-link .mdi {
    font-size: 20px;
  }

  body:has(.page-back-nav) .page-hero {
    width: calc(100% - 92px);
    margin-right: 16px;
    margin-left: 76px;
  }
}

.nav-links > a,
.nav-menu > a {
  isolation: isolate;
}

.nav-link-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translateY(0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link-label::before,
.nav-link-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 24px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--accent) 72%, transparent) 24%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 72%, transparent) 76%,
    transparent 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 52%, transparent);
  opacity: 0;
  transform: translateY(-50%) scaleY(0.35);
  transition: opacity 180ms ease, transform 220ms ease;
}

.nav-link-label::before {
  left: -12px;
}

.nav-link-label::after {
  right: -12px;
}

.nav-links > a:hover .nav-link-label::before,
.nav-links > a:hover .nav-link-label::after,
.nav-links > a:focus-visible .nav-link-label::before,
.nav-links > a:focus-visible .nav-link-label::after,
.nav-menu > a:hover .nav-link-label::before,
.nav-menu > a:hover .nav-link-label::after,
.nav-menu > a:focus-visible .nav-link-label::before,
.nav-menu > a:focus-visible .nav-link-label::after {
  opacity: 0.72;
  transform: translateY(-50%) scaleY(1);
}

.nav-link-watermark {
  position: absolute;
  z-index: 0;
  top: auto;
  bottom: 11px;
  left: 50%;
  color: currentColor;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px) scale(0.72);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links > a:hover .nav-link-label,
.nav-links > a:focus-visible .nav-link-label,
.nav-links > a.is-active .nav-link-label,
.nav-menu > a:hover .nav-link-label,
.nav-menu > a:focus-visible .nav-link-label,
.nav-menu > a.is-active .nav-link-label {
  transform: translateY(-0.48em);
}

.nav-links > a:hover .nav-link-watermark,
.nav-links > a:focus-visible .nav-link-watermark,
.nav-links > a.is-active .nav-link-watermark,
.nav-menu > a:hover .nav-link-watermark,
.nav-menu > a:focus-visible .nav-link-watermark,
.nav-menu > a.is-active .nav-link-watermark {
  opacity: 0.8;
  transform: translate(-50%, 0) scale(1);
}

/* Organization mega menu: technical, responsibility and robot-unit groups. */
.nav-dropdown--organization {
  width: max-content;
  max-width: calc(100vw - 32px);
  min-width: 0;
  grid-template-columns: 150px 150px 174px 150px;
  gap: 0;
  padding: 0;
}

.nav-dropdown-column {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 10px;
}

.nav-dropdown-column + .nav-dropdown-column {
  border-left: 1px solid var(--line);
}

.nav-dropdown-column-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-bottom: 2px;
  padding: 2px 6px 7px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.nav-dropdown-column-title i {
  color: var(--accent);
  font-size: 17px;
  line-height: 1;
}

.nav-dropdown-column-title strong {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.nav-dropdown--organization a.nav-item-with-icon {
  width: 100%;
  grid-template-columns: minmax(80px, max-content) 24px;
}

.nav-dropdown--organization a.nav-item-with-icon--unit {
  grid-template-columns: minmax(80px, max-content) 48px;
}

.nav-dropdown--museum {
  width: max-content;
  min-width: 0;
  grid-template-columns: repeat(2, 154px);
  gap: 0;
  padding: 0;
}

.nav-dropdown--museum a.nav-item-with-icon {
  width: 100%;
  grid-template-columns: minmax(76px, max-content) 24px;
}

.nav-dropdown--contact {
  width: max-content;
  min-width: 0;
  grid-template-columns: repeat(2, 158px);
  gap: 0;
  padding: 0;
}

.nav-dropdown--contact a.nav-item-with-icon {
  width: 100%;
  grid-template-columns: minmax(88px, max-content) 24px;
}

/* Dedicated robot-unit pages. */
.unit-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.unit-role-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 24px;
  align-items: center;
  min-height: 230px;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.unit-role-card .page-label {
  margin-bottom: 6px;
}

.unit-role-card h2 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
}

.unit-role-card p {
  font-size: 15px;
}

.unit-role-logo {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0;
  background: var(--surface);
}

.unit-role-logo img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

:root[data-theme="dark"] .unit-role-logo img {
  filter: none;
}

.unit-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 860px) {
  .nav-link-watermark {
    left: 50%;
    bottom: 7px;
    font-size: 15px;
  }

  .nav-link-label {
    padding-left: 0;
  }

  .unit-role-grid {
    grid-template-columns: 1fr;
  }

  .nav-dropdown--organization {
    width: auto;
    grid-template-columns: 1fr;
  }

  .nav-dropdown--museum {
    width: auto;
    grid-template-columns: 1fr;
  }

  .nav-dropdown--contact {
    width: auto;
    grid-template-columns: 1fr;
  }

  .nav-dropdown-column {
    padding: 10px 8px;
  }

  .nav-dropdown-column + .nav-dropdown-column {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .unit-role-card {
    grid-template-columns: minmax(0, 1fr) 80px;
    gap: 16px;
    padding: 22px;
  }

  .unit-role-logo {
    width: 80px;
    height: 80px;
  }

  .unit-role-logo img {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 860px) {
  .nav-dropdown {
    gap: 3px;
    padding: 10px;
  }
}

/* Contact hub and cooperation pages. */
.contact-hub {
  display: grid;
  gap: 26px;
}

.contact-hub-heading {
  align-items: end;
}

.contact-hub-heading .page-label,
.partner-section .page-label,
.partnership-history .page-label,
.sponsor-contact .page-label,
.outreach-programs .page-label,
.contact-cta .page-label,
.social-directory .page-label {
  margin-bottom: 7px;
}

.contact-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.contact-entry-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contact-entry-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-entry {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 14px;
  min-height: 136px;
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: var(--card-bg);
  transition: background 180ms ease, color 180ms ease;
}

.contact-entry::after {
  content: "\F0054";
  position: absolute;
  right: 20px;
  bottom: 16px;
  color: var(--accent);
  font: normal normal normal 18px/1 "Material Design Icons";
  transform: translateX(-4px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.contact-entry:hover,
.contact-entry:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
}

.contact-entry:hover::after,
.contact-entry:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.contact-entry > i {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 25px;
  line-height: 1.2;
}

.contact-entry strong {
  align-self: end;
  font-size: 21px;
  font-weight: 500;
}

.contact-entry span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.contact-address {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-style: normal;
  font-size: 14px;
}

.contact-address i {
  color: var(--accent);
  font-size: 20px;
}

.contact-address-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
}

.contact-address-list a:hover,
.contact-address-list a:focus-visible {
  color: var(--text);
}

.contact-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.contact-channel-card {
  min-width: 0;
  min-height: 126px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  overflow: hidden;
}

.contact-channel-card--qr {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 86px;
  align-items: center;
  gap: 12px;
  padding: 18px;
}

.contact-qr-preview {
  width: 86px;
  height: 86px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  cursor: zoom-in;
  transition: border-color 180ms ease, transform 180ms ease;
}

.contact-qr-preview:hover,
.contact-qr-preview:focus-visible {
  border-color: var(--accent);
  outline: none;
  transform: translateY(-2px);
}

.contact-qr-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contact-channel-card--qr > div,
.contact-channel-card--direct > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.contact-channel-card--qr > i {
  font-size: 24px;
}

.contact-channel-card i {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}

.contact-channel-card strong {
  min-width: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
}

.contact-channel-card span,
.contact-channel-card em {
  min-width: 0;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-style: normal;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.contact-channel-card--direct {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  padding: 18px;
  transition: border-color 180ms ease, background 180ms ease;
}

.contact-channel-card--direct > i {
  grid-row: 1 / span 2;
  font-size: 24px;
}

.contact-channel-card--direct > em {
  grid-column: 2;
}

a.contact-channel-card--direct:hover,
a.contact-channel-card--direct:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
}

.contact-qr-lightbox {
  width: min(520px, calc(100% - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.contact-qr-lightbox[open] {
  display: grid;
}

.contact-qr-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
}

.contact-qr-lightbox__panel {
  position: relative;
  padding: 40px;
}

.contact-qr-lightbox__close {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
}

.contact-qr-lightbox figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.contact-qr-lightbox figure img {
  width: min(360px, 100%);
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 4px;
  background: #fff;
  object-fit: contain;
}

.contact-qr-lightbox figcaption {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.partner-section,
.partnership-history {
  display: grid;
  gap: 24px;
}

.partner-marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--card-bg);
}

.partner-marquee-track {
  display: flex;
  width: max-content;
  animation: partner-marquee 16s linear infinite;
}

.partner-marquee:hover .partner-marquee-track {
  animation-play-state: paused;
}

.partner-marquee-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 330px;
  min-width: 330px;
  height: 124px;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  color: var(--text);
}

.partner-marquee-item img {
  width: 132px;
  height: 68px;
  object-fit: contain;
}

.partner-marquee-item b {
  font-size: 17px;
  font-weight: 500;
}

.partnership-history .partner-marquee-item {
  display: flex;
  justify-content: center;
}

.partner-marquee-logo {
  display: grid;
  flex: 0 1 auto;
  place-items: center;
  max-width: 132px;
  height: 68px;
}

.partnership-history .partner-marquee-logo img {
  grid-area: 1 / 1;
  width: auto;
  max-width: 132px;
  height: auto;
  max-height: 68px;
}

.partnership-history .partner-marquee-item b {
  flex: 0 0 auto;
  white-space: nowrap;
}

:root[data-theme="dark"] .partner-marquee-item--dark-contrast img {
  filter: brightness(0) invert(1);
}

.thanks-marquee .partner-marquee-item {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 78px auto;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-width: 300px;
  text-align: center;
}

.thanks-marquee .partner-marquee-item img {
  max-width: 170px;
}

.partner-logo-dark {
  display: none;
}

:root[data-theme="dark"] .partner-logo-light {
  display: none;
}

:root[data-theme="dark"] .partner-logo-dark {
  display: block;
}

.partner-marquee-item--xnlm img {
  box-sizing: border-box;
  padding: 4px 8px;
  background: #fff;
}

:root[data-theme="dark"] .thanks-marquee .partner-marquee-item--sxic img,
:root[data-theme="dark"] .thanks-marquee .partner-marquee-item--pivot img {
  filter: invert(1) brightness(1.08);
}

:root[data-theme="dark"] .thanks-marquee .partner-marquee-item--rm img {
  filter: none;
}

@keyframes partner-marquee {
  to { transform: translateX(-50%); }
}

.sponsor-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.42fr);
  gap: 48px;
  align-items: end;
}

.sponsor-contact h2,
.contact-cta h2 {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 500;
}

.sponsor-contact address {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 20px;
  padding: 22px 24px;
  border-block: 1px solid var(--line);
  font-style: normal;
}

.sponsor-contact address span {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 13px;
}

.sponsor-contact address strong {
  font-size: 20px;
  font-weight: 500;
}

.sponsor-contact address a {
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 17px;
}

.outreach-programs,
.social-directory {
  display: grid;
  gap: 28px;
}

.outreach-list {
  border-top: 1px solid var(--line);
}

.outreach-list article {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  min-height: 150px;
  border-bottom: 1px solid var(--line);
}

.outreach-list article > span {
  padding-top: 30px;
  color: var(--accent);
  font: 14px/1 Arial, sans-serif;
}

.outreach-list article > div {
  position: relative;
  padding: 26px 72px 26px 0;
}

.outreach-list i {
  position: absolute;
  right: 8px;
  top: 28px;
  color: var(--accent);
  font-size: 30px;
}

.outreach-list h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 500;
}

.outreach-list p {
  max-width: 780px;
}

.contact-cta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

.social-platform-list {
  border-top: 1px solid var(--line);
}

.find-qianli-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.find-qianli-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.find-qianli-qr {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: clamp(18px, 2.4vw, 34px);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.find-qianli-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.find-qianli-card-copy {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 18px 20px 20px;
}

.find-qianli-card-copy > i {
  color: var(--accent);
  font-size: 27px;
}

.find-qianli-card-copy > div {
  display: grid;
  gap: 4px;
}

.find-qianli-card-copy strong {
  font-size: 19px;
  font-weight: 500;
}

.find-qianli-card-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.social-platform-list--direct {
  margin-top: 8px;
}

.social-platform-list > a,
.social-platform-list > article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) max-content;
  gap: 18px;
  align-items: center;
  min-height: 122px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.social-platform-list > a {
  transition: background 180ms ease;
}

.social-platform-list > a:hover,
.social-platform-list > a:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.social-platform-list i {
  color: var(--accent);
  font-size: 31px;
}

.social-platform-list div {
  display: grid;
  gap: 5px;
}

.social-platform-list strong {
  font-size: 22px;
  font-weight: 500;
}

.social-platform-list span,
.social-platform-list em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

@media (max-width: 980px) {
  .contact-entry-grid,
  .contact-entry-grid--four,
  .contact-entry-grid--two,
  .contact-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .find-qianli-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .contact-entry-grid,
  .contact-entry-grid--four,
  .contact-entry-grid--two,
  .contact-channel-grid,
  .sponsor-contact {
    grid-template-columns: 1fr;
  }

  .contact-entry {
    min-height: 112px;
    padding: 22px;
  }

  .partner-marquee-item {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    width: 276px;
    min-width: 276px;
    height: 106px;
    padding: 14px 16px;
  }

  .partner-marquee-item img {
    width: 104px;
    height: 58px;
  }

  .partner-marquee-logo {
    max-width: 104px;
    height: 58px;
  }

  .partnership-history .partner-marquee-logo img {
    width: auto;
    max-width: 104px;
    height: auto;
    max-height: 58px;
  }

  .contact-cta {
    align-items: start;
    flex-direction: column;
  }

  .find-qianli-grid {
    grid-template-columns: 1fr;
  }

  .find-qianli-card {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(150px, 1fr);
    align-items: stretch;
  }

  .find-qianli-qr {
    border-right: 1px solid var(--line);
    border-bottom: 0;
    padding: 14px;
  }

  .social-platform-list > a,
  .social-platform-list > article {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .social-platform-list em {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-marquee-track {
    animation: none;
  }
}

/* Museum landing: eight entrances in one compact 4 x 2 index. */
.museum-entry-section {
  margin-top: 54px;
}

.museum-entry-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.museum-entry-grid .entry-card {
  min-height: 164px;
  padding: 20px;
}

.museum-entry-grid .entry-card strong {
  font-size: 20px;
}

.museum-entry-grid .entry-card small {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.55;
}

/* Team member archive. */
.team-members-hero h1 {
  font-size: clamp(34px, 3.65vw, 56px);
  line-height: 1.12;
}

.team-member-section {
  scroll-margin-top: 112px;
}

.team-member-section-head {
  display: grid;
  grid-template-columns: minmax(250px, 0.48fr) minmax(620px, 1.52fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.team-member-section-head h2 {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
}

.member-department-tabs-slot {
  align-self: end;
  min-width: 0;
}

.current-member-groups {
  display: block;
}

.member-department-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.member-department-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 52px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.member-department-tab:last-child {
  border-right: 0;
}

.member-department-tab::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 160ms ease, transform 160ms ease;
}

.member-department-tab i {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 18px;
  line-height: 1;
  transition: color 160ms ease;
}

.member-department-tab:is(:hover, :focus-visible, .is-active) {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.member-department-tab:is(:hover, :focus-visible, .is-active) i {
  color: var(--accent);
}

.member-department-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.member-department-tab:focus-visible {
  z-index: 1;
  outline: 1px solid var(--accent);
  outline-offset: -2px;
}

.member-department-stage {
  margin-top: 24px;
}

.member-department-panel[hidden] {
  display: none;
}

.member-department-intro {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.member-department-intro h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
}

.member-department-intro p {
  font-size: 13px;
}

.member-department-panel {
  display: grid;
  gap: 34px;
}

.member-department-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 178px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  text-align: left;
}

.member-department-empty > i {
  color: var(--accent);
  font-size: 28px;
}

.member-department-empty strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.member-department-empty p {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.current-member-group > header {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 13px;
}

.current-member-group > header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.current-member-group > header p {
  font-size: 13px;
}

.current-member-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 18px 12px;
}

.current-member-card {
  min-width: 0;
  padding: 8px 4px 9px;
  border-radius: 4px;
  text-align: center;
  transition: background-color 180ms ease, transform 180ms ease;
}

.current-member-card:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.current-member-card figure {
  width: min(100%, 112px);
  aspect-ratio: 35 / 49;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
}

.current-member-card figure.is-placeholder {
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px dashed color-mix(in srgb, var(--accent) 36%, var(--line));
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  color: color-mix(in srgb, var(--muted) 78%, var(--accent) 22%);
}

.current-member-card figure.is-placeholder i {
  font-size: 30px;
  line-height: 1;
}

.current-member-card figure.is-placeholder span {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.current-member-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.2);
  transition: filter 180ms ease, transform 260ms ease;
}

.current-member-card:hover img {
  filter: grayscale(0);
  transform: scale(1.025);
}

.current-member-card > div {
  min-height: 48px;
  padding: 8px 2px 0;
}

.current-member-card h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.current-member-card p {
  margin-top: 3px;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.4;
}

.past-member-archive {
  display: grid;
  gap: 24px;
}

.past-member-season {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.past-member-season:first-child {
  border-top: 0;
  padding-top: 0;
}

.past-member-season > header {
  padding-right: 26px;
}

.past-member-season > header span {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.past-member-season > header h3 {
  margin: 5px 0 8px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

.past-member-season > header p {
  font-size: 12px;
  line-height: 1.6;
}

.past-member-groups {
  display: grid;
  gap: 18px;
}

.past-member-pending {
  width: fit-content;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.past-member-group {
  --member-tone: var(--accent);
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
}

.past-member-group h4 {
  margin: 0;
  color: var(--member-tone);
  font-size: 14px;
  font-weight: 500;
}

.past-member-group h4 small {
  display: block;
  margin-top: 2px;
  color: color-mix(in srgb, var(--member-tone) 62%, var(--muted));
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 400;
}

.past-member-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.past-member-group > div span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--member-tone) 44%, var(--line));
  background: color-mix(in srgb, var(--member-tone) 8%, var(--surface));
  color: color-mix(in srgb, var(--member-tone) 76%, var(--text));
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.past-member-group[data-member-kind="member"] {
  --member-tone: #e5a44b;
}

.past-member-group[data-member-kind="trainee"] {
  --member-tone: #5aa9f8;
}

.past-member-group[data-member-kind="advisor"] {
  --member-tone: #a78bfa;
}

.past-member-group[data-member-kind="teacher"] {
  --member-tone: #57d68d;
}

.past-member-season[data-season="2026"] .past-member-group[data-member-kind="teacher"] {
  --member-tone: #ef4444;
}

.member-section-rail {
  position: fixed;
  z-index: 18;
  top: 50%;
  left: clamp(30px, 3.2vw, 58px);
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.member-section-rail button {
  position: relative;
  display: grid;
  grid-template-columns: 4px;
  place-items: center;
  width: 24px;
  height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.member-section-rail button > span {
  width: 3px;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 46%, transparent);
  transition: height 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.member-section-rail button > b {
  position: absolute;
  left: 19px;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 8px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 160ms ease;
}

.member-section-rail button > em {
  position: absolute;
  left: 32px;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font-size: 10px;
  font-style: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-5px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.member-section-rail button:is(:hover, :focus-visible, .is-active) > span {
  height: 52px;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 72%, transparent);
}

.member-section-rail button:is(:hover, :focus-visible, .is-active) > b,
.member-section-rail button:is(:hover, :focus-visible) > em {
  opacity: 1;
}

.member-section-rail button:is(:hover, :focus-visible) > em {
  transform: translateX(0);
}

.member-section-rail button:focus-visible {
  outline: 0;
}

@media (max-width: 1100px) {
  .museum-entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .current-member-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .museum-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-member-section-head,
  .past-member-season {
    grid-template-columns: 1fr;
  }

  .team-member-section-head {
    gap: 14px;
  }

  .member-department-tabs-slot {
    width: 100%;
  }

  .member-department-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .member-department-tab:nth-child(3n) {
    border-right: 0;
  }

  .member-department-tab:nth-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .current-member-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .past-member-season > header {
    padding: 0 0 18px;
  }

  .member-section-rail {
    display: none;
  }
}

@media (max-width: 520px) {
  .museum-entry-grid {
    grid-template-columns: 1fr;
  }

  .current-member-group > header {
    display: block;
  }

  .member-department-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-department-tab {
    height: 46px;
    font-size: 12px;
  }

  .member-department-tab:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .member-department-tab:nth-child(2n) {
    border-right: 0;
  }

  .member-department-tab:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line);
  }

  .member-department-intro {
    display: block;
  }

  .member-department-intro p {
    margin-top: 5px;
  }

  .current-member-group > header p {
    margin-top: 6px;
  }

  .current-member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .current-member-card > div {
    min-height: 44px;
    padding: 7px 2px 0;
  }

  .current-member-card h4 {
    font-size: 13px;
  }

  .past-member-group {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Photo wall */
.gallery-shell {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 52px auto 0;
}

.gallery-tabs {
  position: sticky;
  top: 82px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--card-bg);
  scrollbar-width: none;
}

.gallery-tabs::-webkit-scrollbar {
  display: none;
}

.gallery-tabs button {
  position: relative;
  min-width: 0;
  min-height: 58px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 160ms ease, background-color 160ms ease;
}

.gallery-tabs button:last-child {
  border-right: 0;
}

.gallery-tabs button i {
  font-size: 20px;
  line-height: 1;
}

.gallery-tabs button:hover,
.gallery-tabs button:focus-visible {
  color: var(--text);
  background: var(--surface);
}

.gallery-tabs button.is-active {
  color: #101011;
  background: var(--accent);
  font-weight: 500;
}

.gallery-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.gallery-panel {
  padding-top: 42px;
}

.gallery-section-heading {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(320px, 1.28fr);
  align-items: end;
  gap: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.gallery-section-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 500;
}

.gallery-season-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 5px;
}

.gallery-season-info > p {
  font-size: 16px;
}

.gallery-season-switch {
  display: inline-grid;
  grid-auto-flow: column;
  border: 1px solid var(--line);
  background: var(--surface);
}

.gallery-season-switch button {
  min-width: 78px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.gallery-season-switch button:last-child {
  border-right: 0;
}

.gallery-season-switch button:hover,
.gallery-season-switch button:focus-visible {
  color: var(--text);
}

.gallery-season-switch button.is-active {
  background: var(--accent);
  color: #101011;
}

.gallery-season-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.robot-gallery-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 30px auto 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.robot-gallery-item {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1.16;
  padding: 0;
  border: 0;
  background: #f1f1ef;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  overflow: hidden;
}

.robot-gallery-item:hover,
.robot-gallery-item:focus-visible {
  background: #fff;
}

.robot-gallery-item:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.robot-gallery-visual {
  position: absolute;
  inset: 0 0 66px;
  display: grid;
  place-items: center;
  padding: 24px;
}

.robot-gallery-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(var(--robot-x, 0%), var(--robot-y, 0%)) scale(var(--robot-scale, 1));
  transition: transform 220ms ease;
}

.robot-gallery-item:hover .robot-gallery-visual img,
.robot-gallery-item:focus-visible .robot-gallery-visual img {
  transform: translate(var(--robot-x, 0%), var(--robot-y, 0%)) scale(var(--robot-scale-hover, 1.025));
}

.robot-gallery-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 66px;
  padding: 10px 14px;
  background: rgba(18, 18, 20, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.robot-gallery-caption strong {
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}

.robot-gallery-caption small {
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  color: #c9c9c9;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.team-photo-heading > p {
  padding-bottom: 5px;
  font-size: 16px;
}

.team-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.team-photo-item {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  transition: border-color 180ms ease, transform 180ms ease;
}

.team-photo-item:hover,
.team-photo-item:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.team-photo-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.team-photo-item > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 220ms ease;
}

.team-photo-item:hover > img,
.team-photo-item:focus-visible > img {
  transform: scale(1.018);
}

.team-photo-count {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 10, 11, 0.78);
  color: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.2;
}

.team-photo-caption {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 15px 13px;
  border-top: 1px solid var(--line);
}

.team-photo-caption small {
  color: var(--accent);
  font-family: var(--brand-font);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.05em;
}

.team-photo-caption strong {
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}

.gallery-empty {
  min-height: 420px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
}

.gallery-empty i {
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 40px;
}

.gallery-empty h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 500;
}

.gallery-lightbox {
  width: min(1120px, calc(100% - 40px));
  max-width: none;
  height: min(82vh, 720px);
  max-height: none;
  padding: 0;
  border: 1px solid #35353a;
  border-radius: 0;
  background: #101011;
  color: #fff;
  overflow: hidden;
}

.gallery-lightbox[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.gallery-lightbox[open].has-navigation {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
}

.gallery-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.gallery-lightbox-content {
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
}

.gallery-lightbox.has-navigation .gallery-lightbox-content {
  grid-column: 2;
}

.gallery-lightbox figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 24px;
  background: #f1f1ef;
  display: grid;
  place-items: center;
}

.gallery-lightbox figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #f1f1ef;
}

.gallery-lightbox-counter {
  position: absolute;
  right: 34px;
  bottom: 34px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(10, 10, 11, 0.76);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
}

.gallery-lightbox-counter[hidden],
.gallery-lightbox-nav[hidden] {
  display: none;
}

.gallery-robot-record {
  min-width: 0;
  min-height: 0;
  padding: 30px 28px;
  border-left: 1px solid #303035;
  background: #171719;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gallery-record-heading > span {
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gallery-record-heading > strong {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid #3a3a3f;
  color: #c9c9c9;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
}

.gallery-record-heading > strong[hidden] {
  display: none;
}

.gallery-record-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.18;
  font-weight: 500;
}

.gallery-record-summary {
  color: #d0d0d0;
  font-size: 14px;
  line-height: 1.75;
}

.gallery-record-service {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid #303035;
  border-bottom: 1px solid #303035;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
}

.gallery-record-service dt {
  color: #8f8f94;
}

.gallery-record-service dd {
  margin: 0;
  color: #f4f4f4;
}

.gallery-record-contributors h3 {
  margin: 0 0 10px;
  color: #f4f4f4;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.gallery-record-contributors > div {
  display: grid;
  gap: 8px;
}

.gallery-record-contributors > div > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.gallery-record-contributors span {
  color: #8f8f94;
}

.gallery-record-contributors strong {
  color: #f4f4f4;
  font-weight: 400;
}

.gallery-lightbox-nav,
.gallery-lightbox-close {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.gallery-lightbox-nav {
  font-size: 36px;
}

.gallery-lightbox-nav:hover,
.gallery-lightbox-nav:focus-visible,
.gallery-lightbox-close:hover,
.gallery-lightbox-close:focus-visible {
  color: var(--accent);
  background: #1b1b1e;
}

.gallery-lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid #3a3a3f;
  background: rgba(10, 10, 11, 0.82);
  font-size: 24px;
}

.organization-page .organization-section {
  margin-top: 0;
}

.match-archive {
  --match-red: #d95353;
  --match-blue: #438fc7;
  --match-gold: #a97a3c;
  --match-loss: #66666c;
  padding-top: 44px;
}

.records-page .match-archive {
  margin-top: 28px;
  padding-top: 18px;
}

:root[data-theme="dark"] .match-archive {
  --match-red: #ef6a6a;
  --match-blue: #65aee1;
  --match-gold: #bf9251;
  --match-loss: #73737a;
}

.match-archive-heading {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(360px, 1.25fr);
  align-items: end;
  gap: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.match-archive-heading h2 {
  margin: 2px 0 0;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.2;
}

.match-archive-heading > p {
  padding-bottom: 5px;
  color: var(--muted);
  font-size: 16px;
}

.match-season-tabs {
  display: inline-grid;
  grid-auto-flow: column;
  margin-top: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.match-season-tabs button {
  min-width: 88px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.match-season-tabs button:last-child {
  border-right: 0;
}

.match-season-tabs button:hover,
.match-season-tabs button:focus-visible {
  color: var(--text);
}

.match-season-tabs button.is-active {
  background: var(--accent);
  color: #101011;
}

.match-season-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.match-season-summary {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(260px, 1.3fr) auto;
  align-items: center;
  gap: 32px;
  margin-top: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.match-summary-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.match-summary-title span {
  color: var(--accent);
  font-family: var(--brand-font);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.match-summary-title strong {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  font-size: 26px;
  font-weight: 500;
}

.match-summary-title strong .is-wins,
.match-summary-facts .is-wins strong {
  color: var(--accent);
}

.match-summary-title strong .is-losses,
.match-summary-facts .is-losses strong {
  color: var(--match-loss);
}

.match-summary-title strong .is-draws,
.match-summary-facts .is-draws strong {
  color: var(--muted);
}

.match-season-summary > p {
  color: var(--muted);
  line-height: 1.7;
  white-space: pre-line;
}

.match-summary-facts {
  display: flex;
  gap: 24px;
}

.match-summary-facts > span {
  display: flex;
  flex-direction: column;
  min-width: 48px;
  gap: 2px;
}

.match-summary-facts small {
  color: var(--muted);
  font-size: 11px;
}

.match-summary-facts strong {
  font-size: 22px;
  font-weight: 500;
}

.match-summary-facts .is-matches strong {
  color: var(--match-gold);
}

.match-list {
  border-bottom: 1px solid var(--line);
}

.match-record {
  display: grid;
  grid-template-columns: 48px 170px minmax(350px, 0.9fr) minmax(330px, 1.1fr);
  align-items: center;
  gap: 20px;
  min-height: 142px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.match-record:first-child {
  border-top: 0;
}

.match-record-index {
  align-self: start;
  padding-top: 4px;
  color: var(--accent);
  font-family: var(--brand-font);
  font-size: 14px;
}

.match-record-context,
.match-record-outcome {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.match-record-context span {
  color: var(--muted);
  font-size: 13px;
}

.match-record-context strong {
  font-size: 17px;
  font-weight: 500;
}

.match-scoreboard {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 44px minmax(130px, 1fr);
  align-items: center;
  gap: 12px;
}

.match-team {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.35;
}

.match-team__school,
.match-team__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-team__school {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.76;
}

.match-team__name {
  font-size: 14px;
  font-weight: 500;
}

.match-scoreboard .match-team--red,
.match-score .match-score--red {
  color: var(--match-red);
}

.match-scoreboard .match-team--blue,
.match-score .match-score--blue {
  color: var(--match-blue);
}

.match-scoreboard > .match-team:last-child {
  align-items: flex-end;
  text-align: right;
}

.match-scoreboard .match-team.is-qianli .match-team__name {
  font-weight: 600;
}

.match-scoreboard > strong {
  min-width: 44px;
  font-family: var(--brand-font);
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

.match-score {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}

.match-score b {
  color: var(--muted);
  font-weight: 400;
}

.match-record-outcome {
  padding-left: 20px;
  border-left: 2px solid var(--line);
}

.match-record-outcome > strong {
  color: var(--muted);
  font-size: 21px;
  font-weight: 500;
}

.match-record--win .match-record-outcome {
  border-left-color: var(--accent);
}

.match-record--win .match-record-outcome > strong {
  color: var(--accent);
}

.match-record-outcome p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}

.match-record-outcome small {
  color: var(--accent);
  font-size: 11px;
}

.match-record-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.match-media-trigger {
  display: inline-grid;
  grid-template-columns: 42px auto;
  align-items: center;
  min-width: 112px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: zoom-in;
}

.match-media-trigger:hover,
.match-media-trigger:focus-visible,
.match-video-link:hover,
.match-video-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.match-media-trigger:focus-visible,
.match-video-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.match-media-trigger > img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-right: 1px solid var(--line);
}

.match-media-trigger > span {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.match-media-trigger b {
  font-weight: 500;
}

.match-media-trigger small {
  color: var(--subtle);
  font-size: 10px;
}

.match-video-link {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 24px;
  transition: border-color 0.16s, color 0.16s;
}

.match-list-empty {
  padding: 36px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.has-match-lightbox {
  overflow: hidden;
}

.match-media-lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 8, 9, 0.94);
  color: #f4f4f4;
}

.match-media-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.match-media-lightbox__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  padding: 34px 24px 24px;
}

.match-media-lightbox figure {
  grid-column: 2;
  width: fit-content;
  max-width: min(1120px, 100%);
  margin: 0 auto;
}

.match-media-lightbox figure img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 122px);
  margin: 0 auto;
  object-fit: contain;
  background: #111;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.match-media-lightbox figcaption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  color: #dedede;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
}

.match-media-lightbox figcaption small {
  color: #9d9d9d;
}

.match-media-lightbox__close,
.match-media-lightbox__arrow {
  border: 1px solid #4a4a4f;
  background: #171719;
  color: #f4f4f4;
  cursor: pointer;
}

.match-media-lightbox__close:hover,
.match-media-lightbox__arrow:hover,
.match-media-lightbox__close:focus-visible,
.match-media-lightbox__arrow:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.match-media-lightbox__close {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 22px;
}

.match-media-lightbox__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  justify-self: center;
  font-size: 28px;
}

.match-media-lightbox__arrow--prev {
  grid-column: 1;
}

.match-media-lightbox__arrow--next {
  grid-column: 3;
}

.has-gallery-lightbox {
  overflow: hidden;
}

@media (max-width: 1180px) {
  .match-record {
    grid-template-columns: 42px 145px minmax(300px, 0.92fr) minmax(255px, 1.08fr);
    gap: 18px;
  }

  .robot-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .match-archive-heading,
  .match-season-summary {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .match-summary-facts {
    justify-content: flex-start;
  }

  .match-record {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 12px 16px;
    padding: 20px 0;
  }

  .match-record-context,
  .match-scoreboard,
  .match-record-outcome {
    grid-column: 2;
  }

  .match-scoreboard {
    width: 100%;
    gap: 10px;
  }

  .match-record-outcome {
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .match-record--win .match-record-outcome {
    border-left-color: transparent;
  }

  .match-media-lightbox__inner {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    padding-inline: 10px;
  }

  .match-media-lightbox__arrow {
    width: 40px;
    height: 40px;
  }

  .gallery-page .page-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .gallery-shell {
    width: calc(100% - 28px);
    margin-top: 34px;
  }

  .gallery-tabs {
    top: 72px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(148px, 1fr);
    overflow-x: auto;
  }

  .gallery-tabs button {
    min-height: 52px;
  }

  .gallery-section-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .robot-gallery-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-lightbox {
    width: calc(100% - 20px);
    height: min(90vh, 860px);
  }

  .gallery-lightbox[open] {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-lightbox[open].has-navigation {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-lightbox-content {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  }

  .gallery-lightbox figure {
    padding: 14px;
  }

  .gallery-robot-record {
    padding: 22px 20px;
    border-top: 1px solid #303035;
    border-left: 0;
  }

  .gallery-lightbox-nav {
    position: absolute;
    z-index: 2;
    top: 28%;
    width: 46px;
    height: 58px;
    background: rgba(10, 10, 11, 0.72);
    transform: translateY(-50%);
  }

  .gallery-lightbox-prev {
    left: 0;
  }

  .gallery-lightbox-next {
    right: 0;
  }
}

@media (max-width: 520px) {
  .match-season-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .match-season-tabs button {
    min-width: 0;
  }

  .match-team__school {
    font-size: 11px;
  }

  .match-team__name {
    font-size: 12px;
  }

  .match-media-lightbox__inner {
    display: block;
    padding: 74px 14px 18px;
  }

  .match-media-lightbox figure img {
    max-height: calc(100vh - 142px);
  }

  .match-media-lightbox__arrow {
    position: absolute;
    z-index: 2;
    bottom: 18px;
  }

  .match-media-lightbox__arrow--prev {
    left: 14px;
  }

  .match-media-lightbox__arrow--next {
    right: 14px;
  }

  .robot-gallery-grid {
    grid-template-columns: 1fr;
  }

  .team-photo-grid {
    grid-template-columns: 1fr;
  }

  .robot-gallery-item {
    aspect-ratio: 1.05 / 1;
  }
}

/* Frontline news and preparation calendar. */
.frontline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.55fr);
  gap: 18px;
  align-items: stretch;
}

.frontline-panel {
  border: 1px solid var(--line);
  background: var(--card-bg);
  padding: 26px;
}

.frontline-panel--primary {
  min-height: 300px;
}

.frontline-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.frontline-panel-head .page-label {
  margin-bottom: 5px;
}

.frontline-panel-head h2,
.calendar-phases .section-heading h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 500;
}

.frontline-panel-head > span {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 13px;
}

.calendar-status {
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--accent) !important;
}

.frontline-empty {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 42px;
}

.frontline-empty > i {
  color: var(--accent);
  font-size: 44px;
  line-height: 1;
}

.frontline-empty h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
}

.frontline-empty p {
  max-width: 650px;
}

.moment-list {
  display: grid;
}

.moment-entry {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 156px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  transition: color 180ms ease, background-color 180ms ease;
}

.moment-entry:last-child {
  border-bottom: 0;
}

.moment-entry:hover,
.moment-entry:focus-visible {
  background: var(--surface);
  outline: 0;
}

.moment-entry-icon {
  color: var(--accent);
  font-size: 40px;
  line-height: 1;
}

.moment-entry-copy {
  min-width: 0;
}

.moment-entry-meta {
  margin-bottom: 5px;
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.moment-entry h3 {
  margin: 0 0 7px;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 500;
}

.moment-entry-copy > p:last-child {
  max-width: 620px;
  font-size: 14px;
}

.moment-entry-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}

.frontline-meta-list {
  margin: 0;
}

.frontline-meta-list > div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.frontline-meta-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.frontline-meta-list dt {
  color: var(--subtle);
  font-size: 13px;
}

.frontline-meta-list dd {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.calendar-phases {
  margin-top: -20px;
}

.calendar-phases .section-heading {
  margin-bottom: 20px;
}

.calendar-phase-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.calendar-phase-grid article {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: var(--card-bg);
}

.calendar-phase-grid article:last-child {
  border-right: 0;
}

.calendar-phase-grid i {
  color: var(--accent);
  font-size: 24px;
}

.calendar-phase-grid h3 {
  margin: 14px 0 4px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}

.calendar-phase-grid p {
  font-size: 13px;
}

@media (max-width: 980px) {
  .frontline-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-phase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .calendar-phase-grid article:nth-child(3) {
    border-right: 0;
  }

  .calendar-phase-grid article:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .frontline-panel {
    padding: 20px;
  }

  .frontline-panel-head {
    gap: 12px;
  }

  .frontline-empty {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding-top: 30px;
  }

  .frontline-empty > i {
    font-size: 34px;
  }

  .moment-entry {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 22px 0;
  }

  .moment-entry-icon {
    font-size: 32px;
  }

  .moment-entry-action {
    grid-column: 2;
    justify-self: start;
  }

  .calendar-phase-grid {
    grid-template-columns: 1fr;
  }

  .calendar-phase-grid article,
  .calendar-phase-grid article:nth-child(3) {
    border-top: 1px solid var(--line);
    border-right: 0;
  }

  .calendar-phase-grid article:first-child {
    border-top: 0;
  }
}

/* Technical group SVGs are authored in white: darken them only on light surfaces. */
.group-grid .entry-card figure img[src$=".svg"] {
  filter: brightness(0) saturate(100%) !important;
}

:root[data-theme="dark"] .group-grid .entry-card figure img[src$=".svg"] {
  filter: none !important;
}

/* Data-driven season calendar. */
.season-calendar-hero {
  margin-top: 48px;
  padding-bottom: 26px;
}

.season-calendar-hero h1 {
  font-size: clamp(38px, 4.2vw, 62px);
}

.season-calendar {
  margin-top: 38px;
}

.season-calendar button {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.season-calendar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.season-calendar-head h2,
.season-overview-intro h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
}

.season-calendar-note {
  max-width: 720px;
  margin-top: 9px;
  font-size: 14px;
}

.season-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  flex: 0 0 auto;
  border: 1px solid var(--line);
}

.season-view-switch button {
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--muted);
  cursor: pointer;
}

.season-view-switch button:last-child {
  border-right: 0;
}

.season-view-switch button i {
  margin-right: 7px;
  font-size: 19px;
}

.season-view-switch button.is-active {
  background: var(--accent);
  color: #111;
}

:root:not([data-theme="dark"]) .season-view-switch button.is-active {
  color: #fff;
}

.season-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.season-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.season-category-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.season-category-filter i {
  color: var(--category-color);
  font-size: 17px;
}

.season-category-filter.is-active {
  border-color: color-mix(in srgb, var(--category-color) 60%, var(--line));
  background: color-mix(in srgb, var(--category-color) 12%, var(--card-bg));
  color: var(--text);
}

.season-status-key {
  display: flex;
  gap: 15px;
  flex: 0 0 auto;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.season-status-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.season-status-sample {
  display: inline-block;
  width: 25px;
  height: 7px;
  background: var(--accent);
}

.season-status-sample--tentative {
  border: 1px dashed var(--accent);
  background: transparent;
}

.season-status-sample--derived {
  background: repeating-linear-gradient(135deg, var(--accent) 0 3px, transparent 3px 6px);
}

.season-view {
  padding-top: 28px;
}

.season-view[hidden],
.season-tooltip[hidden] {
  display: none !important;
}

.season-month-toolbar {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 18px;
  align-items: center;
  padding: 0 0 22px;
}

.season-icon-button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font-size: 25px;
  cursor: pointer;
}

.season-icon-button:disabled {
  opacity: 0.32;
  cursor: default;
}

.season-month-heading {
  text-align: center;
}

.season-month-heading p {
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.season-month-heading h3 {
  margin: 2px 0 4px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
}

.season-month-heading span {
  color: var(--muted);
  font-size: 14px;
}

.season-month-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 18px;
  align-items: stretch;
}

.season-month-scroll,
.season-overview-scroll {
  min-width: 0;
  border: 1px solid var(--line);
}

.season-month-scroll {
  overflow-x: auto;
  scrollbar-color: var(--accent) var(--surface);
}

.season-overview-scroll {
  overflow-x: hidden;
}

.season-month-calendar {
  min-width: 720px;
  background: var(--line);
}

.season-weekdays,
.season-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}

.season-weekdays span {
  display: grid;
  place-items: center;
  height: 34px;
  background: var(--surface);
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.season-day {
  min-width: 0;
  min-height: 104px;
  padding: 7px;
  background: var(--card-bg);
}

.season-day.is-outside {
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}

.season-day-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.season-day.is-outside .season-day-number {
  color: var(--line);
}

.season-day.is-today .season-day-number {
  background: var(--accent);
  color: #111;
  border-radius: 50%;
  font-weight: 700;
}

.season-day-events {
  display: grid;
  gap: 3px;
  margin-top: 5px;
}

.season-day-event {
  width: 100%;
  min-width: 0;
  height: 15px;
  overflow: hidden;
  padding: 0 4px;
  border: 0;
  background: var(--event-color);
  color: #111;
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 9px;
  line-height: 15px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.season-event--tentative {
  border: 1px dashed var(--event-color) !important;
  background: color-mix(in srgb, var(--event-color) 18%, var(--card-bg)) !important;
  color: var(--text) !important;
}

.season-event--derived {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--event-color) 58%, transparent) 0 4px, color-mix(in srgb, var(--event-color) 20%, var(--card-bg)) 4px 8px) !important;
  color: var(--text) !important;
}

.season-event--major {
  outline: 1px solid var(--text);
  outline-offset: 1px;
  font-weight: 700 !important;
}

.season-day-more {
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
}

.season-event-detail {
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--event-color, var(--accent));
  background: var(--card-bg);
}

.season-detail-meta {
  color: var(--event-color, var(--accent));
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.season-event-detail h4 {
  margin: 8px 0 4px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;
}

.season-detail-range {
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.season-detail-description {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.8;
}

.season-detail-source {
  margin-top: 16px;
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.6;
}

.season-detail-related {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.season-detail-related > p {
  flex-basis: 100%;
  margin-bottom: 4px;
  font-size: 12px;
}

.season-detail-related button {
  padding: 4px 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.season-detail-related button.is-active {
  border-color: var(--event-color);
  color: var(--text);
}

.season-detail-empty {
  display: grid;
  place-items: center;
  min-height: 230px;
  text-align: center;
}

.season-detail-empty i {
  color: var(--subtle);
  font-size: 34px;
}

.season-overview-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.season-overview-intro p:last-child {
  max-width: 620px;
  font-size: 14px;
}

.season-overview {
  width: 100%;
  min-width: 0;
  background: var(--card-bg);
}

.season-overview-ruler,
.season-overview-row {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
}

.season-overview-corner,
.season-overview-label {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid var(--line);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.season-overview-corner {
  height: 42px;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.season-overview-months {
  display: flex;
  min-width: 0;
}

.season-overview-months span {
  display: grid;
  place-items: center;
  height: 42px;
  border-right: 1px solid var(--line);
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.season-overview-row {
  min-height: 76px;
  border-top: 1px solid var(--line);
}

.season-overview-label {
  color: var(--muted);
}

.season-overview-track {
  position: relative;
  min-height: 76px;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(8.333% - 1px), var(--soft-line) calc(8.333% - 1px) 8.333%);
}

.season-overview-bar {
  position: absolute;
  z-index: 1;
  height: 21px;
  overflow: hidden;
  padding: 0 6px;
  border: 0;
  background: var(--event-color);
  color: #111;
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 10px;
  line-height: 21px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.season-overview-marker {
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 2px;
  padding: 0;
  border: 0;
  background: var(--event-color);
  color: var(--event-color);
  cursor: pointer;
}

.season-overview-marker i {
  position: absolute;
  top: -3px;
  left: 50%;
  font-size: 14px;
  transform: translateX(-50%);
}

.season-event-detail--overview {
  display: grid;
  grid-template-columns: minmax(170px, 0.55fr) minmax(180px, 0.55fr) minmax(280px, 1.4fr) minmax(200px, 0.8fr);
  gap: 18px;
  min-height: 0;
  margin-top: 14px;
  padding: 18px 20px;
  border-top-width: 2px;
}

.season-event-detail--overview .season-detail-meta,
.season-event-detail--overview h4,
.season-event-detail--overview .season-detail-range,
.season-event-detail--overview .season-detail-description,
.season-event-detail--overview .season-detail-source {
  margin: 0;
  align-self: center;
}

.season-event-detail--overview h4 {
  font-size: 18px;
}

.season-calendar-source {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  color: var(--subtle);
  font-size: 12px;
}

.season-calendar-source i {
  margin-top: 2px;
  color: var(--accent);
  font-size: 17px;
}

.season-tooltip {
  position: fixed;
  z-index: 100;
  display: grid;
  width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  color: var(--text);
  pointer-events: none;
}

.season-tooltip strong {
  font-size: 14px;
  font-weight: 500;
}

.season-tooltip span,
.season-tooltip small {
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

@media (max-width: 980px) {
  .season-calendar-head,
  .season-legend {
    align-items: stretch;
    flex-direction: column;
  }

  .season-view-switch {
    width: min(100%, 420px);
  }

  .season-status-key {
    justify-content: flex-start;
  }

  .season-month-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-event-detail {
    min-height: 0;
  }

  .season-event-detail--overview {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .season-calendar-hero {
    margin-top: 36px;
  }

  .season-calendar {
    margin-top: 28px;
  }

  .season-calendar-head h2 {
    font-size: 24px;
  }

  .season-view-switch {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .season-view-switch button {
    min-width: 0;
    padding: 0 8px;
    font-size: 13px;
  }

  .season-legend {
    padding: 14px 0;
  }

  .season-category-filter {
    flex: 1 1 calc(33.333% - 8px);
    justify-content: center;
  }

  .season-status-key {
    flex-wrap: wrap;
    gap: 8px 13px;
  }

  .season-month-toolbar {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .season-icon-button {
    width: 38px;
    height: 38px;
  }

  .season-month-heading h3 {
    font-size: 22px;
  }

  .season-month-heading span {
    display: block;
    font-size: 12px;
    line-height: 1.55;
  }

  .season-event-detail {
    padding: 20px;
  }

  .season-overview-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .season-event-detail--overview {
    display: block;
  }

  .season-event-detail--overview > * + * {
    margin-top: 8px;
  }
}

/* Season calendar view hierarchy and continuous progress treatment. */
.season-calendar-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
  align-items: end;
}

.season-calendar-hero h1 {
  font-size: clamp(32px, 2.8vw, 44px);
  white-space: nowrap;
}

.season-calendar-hero-side {
  display: grid;
  gap: 18px;
}

.season-calendar-hero-side > p {
  max-width: 560px;
  font-size: 13px;
}

.season-calendar {
  margin-top: 22px;
}

.season-view-switch {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.season-view-switch button {
  min-height: 40px;
  padding: 0 11px;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1;
}

.season-view-switch button i {
  margin-right: 5px;
  font-size: 15px;
}

.season-view-switch button.is-active,
:root:not([data-theme="dark"]) .season-view-switch button.is-active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 27%, var(--card-bg));
  color: var(--text);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 70%, transparent);
}

.season-legend {
  padding: 12px 0;
}

.season-category-filter {
  min-height: 30px;
  padding: 3px 8px;
  font-size: 11px;
}

.season-category-filter i {
  font-size: 14px;
}

.season-status-key {
  font-size: 11px;
}

.season-status-sample {
  background: #aeb6c2;
}

.season-status-sample--tentative {
  border-color: #aeb6c2;
  background: transparent;
}

.season-status-sample--derived {
  background: repeating-linear-gradient(135deg, #aeb6c2 0 3px, transparent 3px 6px);
}

.season-view {
  padding-top: 22px;
}

.season-progress-zoom-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
}

.season-progress-zoom-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
}

.season-progress-zoom-head > p {
  max-width: 540px;
  font-size: 12px;
}

.season-progress-master {
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  scrollbar-color: var(--text) var(--surface);
}

.season-progress-months,
.season-progress-track,
.season-progress-range,
.season-progress-window-label {
  min-width: 920px;
}

.season-progress-months {
  display: flex;
}

.season-progress-month,
.season-overview-months button {
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 10px;
  cursor: pointer;
}

.season-progress-month:hover,
.season-progress-month:focus-visible,
.season-overview-months button:hover,
.season-overview-months button:focus-visible {
  background: var(--surface);
  color: var(--text);
  outline: 0;
}

.season-progress-track {
  position: relative;
  height: 68px;
  margin-top: 3px;
  overflow: hidden;
  background: var(--surface);
}

.season-progress-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 11px 8px 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--progress-color) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--progress-color) 72%, transparent);
  border-right: 1px solid color-mix(in srgb, #101011 38%, transparent);
  background: color-mix(in srgb, var(--progress-color) 70%, var(--card-bg));
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.season-progress-segment--pause {
  color: var(--muted);
}

.season-progress-highlight {
  position: absolute;
  z-index: 2;
  bottom: 5px;
  min-width: max-content;
  height: 28px;
  overflow: visible;
  padding: 0 9px;
  border: 0;
  background: color-mix(in srgb, var(--highlight-color) 66%, var(--card-bg));
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 9px;
  line-height: 28px;
  white-space: nowrap;
  cursor: help;
  box-shadow: none;
}

.season-progress-window {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  border: 1px solid color-mix(in srgb, var(--text) 78%, transparent);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: none;
  pointer-events: none;
  transition: left 160ms ease, width 160ms ease;
}

.season-progress-range {
  display: block;
  width: 100%;
  height: 22px;
  margin: 12px 0 0;
  accent-color: var(--text);
  cursor: ew-resize;
}

.season-progress-window-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.season-progress-zoom-head {
  margin: 28px 0 14px;
}

.season-progress-zoom {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.season-progress-zoom-ruler,
.season-progress-zoom-row {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  min-width: 720px;
}

.season-progress-zoom-corner,
.season-progress-zoom-label {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.season-progress-zoom-ruler {
  height: 40px;
}

.season-progress-zoom-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.season-progress-zoom-months button {
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.season-progress-zoom-months button:hover,
.season-progress-zoom-months button:focus-visible {
  background: var(--surface);
  color: var(--accent);
  outline: 0;
}

.season-progress-zoom-row {
  min-height: 68px;
  border-top: 1px solid var(--line);
}

.season-progress-zoom-track {
  position: relative;
  min-height: 68px;
  background-image: linear-gradient(90deg, transparent calc(33.333% - 1px), var(--line) calc(33.333% - 1px) 33.333%, transparent 33.333% calc(66.666% - 1px), var(--line) calc(66.666% - 1px) 66.666%, transparent 66.666%);
}

.season-progress-zoom-bar {
  position: absolute;
  height: 21px;
  overflow: hidden;
  padding: 0 7px;
  border: 0;
  background: var(--event-color);
  color: #111;
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 10px;
  line-height: 21px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.season-day-event:not(.season-event--tentative):not(.season-event--derived),
.season-overview-bar:not(.season-event--tentative):not(.season-event--derived),
.season-progress-zoom-bar:not(.season-event--tentative):not(.season-event--derived) {
  border-top: 1px solid color-mix(in srgb, var(--event-color) 68%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--event-color) 68%, transparent);
  background: color-mix(in srgb, var(--event-color) 64%, var(--card-bg));
  color: var(--text);
}

.season-progress-detail {
  margin-top: 12px;
}

.season-calendar.is-memo-view .season-legend {
  display: none;
}

.season-memo-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.season-memo-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.season-memo-head > p {
  max-width: 620px;
  font-size: 12px;
}

.season-memo-list {
  border-bottom: 1px solid var(--line);
}

.season-memo-item {
  display: grid;
  grid-template-columns: 56px minmax(220px, 0.75fr) 84px minmax(300px, 1.4fr);
  gap: 18px;
  align-items: center;
  min-height: 94px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.season-memo-item:first-child {
  border-top: 0;
}

.season-memo-number {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.season-memo-main h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
}

.season-memo-date,
.season-memo-note,
.season-memo-status {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.season-memo-date {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.season-memo-status {
  justify-self: start;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, #a9c4e8 70%, var(--line));
  background: color-mix(in srgb, #a9c4e8 16%, var(--card-bg));
  color: var(--text);
  font-size: 10px;
}

.season-memo-item--pending .season-memo-status {
  border-style: dashed;
  color: var(--muted);
}

.season-memo-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.season-overview-months button {
  flex: 0 0 auto;
}

.season-month-grid {
  gap: 0;
}

.season-day {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.season-day:nth-child(7n) {
  border-right: 0;
}

.season-day-events {
  margin-right: -7px;
  margin-left: -7px;
}

.season-day-event {
  padding-right: 7px;
  padding-left: 7px;
}

.season-day-event.season-event--tentative {
  border-right: 0 !important;
  border-left: 0 !important;
}

@media (max-width: 980px) {
  .season-calendar-hero {
    grid-template-columns: 1fr;
  }

  .season-calendar-hero h1 {
    white-space: normal;
  }

  .season-calendar-hero-side {
    gap: 14px;
  }

  .season-progress-zoom-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .season-memo-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .season-memo-item {
    grid-template-columns: 42px minmax(190px, 0.8fr) 76px minmax(220px, 1.2fr);
  }
}

@media (max-width: 620px) {
  .season-calendar-hero h1 {
    font-size: clamp(28px, 8.5vw, 34px);
  }

  .season-view-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .season-view-switch button {
    min-height: 38px;
    padding: 0 3px;
    font-size: 10px;
  }

  .season-view-switch button i {
    margin-right: 2px;
    font-size: 14px;
  }

  .season-progress-zoom-head h3 {
    font-size: 18px;
  }

  .season-progress-master {
    padding: 12px;
  }

  .season-memo-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 0;
    padding: 15px 0;
  }

  .season-memo-note {
    grid-column: 2 / -1;
  }

  .season-progress-months,
  .season-progress-track,
  .season-progress-range,
  .season-progress-window-label {
    min-width: 760px;
  }
}






/* Training lesson library and group introduction letter */
.resource-tabs {
  width: min(860px, calc(100vw - 48px));
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.resource-tabs button {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
}

.resource-tabs button:last-child {
  border-right: 0;
}

.resource-tabs button.is-active {
  color: #111;
  background: var(--accent);
}

.resource-tabs button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.resource-panel[hidden] {
  display: none;
}

.resource-file-list {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.resource-file-card {
  min-height: 92px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  background: var(--card-bg);
  border: 1px solid var(--line);
  transition: border-color 180ms ease, background 180ms ease;
}

.resource-file-card:hover,
.resource-file-card:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.resource-file-card > i {
  color: var(--accent);
  font-size: 34px;
}

.resource-file-card span {
  min-width: 0;
}

.resource-file-card small,
.resource-file-card em {
  color: var(--subtle);
  font-size: 12px;
  font-style: normal;
}

.resource-file-card strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
}

.resource-file-card em {
  color: var(--accent);
}
html.has-group-letter {
  overflow: hidden;
}

.training-library-heading,
.hall-panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  gap: 48px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.training-library-heading h2,
.hall-panel-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.18;
}

.training-library-heading > p,
.hall-panel-heading > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.hall-page-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  align-items: end;
}
@media (min-width: 1181px) {
  .hall-page-hero {
    grid-template-columns: minmax(340px, 0.68fr) max-content minmax(312px, 0.48fr);
    column-gap: 48px;
  }

  .hall-page-hero > p {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0 0 4px;
    white-space: nowrap;
  }

  .hall-page-hero .hall-tabs {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
  }

  .hall-alumni-toolbar .hall-panel-heading {
    grid-template-columns: max-content max-content;
    gap: clamp(28px, 4vw, 64px);
  }

  .hall-alumni-toolbar .hall-panel-heading > p {
    white-space: nowrap;
  }
}

.training-library-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.training-card {
  position: relative;
  display: flex;
  min-height: 290px;
  padding: 24px;
  overflow: hidden;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  background: var(--card-bg);
  border: 1px solid var(--line);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.training-card:hover,
.training-card:focus-visible {
  z-index: 1;
  transform: translateY(-5px);
  border-color: var(--accent);
  outline: none;
}

.training-card.is-ready {
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
}

.training-card img {
  width: 78px;
  height: 78px;
  margin: 0 0 auto;
  object-fit: contain;
}

[data-theme="dark"] .training-card img,
[data-theme="dark"] .group-letter-header img {
  filter: invert(1);
}

.training-card-state,
.training-card small,
.group-letter-kicker,
.group-letter-lesson-label,
.hall-kicker,
.alumni-period-index {
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.training-card-state {
  position: absolute;
  top: 22px;
  right: 22px;
}

.training-card h3 {
  margin: 20px 0 10px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
}

.training-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.training-card small {
  display: block;
  margin-bottom: 7px;
}

.group-letter-dialog {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  padding: 22px;
  place-items: center;
  color: var(--text);
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(6px);
}

.group-letter-dialog[hidden] {
  display: none !important;
}

.group-letter-shell {
  position: relative;
  width: min(1220px, calc(100vw - 44px));
  max-height: 90dvh;
  padding: 42px 54px 50px;
  overflow: auto;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 28px 90px rgb(0 0 0 / 35%);
  scrollbar-color: var(--accent) var(--surface);
  scrollbar-width: thin;
}

.group-letter-close {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.group-letter-close:hover,
.group-letter-close:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.group-letter-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 28px;
  align-items: start;
  padding: 4px 64px 28px 0;
  border-bottom: 1px solid var(--line);
}

.group-letter-header h2 {
  margin: 8px 0 6px;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 500;
  line-height: 1.12;
}

.group-letter-header p {
  margin: 0;
  color: var(--muted);
}

.group-letter-header img {
  width: 96px;
  height: 96px;
  padding: 12px;
  object-fit: contain;
  background: var(--surface);
}

.group-letter-recruitment,
.group-letter-lesson {
  padding-top: 28px;
}

.group-letter-recruitment {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.group-letter-recruitment > p,
.group-letter-summary,
.group-letter-outcome p,
.group-letter-topic-list li,
.group-letter-stage-list li {
  color: var(--muted);
  line-height: 1.85;
}

.group-letter-direction-list,
.group-letter-tools {
  display: flex;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  flex-wrap: wrap;
  list-style: none;
}

.group-letter-direction-list li,
.group-letter-tools li,
.group-letter-tools span {
  padding: 7px 11px;
  color: var(--text);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.group-letter-detail,
.group-letter-source {
  display: inline-flex;
  min-height: 42px;
  margin-top: 20px;
  padding: 0 16px;
  align-items: center;
  gap: 7px;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line);
}

.group-letter-detail:hover,
.group-letter-source:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.group-letter-lesson-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.group-letter-lesson h3 {
  margin: 7px 0 0;
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.25;
}

.group-letter-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0;
}

.group-letter-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--line);
}

.group-letter-outcome {
  margin: 22px 0;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-left: 3px solid var(--accent);
}

.group-letter-outcome strong {
  display: block;
  margin-bottom: 5px;
}

.group-letter-outcome > span {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0;
}

.group-letter-outcome p {
  margin: 0;
}

.group-letter-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin-top: 24px;
}

.group-letter-columns h4 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
}

.group-letter-topic-list,
.group-letter-stage-list {
  margin: 0;
  padding-left: 20px;
}

.group-letter-pending {
  margin-top: 22px;
  padding: 22px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line);
}

.group-letter-author {
  margin: 18px 0 0;
  color: var(--subtle);
  font-size: 14px;
}

.group-letter-author i {
  margin-right: 6px;
  color: var(--accent);
}

/* Training reader */
.training-reader-page {
  padding-bottom: 72px;
}

.training-reader-hero {
  min-height: 0;
  margin-top: 48px;
}

.training-document-shell {
  width: min(1120px, calc(100vw - 48px));
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.training-document-meta {
  display: flex;
  min-height: 74px;
  padding: 18px 22px;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.training-document-meta > div {
  min-width: 150px;
}

.training-document-meta span {
  display: block;
  margin-bottom: 5px;
  color: var(--subtle);
  font-size: 12px;
}

.training-document-meta strong {
  font-weight: 500;
}

.training-download-link,
.training-source-link {
  display: inline-flex;
  min-height: 42px;
  margin-left: auto;
  padding: 0 15px;
  align-items: center;
  gap: 7px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
}

.training-source-link + .training-download-link {
  margin-left: 0;
}

.training-download-link:hover,
.training-source-link:hover,
.training-download-link:focus-visible,
.training-source-link:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.training-markdown {
  max-width: 880px;
  margin: 0 auto;
  padding: 46px 42px 58px;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.training-markdown h2,
.training-markdown h3,
.training-markdown h4,
.training-markdown h5 {
  margin: 34px 0 14px;
  font-weight: 500;
  line-height: 1.28;
}

.training-markdown h2 {
  font-size: clamp(28px, 3vw, 42px);
}

.training-markdown h3 {
  font-size: 26px;
}

.training-markdown h4 {
  font-size: 21px;
}

.training-markdown p,
.training-markdown li,
.training-markdown blockquote {
  color: var(--muted);
  line-height: 1.95;
}

.training-markdown p {
  margin: 0 0 16px;
}

.training-markdown ul,
.training-markdown ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.training-markdown a {
  color: var(--accent);
  overflow-wrap: anywhere;
  word-break: break-all;
  text-underline-offset: 4px;
}

.training-markdown blockquote {
  margin: 24px 0;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-left: 3px solid var(--accent);
}

.training-markdown blockquote p:last-child {
  margin-bottom: 0;
}

.training-markdown img {
  display: block;
  width: 100%;
  max-height: 520px;
  margin: 22px 0;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
}

.training-markdown table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
}

.training-markdown th,
.training-markdown td {
  padding: 10px 12px;
  color: var(--muted);
  text-align: left;
  border: 1px solid var(--line);
}

.training-markdown code {
  padding: 2px 5px;
  color: var(--text);
  background: var(--surface);
}

.training-markdown pre {
  overflow: auto;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.training-loading,
.training-document-fallback {
  color: var(--subtle);
}

.training-pdf-frame {
  height: min(78vh, 820px);
  min-height: 520px;
  background: var(--surface);
}

.training-pdf-frame object {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.training-pdf-frame p {
  margin: 0;
  padding: 28px;
  color: var(--muted);
}

/* Join Q&A */
.qa-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(520px, 1fr) minmax(230px, auto);
  gap: 24px;
  align-items: end;
}

.qa-filter {
  min-width: 230px;
  height: 44px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.qa-filter > i:first-child {
  color: var(--accent);
  font-size: 18px;
}

.qa-filter select {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  cursor: pointer;
}

.qa-filter select option {
  color: var(--text);
  background: var(--card-bg);
}

.qa-filter-chevron {
  color: var(--muted);
  pointer-events: none;
}

.qa-chip-row {
  display: flex;
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
  align-self: end;
}

.qa-chip-row button {
  min-height: 36px;
  padding: 0 13px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  cursor: pointer;
}

.qa-chip-row button.is-active,
.qa-chip-row button:hover,
.qa-chip-row button:focus-visible {
  color: #111;
  background: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.qa-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.qa-item {
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.qa-item[hidden] {
  display: none;
}

.qa-item summary {
  min-height: 78px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.qa-item summary::-webkit-details-marker {
  display: none;
}

.qa-item summary span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.qa-item summary strong {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.35;
}

.qa-item summary i {
  color: var(--muted);
  transition: transform 180ms ease;
}

.qa-item[open] summary i {
  transform: rotate(180deg);
}

.qa-answer {
  padding: 0 22px 24px 152px;
}

.qa-answer p {
  max-width: 900px;
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.9;
}

.qa-empty {
  margin: 20px 0 0;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
}

/* Hall of fame */
.hall-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(312px, 100%);
  margin: 22px auto 0;
}

.hall-tabs button {
  min-height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  cursor: pointer;
}

.hall-tabs button + button {
  border-left: 0;
}

.hall-tabs button.is-active {
  color: #111;
  background: var(--accent);
}

.hall-tabs button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.hall-panel[hidden] {
  display: none;
}

.hall-panel {
  margin-top: 26px;
}

.legacy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.legacy-grid > article {
  min-height: 220px;
  padding: 26px;
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.legacy-grid > article h3 {
  margin: 48px 0 12px;
  font-size: 25px;
  font-weight: 500;
}

.legacy-grid > article > p:not(.page-label) {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.legacy-grid > article > i {
  color: var(--accent);
  font-size: 28px;
}

.legacy-grid > article > span {
  display: inline-block;
  margin-top: 24px;
  color: var(--muted);
  font-size: 12px;
}

.hall-alumni-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
}

.hall-alumni-toolbar .hall-panel-heading {
  margin: 0;
}

.alumni-filter {
  min-width: 210px;
  height: 44px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.alumni-filter > i:first-child {
  color: var(--accent);
  font-size: 18px;
}

.alumni-filter select {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  cursor: pointer;
}

.alumni-filter select option {
  color: var(--text);
  background: var(--card-bg);
}

.alumni-filter-chevron {
  color: var(--muted);
  pointer-events: none;
}

.hall-alumni-board {
  padding-top: 40px;
}

.alumni-period + .alumni-period {
  margin-top: 54px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.alumni-period .section-heading {
  max-width: none;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.alumni-period .section-heading h2 {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.alumni-period .section-heading p {
  max-width: none;
  padding-bottom: 13px;
  color: var(--subtle);
  font-size: 15px;
  line-height: 1.6;
}

.alumni-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.alumni-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  min-height: 0;
  padding: 8px 18px 4px;
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.alumni-card[hidden],
.alumni-period[hidden],
.alumni-empty[hidden] {
  display: none !important;
}

.alumni-card-main {
  min-width: 0;
}

.alumni-card-head {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 0;
  margin-bottom: 6px;
}

.alumni-card-head h3,
.alumni-card-head p {
  margin: 0;
}

.alumni-card-head h3 {
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.alumni-card-head > span {
  grid-column: 3;
  justify-self: end;
  color: var(--subtle);
  font-size: 14px;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
}

.alumni-seasons {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alumni-role {
  display: inline;
  margin-left: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: inherit;
  white-space: nowrap;
}

.alumni-timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  margin-top: 0;
}

.alumni-experience {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 0;
  background: transparent;
  border: 0;
}

.alumni-experience + .alumni-experience {
  border-top: 0;
}

.alumni-logo-square {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--soft-line);
}

.alumni-logo-square img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 50px;
  padding: 0;
  object-fit: contain;
}

.alumni-logo-square.logo-nus img {
  padding: 2px;
}

.alumni-experience strong {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alumni-experience small {
  justify-self: end;
  color: var(--subtle);
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

.alumni-stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  margin-right: 7px;
  padding: 0 7px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  vertical-align: 1px;
}

.stage-phd {
  color: #8a2345;
  background: rgba(199, 53, 99, 0.14);
}

.stage-master {
  color: #1f5d66;
  background: rgba(52, 156, 166, 0.14);
}

.stage-work {
  color: #5d4a12;
  background: rgba(194, 153, 38, 0.18);
}

:root[data-theme="dark"] .stage-phd {
  color: #ff9ec1;
  background: rgba(255, 78, 153, 0.18);
}

:root[data-theme="dark"] .stage-master {
  color: #8fffe1;
  background: rgba(87, 255, 178, 0.16);
}

:root[data-theme="dark"] .stage-work {
  color: #ffe58a;
  background: rgba(255, 218, 95, 0.16);
}

.alumni-empty {
  margin: 32px 0 0;
  padding: 36px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
}

@media (max-width: 1180px) {
  .training-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 820px) {
  .training-library-heading,
  .hall-panel-heading,
  .group-letter-columns {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .training-library-grid,
  .legacy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .group-letter-shell {
    padding: 34px 28px 38px;
  }

  .group-letter-header {
    grid-template-columns: minmax(0, 1fr) 74px;
    padding-right: 52px;
  }

  .group-letter-header img {
    width: 74px;
    height: 74px;
  }

  .group-letter-gallery {
    grid-template-columns: 1fr;
  }

  .hall-alumni-toolbar {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  .alumni-filter {
    width: min(220px, 100%);
  }

  .hall-page-hero,
  .qa-heading {
    grid-template-columns: 1fr;
  }

  .hall-tabs {
    margin-right: 0;
    margin-left: 0;
  }

  .training-document-shell {
    width: min(100% - 28px, 1120px);
  }

  .training-document-meta {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .training-download-link,
  .training-source-link {
    margin-left: 0;
  }

  .training-markdown {
    padding: 34px 24px 42px;
  }

  .qa-filter {
    width: min(260px, 100%);
  }

  .qa-item summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
  }

  .qa-item summary span {
    grid-column: 1 / -1;
  }

  .qa-answer {
    padding-left: 22px;
  }

  .alumni-period .section-heading {
    align-items: flex-start;
  }

  .alumni-card-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    margin-bottom: 8px;
  }

  .alumni-card-head > span,
  .alumni-seasons {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    white-space: normal;
    overflow: visible;
  }

  .alumni-role {
    display: block;
    margin: 2px 0 0;
  }

  .alumni-experience {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
  }

  .alumni-logo-square {
    width: 52px;
    height: 52px;
  }

  .alumni-experience small {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 700px) {
  .resource-tabs {
    grid-template-columns: 1fr;
  }

  .resource-tabs button {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .resource-tabs button:last-child {
    border-bottom: 0;
  }

  .resource-file-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .resource-file-card em {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .training-library-grid,
  .legacy-grid {
    grid-template-columns: 1fr;
  }

  .training-card {
    min-height: 230px;
  }

  .group-letter-dialog {
    padding: 10px;
  }

  .group-letter-shell {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 26px 18px 30px;
  }

  .group-letter-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }

  .group-letter-header {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-right: 42px;
  }

  .group-letter-header img {
    width: 64px;
    height: 64px;
  }

  .group-letter-lesson-head {
    grid-template-columns: 1fr;
  }

  .hall-tabs {
    width: min(256px, 100%);
  }

  .hall-tabs button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  .training-document-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .training-markdown {
    padding: 28px 18px 36px;
  }

  .training-pdf-frame {
    min-height: 420px;
  }

  .qa-chip-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qa-item summary {
    padding: 16px;
  }

  .qa-answer {
    padding: 0 16px 20px;
  }

  .alumni-period .section-heading {
    display: block;
  }

  .alumni-period .section-heading p {
    margin-top: 8px;
    padding-bottom: 0;
  }

  .alumni-card {
    padding: 10px 12px 8px;
  }

  .alumni-experience strong {
    white-space: normal;
  }
}

.resource-detail-list {
  display: grid;
  gap: 0;
}

.resource-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 56px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

.resource-detail:first-child {
  padding-top: 0;
}

.resource-detail:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.resource-detail > div {
  min-width: 0;
}

.resource-detail h2 {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
}

.resource-detail p {
  max-width: 720px;
}

.plain-list {
  margin: 22px 0 0;
  padding-left: 1.2em;
  color: var(--muted);
}

.plain-list li + li {
  margin-top: 8px;
}

.resource-detail .inline-link {
  margin-top: 22px;
}

.resource-detail-figure {
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.resource-detail-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 920px) {
  .resource-detail {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0;
  }

  .resource-detail-figure {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px) {
  .resource-detail {
    padding: 34px 0;
  }

  .resource-detail h2 {
    font-size: 25px;
  }
}

/* Training and construction project archive */
.project-library {
  margin-top: 44px;
}

.project-library-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(560px, 1fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 28px;
}

.project-library-heading h2 {
  margin: 0;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.25;
}

.project-filter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.project-filter button {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
}

.project-filter button:last-child {
  border-right: 0;
}

.project-filter button:hover,
.project-filter button:focus-visible,
.project-filter button.is-active {
  color: #111;
  background: var(--accent);
  outline: none;
}

.project-accordion-list {
  display: grid;
  gap: 18px;
}

.project-group-heading {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}

.project-group-heading[hidden],
.project-accordion[hidden] {
  display: none;
}

.project-group-heading h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
}

.project-group-heading h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 10px;
  background: var(--accent);
}

.project-group-heading p {
  max-width: 760px;
}

.project-accordion {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.project-accordion summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 92px;
  padding: 22px 68px 22px 26px;
  cursor: pointer;
  list-style: none;
}

.project-accordion summary::-webkit-details-marker {
  display: none;
}

.project-accordion summary::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 160ms ease;
}

.project-accordion[open] summary::after {
  transform: translateY(-35%) rotate(225deg);
}

.project-summary-number {
  flex: 0 0 auto;
  align-self: flex-start;
  padding-top: 8px;
  color: var(--accent);
  font-family: "Lora", serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}

.project-summary-title {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 6px;
}

.project-summary-title strong {
  color: var(--text);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
}

.project-summary-title em {
  color: var(--accent);
  font-family: "Lora", serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-accordion summary small {
  display: block;
  max-width: 780px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.project-carousel-shell {
  position: relative;
  min-width: 0;
}

.project-carousel-shell:not(.is-ready) .project-carousel-button {
  opacity: 0;
  pointer-events: none;
}

.project-carousel {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-auto-columns: minmax(236px, 300px);
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0 62px 24px;
  scroll-padding-inline: 62px;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.project-carousel::-webkit-scrollbar {
  display: none;
}

.project-carousel-button {
  position: absolute;
  top: calc(50% - 12px);
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.project-carousel-button::before {
  content: "";
  width: 11px;
  height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.project-carousel-button:hover {
  border-color: var(--accent);
}

.project-carousel-button:disabled {
  opacity: 0.28;
  cursor: default;
}

.project-carousel-prev {
  left: 18px;
}

.project-carousel-prev::before {
  transform: translateX(2px) rotate(135deg);
}

.project-carousel-next {
  right: 18px;
}

.project-carousel-next::before {
  transform: translateX(-2px) rotate(-45deg);
}

.project-card {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 158px minmax(188px, 1fr);
  min-height: 362px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.project-card-media {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  color: var(--subtle);
  font-size: 14px;
}

.project-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-media img + span {
  display: none;
}

.project-card-body {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 16px 42px;
}

.project-card-meta {
  color: var(--accent);
  font-family: "Lora", serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.project-card p {
  font-size: 13px;
  line-height: 1.55;
}

.project-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.person-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.badge-lead {
  border-color: #d4a734;
  background: #fff4cd;
  color: #7a5600;
}

.badge-member {
  border-color: #b9c0c7;
  background: #f2f4f6;
  color: #4d5963;
}

.badge-trainee {
  border-color: #c0834e;
  background: #f8e6d4;
  color: #7c4316;
}

:root[data-theme="dark"] .badge-lead {
  border-color: rgba(255, 211, 92, 0.48);
  background: rgba(255, 207, 76, 0.16);
  color: #ffd36f;
}

:root[data-theme="dark"] .badge-member {
  border-color: rgba(211, 219, 228, 0.34);
  background: rgba(210, 220, 230, 0.12);
  color: #d6dee7;
}

:root[data-theme="dark"] .badge-trainee {
  border-color: rgba(224, 148, 84, 0.42);
  background: rgba(218, 128, 58, 0.15);
  color: #eda56c;
}

.project-card-year {
  position: absolute;
  right: 16px;
  bottom: 14px;
  color: var(--subtle);
  font-family: "Lora", serif;
  font-size: 13px;
}

.project-empty-state {
  min-height: 210px;
  padding: 36px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.project-empty-state[hidden] {
  display: none;
}

.project-empty-state > i {
  color: var(--accent);
  font-size: 34px;
}

.project-empty-state strong,
.project-empty-state span {
  display: block;
}

.project-empty-state strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 500;
}

.project-empty-state span {
  margin-top: 4px;
  color: var(--muted);
}

@media (max-width: 960px) {
  .project-library-heading {
    grid-template-columns: 1fr;
  }

  .project-filter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .project-filter button:nth-child(4) {
    border-right: 0;
  }

  .project-filter button:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .project-library {
    margin-top: 36px;
  }

  .project-library-heading h2 {
    font-size: 30px;
  }

  .project-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-filter button,
  .project-filter button:nth-child(4) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .project-filter button:nth-child(even),
  .project-filter button:last-child {
    border-right: 0;
  }

  .project-filter button:last-child {
    border-bottom: 0;
  }

  .project-accordion summary {
    gap: 14px;
    min-height: 84px;
    padding: 18px 48px 18px 16px;
  }

  .project-accordion summary::after {
    right: 20px;
  }

  .project-summary-title {
    display: grid;
    gap: 2px;
  }

  .project-summary-title strong {
    font-size: 21px;
  }

  .project-summary-number {
    padding-top: 6px;
  }

  .project-carousel {
    grid-auto-columns: minmax(224px, 82vw);
    padding: 0 18px 20px;
    scroll-padding-inline: 18px;
  }

  .project-carousel-button {
    display: none;
  }

  .project-card {
    grid-template-rows: 150px minmax(184px, 1fr);
  }

  .project-empty-state {
    min-height: 170px;
    padding: 24px;
  }
}

/* Archive primary navigation */
.archive-page-hero {
  grid-template-columns: minmax(290px, 0.8fr) minmax(300px, 1fr) max-content;
  align-items: end;
}

.archive-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 356px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.archive-tabs a {
  min-height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  border-right: 1px solid var(--line);
}

.archive-tabs a:last-child {
  border-right: 0;
}

.archive-tabs a:hover,
.archive-tabs a:focus-visible,
.archive-tabs a.is-active {
  color: #111;
  background: var(--accent);
  outline: none;
}

.project-card[hidden] {
  display: none;
}

.project-carousel-shell.is-empty .project-carousel,
.project-carousel-shell.is-empty .project-carousel-button {
  display: none;
}

.project-category-empty {
  min-height: 148px;
  padding: 28px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: var(--muted);
  border-top: 1px solid var(--soft-line);
}

.project-category-empty[hidden] {
  display: none;
}

.project-category-empty i {
  color: var(--accent);
  font-size: 26px;
}

.project-category-empty p {
  color: var(--muted);
}

.archive-empty-state {
  min-height: 230px;
  margin-top: 28px;
  padding: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.archive-empty-state > i {
  color: var(--accent);
  font-size: 36px;
}

.archive-empty-state strong,
.archive-empty-state span {
  display: block;
}

.archive-empty-state strong {
  color: var(--text);
  font-size: 23px;
  font-weight: 500;
}

.archive-empty-state span {
  margin-top: 5px;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .archive-page-hero {
    grid-template-columns: minmax(260px, 0.8fr) minmax(260px, 1fr);
  }

  .archive-tabs {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .archive-page-hero {
    grid-template-columns: 1fr;
  }

  .archive-tabs {
    grid-column: 1;
    width: min(100%, 356px);
  }
}

@media (max-width: 460px) {
  .archive-tabs {
    width: 100%;
  }

  .archive-tabs a {
    padding: 0 7px;
    font-size: 12px;
  }

  .archive-tabs a i {
    display: none;
  }

  .archive-empty-state {
    min-height: 180px;
    padding: 24px;
  }
}

/* Upcoming team events */
.event-preview {
  margin-top: 44px;
}

.event-preview-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(560px, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.event-preview-heading > .inline-link {
  margin-bottom: 8px;
  white-space: nowrap;
}

.event-preview-heading h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.25;
}

.event-preview-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.event-preview-filters button {
  min-width: 106px;
  min-height: 42px;
  padding: 0 14px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
}

.event-preview-filters button:last-child {
  border-right: 0;
}

.event-preview-filters button:hover,
.event-preview-filters button:focus-visible,
.event-preview-filters button.is-active {
  color: #111;
  background: var(--accent);
  outline: none;
}

.event-preview-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.event-preview-card {
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  min-height: 188px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--event-tone);
  background: var(--card-bg);
}

.event-preview-date {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--soft-line);
}

.event-preview-date span {
  color: var(--text);
  font-size: 18px;
  line-height: 1.55;
}

.event-preview-date em {
  width: fit-content;
  color: var(--event-tone);
  font-size: 12px;
  font-style: normal;
}

.event-preview-copy {
  padding: 26px 30px;
}

.event-preview-copy .page-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--event-tone);
}

.event-preview-copy h2 {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.35;
}

.event-preview-copy small {
  display: block;
  margin-top: 14px;
  color: var(--subtle);
}

.event-preview-subevents {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.event-preview-subevent {
  min-height: 48px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-left: 2px solid var(--event-tone);
  background: var(--surface);
}

.event-preview-subevent span,
.event-preview-subevent strong,
.event-preview-subevent em {
  min-width: 0;
}

.event-preview-subevent strong,
.event-preview-subevent em {
  display: inline;
}

.event-preview-subevent strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.event-preview-subevent em {
  margin-left: 9px;
  color: var(--event-tone);
  font-size: 11px;
  font-style: normal;
}

.event-preview-subevent small {
  margin: 0;
  white-space: nowrap;
}

.season-detail-subevents {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.season-detail-subevents > p {
  color: var(--subtle);
  font-size: 12px;
}

.season-detail-subevent {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-left: 2px solid var(--event-color);
  background: var(--surface);
}

.season-detail-subevent strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.season-detail-subevent em {
  margin-left: 8px;
  color: var(--event-color);
  font-size: 10px;
  font-style: normal;
}

.season-detail-subevent small {
  color: var(--subtle);
  font-size: 11px;
  white-space: nowrap;
}

.event-preview-empty {
  min-height: 190px;
  margin-top: 22px;
  padding: 32px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.event-preview-empty[hidden] {
  display: none;
}

.event-preview-empty > i {
  color: var(--accent);
  font-size: 34px;
}

.event-preview-empty strong,
.event-preview-empty span {
  display: block;
}

.event-preview-empty strong {
  color: var(--text);
  font-size: 21px;
  font-weight: 500;
}

.event-preview-empty span {
  margin-top: 4px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .event-preview-heading {
    grid-template-columns: 1fr;
  }

  .event-preview-heading > .inline-link {
    margin-bottom: 0;
  }

  .event-preview-filters {
    max-width: 720px;
  }
}

@media (max-width: 720px) {

  .event-preview-filters {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-preview-filters button {
    min-width: 0;
    border-bottom: 1px solid var(--line);
  }

  .event-preview-filters button:nth-child(even) {
    border-right: 0;
  }

  .event-preview-filters button:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .event-preview-filters button:last-child {
    border-right: 0;
    border-bottom: 0;
  }

  .event-preview-card {
    grid-template-columns: 1fr;
  }

  .event-preview-date {
    min-height: 96px;
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid var(--soft-line);
  }

  .event-preview-copy {
    padding: 22px 20px;
  }

  .event-preview-subevent,
  .season-detail-subevent {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}