:root {
  --red: #c8102e;
  --red-dark: #8b0a1f;
  --ink: #111113;
  --ink-2: #1c1c1e;
  --slate: #565a61;
  --muted: #8d8f94;
  --line: #dddfe3;
  --paper: #fff;
  --surface: #f1f2f4;
  --surface-2: #e8e9eb;
  --shell: 88rem;
  --pill: 999px;
  --card: 2rem;
  --card-sm: 1.25rem;
  --control: 0.875rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Sans TC', 'Onest', sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  list-style: none;
}

svg {
  display: block;
}

.en {
  font-family: 'Onest', 'Noto Sans TC', sans-serif;
}

.shell {
  width: min(calc(100% - 2.5rem), var(--shell));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.skip {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 200;
  transform: translateY(-180%);
  background: #fff;
  color: #111;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px #0002;
  transition: 0.25s;
}

.skip:focus {
  transform: none;
}

@media (max-width: 1920px) {
  html {
    font-size: 0.833333vw;
  }
}

@media (max-width: 1440px) {
  html {
    font-size: 1.111111vw;
  }
}

@media (max-width: 1024px) {
  html {
    font-size: 1.5625vw;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 4.444444vw;
  }
}

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: #0c0c0e;
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: 0 0 2rem 2rem;
  transition: transform 0.8s var(--spring);
  overflow: hidden;
}

.loader::before {
  content: "";
  position: absolute;
  width: 44rem;
  height: 44rem;
  border: 1px solid #fff1;
  border-radius: 50%;
  box-shadow: 0 0 0 9rem #fff008, 0 0 0 18rem #fff005;
}

.loader.exit {
  transform: translateY(-101%);
}

.loader-center {
  position: relative;
  width: min(22rem, 72vw);
  text-align: center;
  transition: 0.45s ease;
}

.loader.exit .loader-center {
  opacity: 0;
  transform: translateY(-1rem);
}

.loader-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Onest';
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.sunmark {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--red);
  display: grid;
  place-items: center;
}

.sunmark::before,
.sunmark::after {
  content: "";
  position: absolute;
  inset: 0.3rem;
  background: currentColor;
  transform: rotate(45deg);
}

.sunmark::after {
  transform: rotate(0);
  opacity: 0.68;
}

.loader-copy {
  margin-top: 1rem;
  color: #ffffff80;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.loader-track {
  height: 1px;
  background: #ffffff25;
  margin-top: 2.5rem;
}

.loader-fill {
  height: 100%;
  width: 0;
  background: var(--red);
}

.loader-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  color: #ffffff70;
  font: 500 0.7rem/1 'Onest';
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loader-count {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Header */
.header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  color: #fff;
  opacity: 0;
  transform: translateY(-1rem);
  transition: 0.8s var(--spring);
}

body.ready .header {
  opacity: 1;
  transform: none;
}

.header-inner {
  height: 6.3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  font-family: 'Onest';
  font-weight: 700;
  letter-spacing: 0.06em;
  justify-self: start;
}

.brand:hover .sunmark {
  transform: rotate(45deg);
  transition: 0.5s var(--spring);
}

.brand small {
  display: block;
  font: 500 0.54rem/1.2 'Noto Sans TC';
  letter-spacing: 0.24em;
  color: #ffffff8a;
  margin-top: 0.2rem;
}

.desktop-nav ul {
  display: flex;
  gap: 2rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.desktop-nav button, .desktop-nav a {
  color: #ffffffb8;
  transition: 0.25s;
}

.desktop-nav button:hover, .desktop-nav a:hover {
  color: #fff;
  transform: translateY(-2px);
}

.header-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.glass-chip {
  height: 2.7rem;
  padding: 0 1rem;
  border: 1px solid #ffffff27;
  background: #ffffff12;
  color: #fff;
  border-radius: var(--control);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 500 0.68rem/1 'Onest';
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: 0.3s;
}

.glass-chip:hover {
  background: #ffffff21;
}

.clock-label {
  color: #ffffff65;
}

.clock {
  min-width: 4.2rem;
  font-variant-numeric: tabular-nums;
}

.menu-lines {
  width: 0.9rem;
  display: grid;
  gap: 3px;
}

.menu-lines i {
  height: 1px;
  background: currentColor;
  display: block;
}

/* Shared Components */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--red);
  font: 700 0.66rem/1 'Onest';
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.display {
  font-size: clamp(3.4rem, 6.6rem, 7.2rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
  font-weight: 500;
}

.section-title {
  font-size: clamp(2.5rem, 4.6rem, 5rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 500;
}

.body-copy {
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.9;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3.35rem;
  border-radius: var(--pill);
  padding: 0 1.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: 0.35s var(--spring);
}

.btn svg {
  width: 1rem;
}

.btn-red {
  background: var(--red);
  color: #fff;
}

.btn-red:hover {
  background: var(--red-dark);
  transform: translateY(-3px);
}

.btn-light {
  background: #fff;
  color: #111;
}

.btn-light:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px #0003;
}

.btn-outline {
  border: 1px solid #ffffff55;
  color: #fff;
}

.btn-outline:hover {
  background: #fff;
  color: #111;
}

.btn-ink {
  background: var(--ink);
  color: #fff;
}

.btn-ink:hover {
  background: var(--red);
  transform: translateY(-3px);
}

.arrow {
  transition: transform 0.3s var(--spring);
}

.btn:hover .arrow,
.text-link:hover .arrow {
  transform: translateX(0.25rem);
}

.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] {
  transition-delay: 0.1s;
}

.reveal[data-delay="2"] {
  transition-delay: 0.2s;
}

.reveal[data-delay="3"] {
  transition-delay: 0.3s;
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 64rem;
  height: 100svh;
  max-height: 70rem;
  color: #fff;
  background: #0e0e11;
  overflow: hidden;
  border-radius: 0 0 var(--card) var(--card);
  isolation: isolate;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #09090bd9 0%, #0a0a0aa8 44%, #08080828 74%),
              linear-gradient(0deg, #09090cf2 0%, transparent 42%);
}

.hero::before {
  content: "JINYANG";
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  transform: translateX(-50%);
  font: 700 14.5rem/0.75 'Onest';
  letter-spacing: -0.08em;
  color: #ffffff08;
  white-space: nowrap;
  z-index: 0;
}

.hero-inner {
  height: 100%;
  padding-top: 9.5rem;
  padding-bottom: 3rem;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 0.7fr);
  gap: 4rem;
  align-items: end;
  padding-bottom: 4.2rem;
}

.hero-copy {
  max-width: 61rem;
}

.hero .eyebrow {
  color: #fff;
  margin-bottom: 1.4rem;
}

.hero .eyebrow::before {
  background: var(--red);
}

.line-clip {
  display: block;
  overflow: hidden;
  padding-bottom: 0.07em;
}

.line-inner {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  transition: 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

body.ready .line-inner {
  transform: none;
  opacity: 1;
}

body.ready .line-clip:nth-child(2) .line-inner {
  transition-delay: 0.12s;
}

body.ready .line-clip:nth-child(3) .line-inner {
  transition-delay: 0.24s;
}

.hero-title em {
  color: #ff3658;
  font-style: normal;
}

.hero-desc {
  max-width: 37rem;
  margin-top: 1.6rem;
  color: #ffffffa8;
  line-height: 1.85;
  font-size: 0.94rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: 0.8s var(--ease) 0.42s;
}

body.ready .hero-desc {
  opacity: 1;
  transform: none;
}

.hero-actions {
  display: flex;
  gap: 0.7rem;
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: 0.8s var(--ease) 0.52s;
}

body.ready .hero-actions {
  opacity: 1;
  transform: none;
}

.network-card {
  align-self: end;
  justify-self: end;
  width: 22rem;
  border: 1px solid #ffffff25;
  background: #ffffff0f;
  backdrop-filter: blur(18px);
  border-radius: 1.5rem;
  padding: 1.4rem;
  opacity: 0;
  transform: translateY(2rem) rotate(2deg);
  transition: 1s var(--spring) 0.55s;
}

body.ready .network-card {
  opacity: 1;
  transform: none;
}

.network-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 0.68rem/1 'Onest';
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff78;
}

.live-dot {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

.live-dot::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #3ee48f;
  box-shadow: 0 0 0 0.25rem #3ee48f22;
  animation: pulse 2s infinite;
}

.mini-network {
  height: 14rem;
  position: relative;
  margin-top: 0.7rem;
}

.node {
  position: absolute;
  border: 1px solid #ffffff2c;
  background: #0b0b0dc9;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.58rem;
  color: #ffffffa3;
  transition: 0.35s var(--spring);
}

.node:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: scale(1.12);
}

.node.center {
  left: 50%;
  top: 50%;
  width: 5rem;
  height: 5rem;
  transform: translate(-50%, -50%);
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 0.68rem;
}

.node.center:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.node.n1 {
  width: 3.8rem;
  height: 3.8rem;
  left: 3%;
  top: 8%;
}

.node.n2 {
  width: 4.1rem;
  height: 4.1rem;
  right: 3%;
  top: 7%;
}

.node.n3 {
  width: 3.65rem;
  height: 3.65rem;
  left: 6%;
  bottom: 4%;
}

.node.n4 {
  width: 4rem;
  height: 4rem;
  right: 4%;
  bottom: 2%;
}

.wire {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff4d, transparent);
  transform-origin: left center;
  left: 50%;
  top: 50%;
  width: 8rem;
}

.w1 { transform: rotate(-145deg); }
.w2 { transform: rotate(-35deg); }
.w3 { transform: rotate(145deg); }
.w4 { transform: rotate(35deg); }

.hero-foot {
  border-top: 1px solid #ffffff1f;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding-top: 1.3rem;
  position: relative;
  z-index: 1;
}

.hero-stats {
  display: flex;
  gap: 4rem;
}

.hero-stat strong {
  display: block;
  font: 600 2rem/1 'Onest';
  letter-spacing: -0.05em;
}

.hero-stat span {
  display: block;
  margin-top: 0.45rem;
  font: 500 0.6rem/1 'Onest';
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff6d;
}

.scroll-note {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  color: #ffffff65;
  font: 500 0.62rem/1 'Onest';
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scroll-note i {
  display: block;
  width: 3rem;
  height: 1px;
  background: #ffffff4a;
  overflow: hidden;
}

.scroll-note i::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  background: #fff;
  animation: scan 1.8s infinite;
}

@keyframes scan {
  from { transform: translateX(-120%); }
  to { transform: translateX(230%); }
}

@keyframes pulse {
  50% { box-shadow: 0 0 0 0.5rem #3ee48f00; }
}

/* Partners Marquee Strip */
.partner-strip {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.partner-label {
  text-align: center;
  color: var(--muted);
  font: 600 0.62rem/1 'Onest';
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

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

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

.logo-row {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  padding-right: 4.5rem;
}

.partner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #35363a;
  font: 600 0.85rem/1 'Onest';
  white-space: nowrap;
}

.partner-badge {
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid #c7c9cd;
  border-radius: 0.45rem;
  display: grid;
  place-items: center;
  color: var(--red);
  font-size: 0.7rem;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* About Section */
.about {
  padding: 9rem 0 8rem;
}

.about-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 8rem;
}

.about .eyebrow {
  margin-top: 0.65rem;
}

.about-statement {
  font-size: clamp(2.3rem, 3.65rem, 4rem);
  line-height: 1.25;
  letter-spacing: -0.045em;
  font-weight: 500;
  max-width: 22ch;
}

.about-statement .muted {
  color: #a1a3a8;
}

.about-meta {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 1rem;
}

.quote-mark {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 1.3rem Georgia;
}

.text-link {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid #bbb;
  padding-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Value Band */
.value-band {
  padding: 2rem 0 9rem;
}

.pills {
  display: grid;
  grid-template-columns: 1.05fr 1fr 0.42fr 1.55fr;
  gap: 0.75rem;
}

.pill {
  min-height: 8.3rem;
  border-radius: var(--pill);
  display: grid;
  place-items: center;
  padding: 0 2rem;
  background: var(--surface);
  font: 500 3.25rem/1 'Onest';
  letter-spacing: -0.06em;
}

.pill.red {
  background: var(--red);
  color: #fff;
}

.pill.ink {
  background: var(--ink);
  color: #fff;
}

.pill.arrow-pill svg {
  width: 2.6rem;
  animation: nudge 2s ease-in-out infinite;
}

@keyframes nudge {
  50% { transform: translateX(0.6rem); }
}

/* Weekly Presentation Hub */
.weekly {
  padding: 9rem 0;
  background: var(--surface);
  border-radius: var(--card);
}

.weekly-head {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 5rem;
  align-items: end;
}

.weekly-head .eyebrow {
  margin-bottom: 1.3rem;
}

.weekly-intro {
  justify-self: end;
  max-width: 34rem;
  color: var(--slate);
  line-height: 1.9;
}

.weekly-feature {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  min-height: 35rem;
  background: var(--ink);
  color: #fff;
  border-radius: 1.8rem;
  overflow: hidden;
}

.weekly-art {
  position: relative;
  min-height: 35rem;
  overflow: hidden;
  background: radial-gradient(circle at 65% 38%, #df2142 0 6%, transparent 6.4%),
              radial-gradient(circle at 65% 38%, transparent 0 17%, #c8102e 17.3% 17.6%, transparent 18%),
              linear-gradient(135deg, #2a0d14, #0b0b0d 70%);
}

.weekly-art::before,
.weekly-art::after {
  content: "";
  position: absolute;
  border: 1px solid #ffffff25;
  border-radius: 50%;
  width: 28rem;
  height: 28rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6rem #ffffff08, 0 0 0 12rem #ffffff05;
}

.weekly-art::after {
  width: 1px;
  height: 140%;
  border: 0;
  background: #ffffff25;
  box-shadow: -9rem 0 #ffffff12, 9rem 0 #ffffff12;
  transform: translate(-50%, -50%) rotate(32deg);
}

.weekly-date {
  position: absolute;
  left: 2rem;
  top: 2rem;
  font: 600 0.68rem/1 'Onest';
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ffffff8a;
}

.weekly-number {
  position: absolute;
  left: 2rem;
  bottom: 1rem;
  font: 600 11rem/0.8 'Onest';
  letter-spacing: -0.09em;
  color: #ffffff0b;
}

.weekly-art-label {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 11rem;
  font-size: 0.72rem;
  line-height: 1.65;
  color: #ffffff8a;
}

.weekly-copy {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.weekly-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  border: 1px solid #ffffff25;
  border-radius: var(--pill);
  padding: 0.55rem 0.8rem;
  font: 600 0.61rem/1 'Onest';
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.weekly-badge::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0.25rem #c8102e25;
}

.weekly-copy h3 {
  font-size: 3.1rem;
  line-height: 1.08;
  letter-spacing: -0.055em;
  font-weight: 500;
  margin-top: 2rem;
}

.weekly-copy p {
  color: #ffffff78;
  line-height: 1.8;
  font-size: 0.84rem;
  margin-top: 1.2rem;
}

.speaker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
}

.speaker-avatar {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #ef6077, #771126);
  border: 1px solid #ffffff22;
  background-size: cover;
  background-position: center;
}

.speaker strong {
  display: block;
  font-size: 0.76rem;
}

.speaker span {
  display: block;
  color: #ffffff58;
  font-size: 0.64rem;
  margin-top: 0.18rem;
}

.weekly-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 2rem;
}

.archive-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.talk-card {
  border: 1px solid #d4d6da;
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.3rem;
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 0.35s var(--spring);
  text-align: left;
}

.talk-card:hover {
  transform: translateY(-0.35rem);
  border-color: #b8bbc0;
  box-shadow: 0 1rem 2rem #1c1c1e0b;
}

.talk-card time {
  font: 600 0.6rem/1 'Onest';
  color: var(--red);
  letter-spacing: 0.1em;
}

.talk-card h4 {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 1.2rem;
}

.talk-card span {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 1rem;
}

/* Directory & Carousel */
.directory {
  background: var(--ink);
  color: #fff;
  border-radius: var(--card);
  padding: 8rem 0;
  overflow: hidden;
}

.directory-head {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem;
  align-items: end;
}

.directory .eyebrow {
  margin-bottom: 1.3rem;
}

.directory-intro {
  justify-self: end;
  max-width: 32rem;
  color: #ffffff8d;
  line-height: 1.8;
}

.directory-controls {
  margin: 3.5rem 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.filter-btn {
  border: 1px solid #ffffff28;
  border-radius: var(--pill);
  padding: 0.65rem 1rem;
  color: #ffffff94;
  font-size: 0.72rem;
  transition: 0.25s;
}

.filter-btn:hover,
.filter-btn.active {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.search-box {
  border: 1px solid #ffffff28;
  border-radius: var(--pill);
  height: 2.55rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.6rem;
  color: #ffffff72;
}

.search-box input {
  width: 10rem;
  background: none;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 0.72rem;
}

.search-box input::placeholder {
  color: #ffffff5b;
}

.member-carousel {
  position: relative;
}

.member-viewport {
  overflow: visible;
  touch-action: pan-y;
  cursor: grab;
}

.member-viewport.dragging {
  cursor: grabbing;
}

.member-track {
  position: relative;
  display: flex;
  gap: 1rem;
  will-change: transform;
  transition: transform 0.75s var(--spring);
}

.member-card {
  position: relative;
  flex: 0 0 min(62rem, 76vw);
  min-height: 32rem;
  border-radius: 1.6rem;
  overflow: hidden;
  padding: 1.8rem;
  background: #202126;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  transition: opacity 0.5s, transform 0.6s var(--spring);
  opacity: 0.42;
  transform: scale(0.92);
}

.member-card.active {
  opacity: 1;
  transform: scale(1);
}

.member-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at var(--x, 75%) var(--y, 25%), var(--tone, #c8102e) 0%, transparent 22%),
              linear-gradient(135deg, #2f3137, #0b0b0d 68%);
}

.member-card::after {
  content: "";
  position: absolute;
  width: 28rem;
  height: 28rem;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  right: -3rem;
  top: -4rem;
  box-shadow: 0 0 0 6rem #ffffff08, 0 0 0 12rem #ffffff05;
  z-index: -1;
  transition: 0.7s var(--spring);
}

.member-card.active::after {
  transform: scale(1.08) translate(-1rem, 1rem);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag {
  font: 600 0.62rem/1 'Onest';
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ffffff78;
}

.profile-arrow {
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid #ffffff36;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.3s;
}

.profile-arrow svg {
  width: 1rem;
}

.member-card.active .profile-arrow {
  background: var(--red);
  border-color: var(--red);
}

.avatar-art {
  position: absolute;
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  right: 12%;
  top: 15%;
  background: linear-gradient(145deg, #ffffff2b, #ffffff06);
  border: 1px solid #ffffff26;
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
}

.avatar-art::before {
  content: "";
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: #ffffff24;
  box-shadow: 0 5.2rem 0 2.7rem #ffffff1c;
}

.avatar-art.has-avatar::before {
  display: none;
}

.member-info {
  position: relative;
  z-index: 2;
  max-width: 55%;
}

.member-info h3 {
  font-size: 3rem;
  letter-spacing: -0.05em;
  font-weight: 500;
}

.member-info p {
  color: #ffffff86;
  margin-top: 0.7rem;
  line-height: 1.7;
  font-size: 0.88rem;
}

.member-info .path {
  display: block;
  margin-top: 1rem;
  color: #ffffff48;
  font: 500 0.62rem/1 'Onest';
}

.member-index {
  position: absolute;
  right: 1.8rem;
  bottom: 1.4rem;
  font: 500 5rem/1 'Onest';
  letter-spacing: -0.08em;
  color: #ffffff09;
}

.member-card[hidden] {
  display: none;
}

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.4rem;
}

.carousel-progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #ffffff65;
  font: 600 0.62rem/1 'Onest';
  letter-spacing: 0.09em;
}

.progress-line {
  width: 12rem;
  height: 1px;
  background: #ffffff20;
  position: relative;
  overflow: hidden;
}

.progress-line i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--red);
  width: 25%;
  transition: width 0.5s var(--spring);
}

.carousel-buttons {
  display: flex;
  gap: 0.55rem;
}

.carousel-btn {
  width: 3rem;
  height: 3rem;
  border: 1px solid #ffffff2d;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.3s;
}

.carousel-btn:hover {
  background: #fff;
  color: #111;
}

.carousel-btn svg {
  width: 1rem;
}

.carousel-empty {
  display: none;
  border: 1px solid #ffffff20;
  border-radius: 1.2rem;
  padding: 3rem;
  text-align: center;
  color: #ffffff75;
}

.carousel-empty.show {
  display: block;
}

.directory-note {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff62;
  font-size: 0.72rem;
}

.directory-note strong {
  color: #fff;
}

/* Case Studies / Success Stories */
.cases {
  padding: 9rem 0;
}

.section-head {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4rem;
}

.section-head .eyebrow {
  margin-bottom: 1.3rem;
}

.section-side {
  color: var(--slate);
  line-height: 1.85;
  max-width: 30rem;
  justify-self: end;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.case {
  min-height: 27rem;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  transition: 0.4s var(--spring);
}

.case:hover {
  background: var(--surface);
  transform: translateY(-0.35rem);
}

.case-visual {
  height: 13rem;
  border-radius: 1rem;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.case-visual::before {
  content: "";
  position: absolute;
  width: 11rem;
  height: 11rem;
  border: 2.5rem solid var(--red);
  border-radius: 50%;
  right: -2rem;
  top: -3rem;
  opacity: 0.9;
}

.case.style-2 .case-visual::before,
.case:nth-child(2) .case-visual::before {
  border-radius: 1rem;
  transform: rotate(26deg);
  right: 1rem;
}

.case.style-3 .case-visual::before,
.case:nth-child(3) .case-visual::before {
  width: 3rem;
  height: 16rem;
  border: 0;
  background: var(--red);
  right: 5rem;
  top: -1rem;
  transform: rotate(37deg);
}

.case.style-4 .case-visual::before,
.case:nth-child(4) .case-visual::before {
  width: 13rem;
  height: 13rem;
  border-width: 1px;
  box-shadow: 0 0 0 2rem #c8102e, 0 0 0 4rem #c8102e24;
}

.case-no {
  font: 600 0.65rem/1 'Onest';
  color: var(--muted);
  letter-spacing: 0.1em;
}

.case h3 {
  font-size: 1.3rem;
  line-height: 1.45;
  font-weight: 600;
  margin-top: 2rem;
}

.case p {
  font-size: 0.78rem;
  color: var(--slate);
  margin-top: 0.7rem;
  line-height: 1.7;
}

.case-result {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 1.5rem;
}

.case-result strong {
  font: 600 1.75rem/1 'Onest';
  letter-spacing: -0.04em;
  color: var(--red);
}

.case-result span {
  font-size: 0.65rem;
  color: var(--muted);
}

/* Services */
.services {
  padding: 0 0 9rem;
}

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

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: 0.16fr 0.44fr 0.4fr;
  gap: 2rem;
  align-items: center;
  padding: 2.5rem 1rem;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: 0.35s;
}

.service-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: translateY(102%);
  transition: 0.45s var(--ease);
  z-index: -1;
}

.service-row:hover {
  color: #fff;
  padding-inline: 1.8rem;
}

.service-row:hover::before {
  transform: none;
}

.service-row:hover p,
.service-row:hover .service-no {
  color: #ffffffa6;
}

.service-no {
  font: 500 0.72rem/1 'Onest';
  color: var(--muted);
}

.service-row h3 {
  font-size: 2.2rem;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.service-row p {
  color: var(--slate);
  font-size: 0.84rem;
  line-height: 1.75;
  max-width: 34rem;
}

.service-icon {
  justify-self: end;
  width: 3rem;
  height: 3rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.service-icon svg {
  width: 1rem;
}

/* Process / Join */
.join {
  background: var(--surface);
  border-radius: var(--card);
  padding: 8rem 0;
}

.join-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 7rem;
}

.join-copy {
  position: sticky;
  top: 3rem;
  align-self: start;
}

.join-copy .eyebrow {
  margin-bottom: 1.3rem;
}

.join-copy p {
  margin-top: 1.5rem;
  max-width: 32rem;
}

.steps {
  counter-reset: steps;
}

.step {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid #cfd1d5;
}

.step:last-child {
  border-bottom: 1px solid #cfd1d5;
}

.step-no {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font: 600 0.72rem/1 'Onest';
}

.step h3 {
  font-size: 1.45rem;
  font-weight: 600;
}

.step p {
  margin-top: 0.6rem;
  color: var(--slate);
  line-height: 1.75;
  font-size: 0.84rem;
}

.meeting-card {
  margin-top: 2rem;
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.meeting-time strong {
  display: block;
  font: 600 1.2rem/1 'Onest';
}

.meeting-time span {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  color: var(--muted);
}

/* Stats */
.stats {
  padding: 1rem 0;
  background: var(--surface);
}

.stats-panel {
  background: var(--ink);
  color: #fff;
  border-radius: var(--card);
  padding: 7rem 4.5rem;
  position: relative;
  overflow: hidden;
}

.stats-panel::after {
  content: "金暘";
  position: absolute;
  right: -1rem;
  bottom: -4rem;
  font: 700 18rem/1 'Noto Sans TC';
  letter-spacing: -0.12em;
  color: #ffffff06;
}

.stats-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  align-items: end;
}

.stats-top p {
  color: #ffffff76;
  max-width: 32rem;
  line-height: 1.8;
}

.stats-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 5rem;
}

.stat {
  padding: 1rem 2rem;
  border-left: 1px solid #ffffff1e;
}

.stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.stat strong {
  display: block;
  font: 500 4.6rem/0.9 'Onest';
  letter-spacing: -0.07em;
  color: #fff;
}

.stat strong em {
  color: var(--red);
  font-style: normal;
}

.stat span {
  display: block;
  margin-top: 1rem;
  color: #ffffff65;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* Footer */
.footer {
  background: var(--ink);
  color: #fff;
  padding: 10rem 0 2rem;
  position: relative;
  overflow: hidden;
}

.footer::after {
  content: "JINYANG";
  position: absolute;
  left: 50%;
  bottom: -1.6rem;
  transform: translateX(-50%);
  font: 700 16.2rem/0.75 'Onest';
  letter-spacing: -0.08em;
  color: #ffffff05;
  white-space: nowrap;
}

.footer-cta {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: end;
  padding-bottom: 6rem;
  border-bottom: 1px solid #ffffff1c;
  position: relative;
  z-index: 1;
}

.footer-cta h2 {
  font-size: 5.5rem;
  line-height: 0.96;
  letter-spacing: -0.065em;
  font-weight: 500;
}

.footer-cta h2 span {
  color: #ffffff42;
}

.footer-action {
  justify-self: end;
  text-align: right;
}

.footer-action p {
  color: #ffffff75;
  max-width: 27rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 3rem;
  padding: 4rem 0 7rem;
}

.footer-brand p {
  color: #ffffff68;
  font-size: 0.75rem;
  line-height: 1.8;
  margin-top: 1rem;
}

.footer-col h3 {
  color: #ffffff53;
  font: 600 0.63rem/1 'Onest';
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}

.footer-col a {
  display: block;
  color: #ffffff9c;
  font-size: 0.78rem;
  margin: 0.8rem 0;
  transition: 0.25s;
}

.footer-col a:hover {
  color: #fff;
  transform: translateX(0.25rem);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-space: space-between;
  color: #ffffff45;
  font-size: 0.64rem;
}

/* Overlays & Modals */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #0b0b0d;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: 0.45s var(--ease);
  overflow: auto;
}

.overlay.open {
  visibility: visible;
  opacity: 1;
}

.nav-overlay {
  transform: translateY(-2rem);
}

.nav-overlay.open {
  transform: none;
}

.overlay-top {
  height: 6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ffffff18;
}

.close-btn {
  width: 3rem;
  height: 3rem;
  border: 1px solid #ffffff2d;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.3s;
}

.close-btn:hover {
  background: #fff;
  color: #111;
  transform: rotate(90deg);
}

.close-btn svg {
  width: 1rem;
}

.nav-content {
  min-height: calc(100svh - 6rem);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 6rem;
  align-items: center;
  padding: 4rem 0;
}

.nav-links {
  counter-reset: nav;
}

.nav-link {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  font-size: 4.8rem;
  line-height: 1.18;
  letter-spacing: -0.055em;
  color: #ffffff70;
  transition: 0.3s;
}

.nav-link::before {
  counter-increment: nav;
  content: "0" counter(nav);
  font: 600 0.62rem/1 'Onest';
  color: #ffffff36;
  letter-spacing: 0.1em;
}

.nav-link:hover {
  color: #fff;
  transform: translateX(1rem);
}

.nav-link:hover::before {
  color: var(--red);
}

.nav-side {
  border-left: 1px solid #ffffff1d;
  padding-left: 3rem;
}

.nav-side p {
  color: #ffffff5f;
  font-size: 0.72rem;
  line-height: 1.8;
}

.nav-side strong {
  display: block;
  color: #fff;
  font-size: 1.4rem;
  margin: 0.9rem 0;
}

.nav-mini {
  margin-top: 3rem;
  display: flex;
  gap: 1.5rem;
  color: #ffffff70;
  font-size: 0.72rem;
}

/* Presentation Page Overlay */
.presentation-page {
  background: #f4f4f2;
  color: var(--ink);
  transform: translateY(2rem);
}

.presentation-page.open {
  transform: none;
}

.presentation-page .overlay-top {
  border-color: #d9dade;
}

.presentation-page .brand {
  color: var(--ink);
}

.presentation-page .close-btn {
  border-color: #c9cbd0;
}

.presentation-hero {
  min-height: calc(100svh - 6rem);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: stretch;
}

.presentation-copy {
  padding: 5rem max(2.5rem, calc((100vw - 88rem) / 2));
  padding-right: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.presentation-kicker {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  color: var(--muted);
  font: 600 0.65rem/1.4 'Onest';
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.presentation-copy h2 {
  font-size: 5.7rem;
  line-height: 0.94;
  letter-spacing: -0.065em;
  font-weight: 500;
  margin: 5rem 0 2rem;
}

.presentation-copy h2 em {
  font-style: normal;
  color: var(--red);
}

.presentation-lead {
  max-width: 40rem;
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.9;
}

.presentation-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid #d2d4d7;
  padding-top: 1.5rem;
  margin-top: 4rem;
}

.presentation-meta span {
  display: block;
  color: var(--muted);
  font-size: 0.62rem;
  margin-bottom: 0.4rem;
}

.presentation-meta strong {
  font-size: 0.78rem;
}

.presentation-visual {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #ef3c59 0 7%, transparent 7.3%),
              radial-gradient(circle at 50% 42%, transparent 0 19%, #c8102e 19.2% 19.5%, transparent 19.8%),
              #101012;
  color: #fff;
}

.presentation-visual::before {
  content: "";
  position: absolute;
  inset: -15%;
  background: repeating-radial-gradient(circle at 50% 42%, transparent 0 4rem, #ffffff12 4.05rem 4.1rem);
  animation: orbitPulse 8s ease-in-out infinite;
}

.presentation-visual::after {
  content: attr(data-week);
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  font: 600 8.5rem/0.8 'Onest';
  letter-spacing: -0.08em;
  color: #ffffff0a;
  white-space: nowrap;
}

.presentation-visual-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

.presentation-visual-inner span {
  font: 600 0.63rem/1 'Onest';
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff72;
}

.presentation-visual-inner strong {
  display: block;
  font-size: 2rem;
  margin-top: 0.8rem;
}

.presentation-outline {
  background: #fff;
  padding: 8rem max(1.25rem, calc((100vw - 88rem) / 2));
}

.outline-head {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 6rem;
  margin-bottom: 4rem;
}

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

.outline-item {
  display: grid;
  grid-template-columns: 5rem 0.8fr 1.2fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.outline-item b {
  font: 600 0.68rem/1 'Onest';
  color: var(--red);
}

.outline-item h3 {
  font-size: 1.35rem;
}

.outline-item p {
  color: var(--slate);
  font-size: 0.82rem;
  line-height: 1.8;
}

.presentation-cta {
  background: var(--red);
  color: #fff;
  padding: 6rem max(1.25rem, calc((100vw - 88rem) / 2));
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 3rem;
}

.presentation-cta h3 {
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.presentation-cta p {
  max-width: 30rem;
  color: #ffffffb3;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

@keyframes orbitPulse {
  50% { transform: scale(1.08) rotate(4deg); }
}

/* Modal & Form */
.modal {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #0b0b0dda;
  backdrop-filter: blur(14px);
}

.modal-card {
  width: min(100%, 50rem);
  max-height: calc(100svh - 2rem);
  overflow: auto;
  background: #fff;
  color: #111;
  border-radius: 1.6rem;
  transform: translateY(2rem) scale(0.98);
  transition: 0.5s var(--spring);
  padding: 2rem;
}

.modal.open .modal-card {
  transform: none;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: start;
}

.modal-head .eyebrow {
  margin-bottom: 1rem;
}

.modal-head h2 {
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.modal .close-btn {
  border-color: #ddd;
}

.modal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--slate);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 0.8rem;
  padding: 0.9rem 1rem;
  outline: 0;
}

.field textarea {
  min-height: 6rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--red);
  background: #fff;
}

.form-foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.form-note {
  font-size: 0.65rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 24rem;
}

.success {
  display: none;
  text-align: center;
  padding: 4rem 1rem;
}

.success.show {
  display: block;
}

.success-badge {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 1.5rem;
  font-size: 1.5rem;
}

.success h3 {
  font-size: 2rem;
}

.success p {
  color: var(--slate);
  margin-top: 0.7rem;
}

.modal-card.submitted .modal-head,
.modal-card.submitted form {
  display: none;
}

.mobile-cta {
  display: none;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .desktop-nav { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .hero { min-height: 58rem; }
  .hero-main { grid-template-columns: 1fr 0.58fr; gap: 2rem; }
  .display { font-size: 5.6rem; }
  .hero::before { font-size: 12rem; }
  .about-grid { gap: 4rem; }
  .weekly-feature { grid-template-columns: 1fr 1fr; }
  .weekly-copy h3 { font-size: 2.4rem; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .join-grid { gap: 4rem; }
  .presentation-copy h2 { font-size: 4.5rem; }
  .footer-cta h2 { font-size: 4.6rem; }
  .footer::after { font-size: 13rem; }
}

@media (max-width: 640px) {
  .shell { width: min(calc(100% - 2.5rem), var(--shell)); }
  .clock-chip { display: none; }
  .glass-chip { padding: 0 0.85rem; }
  .menu-text { display: none; }
  .header-inner { height: 5rem; }
  .brand small { display: none; }
  .hero {
    min-height: 48rem;
    height: 100svh;
    max-height: none;
    border-radius: 0 0 1.5rem 1.5rem;
  }
  .hero-inner { padding-top: 7rem; padding-bottom: 1.5rem; }
  .hero-main { display: block; padding-bottom: 1.5rem; }
  .display { font-size: 2.6rem; line-height: 1.02; }
  .hero-desc { font-size: 0.8rem; line-height: 1.7; margin-top: 1.2rem; }
  .hero-actions { margin-top: 1.3rem; }
  .hero-actions .btn-outline { display: none; }
  .network-card { display: none; }
  .hero-foot { display: block; padding-top: 1rem; }
  .hero-stats { gap: 1.5rem; overflow-x: auto; padding-bottom: 0.3rem; }
  .hero-stat { min-width: 5rem; }
  .hero-stat strong { font-size: 1.35rem; }
  .hero-stat span { font-size: 0.45rem; }
  .scroll-note { display: none; }
  .hero::before { font-size: 5.5rem; bottom: -0.1rem; }
  .partner-strip { padding: 1.8rem 0; }
  .logo-row { gap: 2.5rem; padding-right: 2.5rem; }
  .partner { font-size: 0.72rem; }
  .weekly { padding: 5.5rem 0; border-radius: 1.5rem; }
  .weekly-head { display: block; }
  .weekly-intro { margin-top: 1.5rem; }
  .weekly-feature { display: block; min-height: 0; margin-top: 2.5rem; }
  .weekly-art { min-height: 20rem; }
  .weekly-number { font-size: 6rem; }
  .weekly-art-label { width: 9rem; right: 1.2rem; bottom: 1.2rem; }
  .weekly-copy { padding: 1.5rem; }
  .weekly-copy h3 { font-size: 2.1rem; }
  .weekly-actions { display: block; }
  .weekly-actions .btn { width: 100%; }
  .weekly-actions .btn + .btn { margin-top: 0.6rem; }
  .archive-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.8rem; }
  .talk-card { min-width: 76vw; scroll-snap-align: start; }
  .about { padding: 5.5rem 0; }
  .about-grid { display: block; }
  .about-statement { font-size: 2.15rem; margin-top: 2.5rem; }
  .about-meta { display: block; margin-top: 2.5rem; }
  .about-meta > div + div { margin-top: 2rem; }
  .value-band { padding: 0 0 5rem; }
  .pills { grid-template-columns: 1fr 1fr; }
  .pill { min-height: 5rem; font-size: 1.8rem; }
  .pill.arrow-pill { grid-column: 1 / -1; grid-row: 2; min-height: 3.8rem; }
  .pill:last-child { grid-column: 1 / -1; }
  .directory { padding: 5rem 0; border-radius: 1.5rem; }
  .directory-head, .section-head { display: block; }
  .directory-intro, .section-side { margin-top: 1.5rem; }
  .directory-controls { margin-top: 2rem; }
  .search-box { width: 100%; }
  .search-box input { width: 100%; }
  .member-card { flex-basis: 86vw; min-height: 25rem; padding: 1.25rem; }
  .avatar-art { width: 9rem; height: 9rem; right: 5%; top: 22%; }
  .avatar-art::before { width: 3rem; height: 3rem; box-shadow: 0 3.2rem 0 1.7rem #ffffff1c; }
  .member-info { max-width: 75%; }
  .member-info h3 { font-size: 1.65rem; }
  .member-index { font-size: 3.5rem; }
  .progress-line { width: 7rem; }
  .directory-note { align-items: start; gap: 1rem; }
  .directory-note span:first-child { max-width: 13rem; }
  .cases { padding: 5.5rem 0; }
  .section-head { margin-bottom: 2.5rem; }
  .section-title { font-size: 2.7rem; }
  .case-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
  .case { min-width: 82vw; scroll-snap-align: start; }
  .services { padding-bottom: 5.5rem; }
  .service-row { grid-template-columns: 2.4rem 1fr; padding: 1.6rem 0.2rem; }
  .service-row p { grid-column: 2; font-size: 0.75rem; }
  .service-row h3 { font-size: 1.5rem; }
  .service-icon { display: none; }
  .join { padding: 5rem 0; border-radius: 1.5rem; }
  .join-grid { display: block; }
  .join-copy { position: static; }
  .steps { margin-top: 3rem; }
  .step { grid-template-columns: 3.5rem 1fr; gap: 1rem; }
  .meeting-card { display: block; }
  .meeting-card .btn { margin-top: 1rem; width: 100%; }
  .stats-panel { padding: 5rem 1.5rem; border-radius: 1.5rem; }
  .stats-top { display: block; }
  .stats-top p { margin-top: 1rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; margin-top: 3rem; }
  .stat { padding: 1.4rem 0; border-left: 0; border-top: 1px solid #ffffff1e; }
  .stat:nth-child(even) { padding-left: 1rem; border-left: 1px solid #ffffff1e; }
  .stat strong { font-size: 2.8rem; }
  .stats-panel::after { font-size: 8rem; bottom: 1rem; }
  .footer { padding-top: 6rem; }
  .footer-cta { display: block; padding-bottom: 4rem; }
  .footer-cta h2 { font-size: 3rem; }
  .footer-action { text-align: left; margin-top: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding: 3rem 0 6rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { display: block; line-height: 1.8; }
  .footer::after { font-size: 5.8rem; bottom: 1rem; }
  .nav-content { display: block; padding: 3rem 0; }
  .nav-link { font-size: 2.65rem; }
  .nav-side { border-left: 0; border-top: 1px solid #ffffff1d; padding: 2rem 0 0; margin-top: 2rem; }
  .presentation-hero { display: flex; flex-direction: column; }
  .presentation-copy { padding: 3rem 1.25rem; }
  .presentation-copy h2 { font-size: 3.15rem; margin: 4rem 0 1.5rem; }
  .presentation-meta { grid-template-columns: 1fr 1fr; margin-top: 3rem; }
  .presentation-visual { min-height: 70svh; order: -1; }
  .presentation-outline { padding-block: 5rem; }
  .outline-head { display: block; margin-bottom: 2.5rem; }
  .outline-head .body-copy { margin-top: 1.5rem; }
  .outline-item { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .outline-item p { grid-column: 2; }
  .presentation-cta { display: block; padding-block: 4.5rem; }
  .presentation-cta h3 { font-size: 2.6rem; }
  .presentation-cta > div:last-child { margin-top: 2rem; }
  .modal-card { padding: 1.3rem; }
  .modal-head h2 { font-size: 2.2rem; }
  .modal-form { grid-template-columns: 1fr; }
  .field.full, .form-foot { grid-column: auto; }
  .form-foot { display: block; }
  .form-foot .btn { width: 100%; margin-top: 1rem; }
  .mobile-cta {
    position: fixed;
    display: flex;
    z-index: 70;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    height: 3.3rem;
    background: var(--red);
    color: #fff;
    border-radius: var(--pill);
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 12px 35px #5e071d59;
    transition: 0.3s;
  }
  .mobile-cta.hide { transform: translateY(6rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal, .line-inner {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
   PAGE TEMPLATES — 獨立頁面設計系統 v1.3.0
   適用頁面：/about/ /join/ /contact/ /weekly/ /members/ /cases/
   規範來源：uiux-design-system + uiux-page-design
   原則：Clear before decorative／Consistent before clever／強階層／
         Accessible by default／不依賴 inline style
   ===================================================================== */

:root {
  /* Spacing scale — 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Page rhythm — 流體，桌機/平板/手機自動收斂 */
  --page-top: clamp(6.5rem, 11vw, 8.5rem);
  --page-bottom: clamp(4rem, 9vw, 8rem);
  --gap-section: clamp(3.5rem, 7vw, 6rem);
  --pad-panel: clamp(1.75rem, 4.4vw, 4rem);
  --gap-card: clamp(0.9rem, 1.5vw, 1.5rem);

  /* Radius scale */
  --r-sm: 1rem;
  --r-md: 1.5rem;
  --r-lg: 2rem;

  /* Elevation */
  --e-1: 0 0.4rem 1.2rem #0000000a;
  --e-2: 0 1rem 3rem #00000012;
  --e-3: 0 1.5rem 4rem #00000022;
}

/* --- 修正原本失效的流體字級（clamp 中段被寫成固定值，等同不會縮放） --- */
.display { font-size: clamp(2.6rem, 7.2vw, 7.2rem); }
.section-title { font-size: clamp(2.1rem, 4.6vw, 4.6rem); }

/* --- 共用工具 --- */
.is-hidden { display: none !important; }

/* ── 1. Page Shell ──────────────────────────────────────────────── */
.page-main {
  padding-top: var(--page-top);
  padding-bottom: var(--page-bottom);
  background: var(--paper);
  color: var(--ink);
}

.page-main--surface { background: var(--surface); }
.page-main--ink { background: var(--ink); color: #fff; min-height: 100vh; }

.page-section { margin-top: var(--gap-section); }

/* ── 2. Page Hero ───────────────────────────────────────────────── */
.page-hero { margin-bottom: var(--gap-section); }

.page-hero .eyebrow { margin-bottom: var(--sp-5); }

.page-hero--split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-8);
  align-items: end;
}

.page-title {
  font-size: clamp(2rem, 5.2vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.045em;
  font-weight: 500;
  max-width: 24ch;
}

.page-title--wide { max-width: none; }

.page-lead {
  margin-top: var(--sp-6);
  max-width: 44rem;
  color: var(--slate);
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.9;
}

.page-hero--split .page-lead {
  justify-self: end;
  margin-top: 0;
  max-width: 32rem;
}

.page-main--ink .page-lead,
.panel--ink .page-lead { color: #ffffff8d; }

/* ── 3. Panel（區塊容器）───────────────────────────────────────── */
.panel {
  border-radius: var(--r-lg);
  padding: var(--pad-panel);
}

.panel--ink { background: var(--ink); color: #fff; }
.panel--surface { background: var(--surface); color: var(--ink); }
.panel--paper { background: var(--paper); box-shadow: var(--e-2); }
.panel--tall { padding-block: clamp(2.5rem, 6vw, 6rem); }

.panel-title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.panel--ink .eyebrow { color: #ffffff8d; }

/* ── 4. Card Grid ───────────────────────────────────────────────── */
.card-grid {
  display: grid;
  gap: var(--gap-card);
}

.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--auto { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.card-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

/* ── 5. Info Card ───────────────────────────────────────────────── */
.info-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--spring), box-shadow 0.4s;
}

.info-card--ink { background: #202126; color: #fff; }
.info-card--outline { background: var(--paper); border: 1px solid var(--line); }
.info-card--link:hover { transform: translateY(-0.3rem); box-shadow: var(--e-2); }

.card-eyebrow {
  font: 700 0.72rem/1 'Onest';
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-title {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.3;
  font-weight: 500;
  margin-top: var(--sp-3);
}

.card-role {
  font-size: 0.88rem;
  color: var(--slate);
  margin-top: var(--sp-2);
}

.card-text {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--muted);
  margin-top: var(--sp-4);
}

.info-card--ink .card-role,
.info-card--ink .card-text { color: #ffffff8d; }

.card-icon {
  font-size: 2.3rem;
  line-height: 1;
  color: var(--red);
}

/* ── 6. Stat Row（數據面板）─────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.stat-figure {
  display: block;
  font: 600 clamp(2rem, 3.6vw, 3.2rem)/1 'Onest';
  letter-spacing: -0.04em;
  color: var(--red);
}

.stat-label {
  display: block;
  margin-top: var(--sp-3);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff70;
}

.panel--surface .stat-label { color: var(--muted); }

/* ── 7. FAQ（原生 details 手風琴，免 JS、鍵盤可用）──────────────── */
.faq-list {
  display: grid;
  gap: 0;
  max-width: 52rem;
  margin-top: var(--sp-7);
}

.faq-item {
  border-top: 1px solid #ffffff20;
  padding: var(--sp-5) 0;
}

.faq-item:last-child { border-bottom: 1px solid #ffffff20; }

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  color: var(--red);
  line-height: 1.5;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q::after {
  content: "+";
  flex: none;
  font: 400 1.5rem/1 'Onest';
  color: #ffffff8d;
  transition: transform 0.3s var(--ease);
}

.faq-item[open] .faq-q::after { transform: rotate(45deg); }

.faq-q:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 0.4rem;
  border-radius: 0.3rem;
}

.faq-a {
  margin-top: var(--sp-3);
  color: #ffffffa6;
  line-height: 1.85;
  font-size: 0.92rem;
  max-width: 46rem;
}

.faq-a a { color: #fff; text-decoration: underline; }

/* ── 8. Checklist（參訪準備）────────────────────────────────────── */
.checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-card); }

/* ── 9. Contact ─────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4.5vw, 5rem);
  align-items: start;
}

.contact-block + .contact-block { margin-top: var(--sp-5); }

.contact-heading {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 500;
  margin-bottom: var(--sp-5);
}

.contact-text {
  color: var(--slate);
  font-size: 0.98rem;
  line-height: 1.85;
  margin-top: var(--sp-4);
}

.contact-text a { font-weight: 600; text-decoration: underline; }
.contact-text a:hover { color: var(--red); }

.contact-figure {
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  font-weight: 600;
  margin-top: var(--sp-2);
}

/* 深色表單面板 */
.form-panel {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--pad-panel);
  box-shadow: var(--e-3);
}

.form-panel .eyebrow { color: var(--red); }

.form-panel .panel-title { margin: var(--sp-2) 0 var(--sp-6); }

.form-stack { display: grid; gap: var(--sp-5); }

.form-panel .field label { color: #ffffffa6; }

.form-panel .field textarea { min-height: 7.5rem; }

.form-panel .btn { width: 100%; margin-top: var(--sp-2); }

.form-status {
  margin-top: var(--sp-4);
  font-size: 0.82rem;
  line-height: 1.7;
  min-height: 1.2rem;
}

.form-status--ok { color: #6ee7a8; }
.form-status--error { color: #ff8b9d; }

/* ── 10. Member Tile（名錄專用，與首頁 carousel 的 .member-card 脫鉤）── */
.member-tile {
  position: relative;
  min-height: 23rem;
  border-radius: var(--r-md);
  overflow: hidden;
  padding: var(--sp-5);
  background: #202126;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  transition: transform 0.45s var(--spring), box-shadow 0.45s;
}

.member-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at var(--x, 75%) var(--y, 22%), var(--tone, #c8102e) 0%, transparent 34%),
              linear-gradient(135deg, #2f3137, #0b0b0d 68%);
}

.member-tile::after {
  content: "";
  position: absolute;
  width: 15rem;
  height: 15rem;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  right: -3.5rem;
  top: -3.5rem;
  box-shadow: 0 0 0 3rem #ffffff08;
  z-index: -1;
  transition: 0.6s var(--spring);
}

.member-tile:hover { transform: translateY(-0.4rem); box-shadow: 0 1.2rem 2.8rem #00000055; }
.member-tile:hover::after { transform: scale(1.1) translate(-0.6rem, 0.6rem); }
.member-tile:focus-within { outline: 2px solid var(--red); outline-offset: 3px; }

.tile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.tile-tag {
  font: 600 0.62rem/1.4 'Onest';
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff8d;
}

.tile-arrow {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #ffffff36;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.3s;
}

.tile-arrow svg { width: 0.95rem; }

.member-tile:hover .tile-arrow { background: var(--red); border-color: var(--red); }

.tile-avatar {
  position: absolute;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  right: 8%;
  top: 19%;
  background: linear-gradient(145deg, #ffffff2b, #ffffff06);
  border: 1px solid #ffffff26;
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.tile-avatar::before {
  content: "";
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #ffffff24;
  box-shadow: 0 2.9rem 0 1.5rem #ffffff1c;
}

.tile-avatar.has-avatar::before { display: none; }

.tile-body {
  position: relative;
  z-index: 2;
  max-width: 78%;
  margin-top: var(--sp-6);
}

.tile-body h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.04em;
  font-weight: 500;
}

.tile-body p {
  color: #ffffff8d;
  margin-top: var(--sp-2);
  line-height: 1.7;
  font-size: 0.84rem;
}

.tile-path {
  display: block;
  margin-top: var(--sp-4);
  color: #ffffff48;
  font: 500 0.62rem/1 'Onest';
  word-break: break-all;
}

.tile-index {
  position: absolute;
  right: 1.4rem;
  bottom: 1rem;
  font: 500 3rem/1 'Onest';
  letter-spacing: -0.08em;
  color: #ffffff0d;
  z-index: 1;
}

.directory-empty {
  display: none;
  border: 1px solid #ffffff20;
  border-radius: var(--r-md);
  padding: var(--sp-7);
  text-align: center;
  color: #ffffff75;
}

.directory-empty.show { display: block; }

.filter-label {
  display: block;
  font: 600 0.62rem/1 'Onest';
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ffffff5b;
  margin-bottom: var(--sp-3);
}

.filter-stack { display: grid; gap: var(--sp-5); }

.filter-count {
  font-size: 0.75rem;
  color: #ffffff62;
  margin-top: var(--sp-5);
}

.filter-count strong { color: #fff; }

/* ── 11. Talk Tile（每週簡報存檔，與首頁 .talk-card 脫鉤）───────── */
.talk-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  min-height: 14rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s var(--spring), box-shadow 0.4s, border-color 0.4s;
}

.talk-tile:hover {
  transform: translateY(-0.35rem);
  border-color: var(--ink);
  box-shadow: var(--e-2);
}

.talk-tile time {
  font: 600 0.65rem/1 'Onest';
  letter-spacing: 0.1em;
  color: var(--muted);
}

.talk-tile h4 {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  font-weight: 500;
  margin-top: var(--sp-4);
}

.talk-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.talk-speaker {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.btn--sm {
  min-height: 2.3rem;
  padding: 0 1.1rem;
  font-size: 0.75rem;
}

/* ── 12. Case 幾何視覺循環（超過 4 篇不再重複或空白）────────────── */
.case-grid .case.style-1 .case-visual::before {
  width: 11rem;
  height: 11rem;
  border: 2.5rem solid var(--red);
  border-radius: 50%;
  right: -2rem;
  top: -3rem;
  background: none;
  box-shadow: none;
  transform: none;
}

.case-grid .case.style-2 .case-visual::before {
  width: 11rem;
  height: 11rem;
  border: 2.5rem solid var(--red);
  border-radius: 1rem;
  transform: rotate(26deg);
  right: 1rem;
  top: -3rem;
  background: none;
  box-shadow: none;
}

.case-grid .case.style-3 .case-visual::before {
  width: 3rem;
  height: 16rem;
  border: 0;
  border-radius: 0;
  background: var(--red);
  right: 5rem;
  top: -1rem;
  transform: rotate(37deg);
  box-shadow: none;
}

.case-grid .case.style-4 .case-visual::before {
  width: 13rem;
  height: 13rem;
  border: 1px solid var(--red);
  border-radius: 50%;
  right: -2rem;
  top: -3rem;
  background: none;
  transform: none;
  box-shadow: 0 0 0 2rem #c8102e, 0 0 0 4rem #c8102e24;
}

.case-foot {
  margin-top: var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-4);
}

.case-foot .case-result { margin-top: 0; display: block; }
.case-result span { display: block; margin-top: 0.2rem; }

/* ── 13. Link Row / CTA Band ────────────────────────────────────── */
.link-row {
  background: #202126;
  border-radius: var(--r-lg);
  padding: var(--pad-panel);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.link-row-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

.cta-band {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-panel);
  text-align: center;
  max-width: 50rem;
  margin-inline: auto;
}

.cta-band .page-lead { margin-inline: auto; margin-bottom: var(--sp-6); }

.panel-actions { margin-top: var(--sp-8); }
.panel-actions--center { text-align: center; }

/* ── 14. Meeting / Steps 補強（原本無 RWD）──────────────────────── */
.steps-panel {
  background: var(--paper);
  padding: clamp(1.75rem, 3.5vw, 3.5rem);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
}

.steps-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  margin-bottom: var(--sp-7);
}

/* ═══════════════ RESPONSIVE：Tablet（≤1024px）═══════════════════ */
@media (max-width: 1024px) {
  .page-hero--split,
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .page-hero--split .page-lead { justify-self: start; margin-top: var(--sp-5); max-width: 44rem; }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .checklist { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
  .join-grid { grid-template-columns: 1fr !important; gap: var(--sp-7) !important; }
  .link-row { flex-direction: column; align-items: start; }
}

/* ═══════════════ RESPONSIVE：Mobile（≤640px）═══════════════════ */
@media (max-width: 640px) {
  .page-title { max-width: none; }
  .card-grid--2,
  .card-grid--3,
  .card-grid--4,
  .card-grid--auto,
  .card-grid--auto-sm,
  .checklist,
  .case-grid { grid-template-columns: 1fr; }

  .stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }

  /* 名錄卡片在 grid 下不可沿用 carousel 的 flex-basis */
  .member-tile { min-height: 20rem; }
  .tile-body { max-width: 72%; }
  .tile-avatar { width: 7rem; height: 7rem; right: 6%; top: 17%; }
  .tile-avatar::before { width: 2.1rem; height: 2.1rem; box-shadow: 0 2.4rem 0 1.2rem #ffffff1c; }
  .tile-index { font-size: 2.4rem; }

  .talk-tile { min-height: 0; }
  .talk-foot { flex-direction: column; align-items: start; gap: var(--sp-3); }

  .case { min-height: 0; }
  .case-visual { height: 10rem; }
  .case-foot { flex-direction: column; align-items: start; }

  /* 流程步驟改為直式堆疊 */
  .step { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; }
  .meeting-card { flex-direction: column; align-items: stretch; text-align: left; }
  .meeting-card .btn { width: 100%; }

  .directory-controls { flex-direction: column; align-items: stretch; }
  .filter-group { gap: 0.4rem; }
  .filter-btn { padding: 0.55rem 0.85rem; }

  .form-panel .btn,
  .cta-band .btn,
  .panel-actions .btn { width: 100%; }

  .faq-q { font-size: 1.02rem; }
}

/* ── 15. Accessibility：可見鍵盤焦點 ───────────────────────────── */
.btn:focus-visible,
.filter-btn:focus-visible,
.talk-tile a:focus-visible,
.tile-arrow:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.page-main--ink .btn:focus-visible,
.panel--ink .btn:focus-visible { outline-color: #fff; }

/* ── 16. Utilities & 流體字級補強 ──────────────────────────────── */
.text-muted { color: var(--muted); }
.stack-md { margin-top: var(--sp-7); }
.stack-lg { margin-top: var(--sp-8); }

.join-grid { gap: clamp(2.5rem, 5vw, 7rem); }
.weekly-copy h3 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.weekly-copy { padding: clamp(1.5rem, 3vw, 3rem); }
.weekly-feature { min-height: clamp(0rem, 60vw, 36rem); }

/* ── 17. 區塊標題間距修正（CJK 大字級會吃掉上方 eyebrow）───────── */
.panel > .eyebrow,
.cta-band > .eyebrow,
.form-panel > .eyebrow,
.page-hero > .eyebrow { margin-bottom: 1.4rem; }

.panel > .section-title,
.panel > .panel-title { margin-bottom: 0.4rem; }

.panel > .section-title + .faq-list,
.panel > .section-title + .checklist { margin-top: var(--sp-7); }

/* value-band 已有自身留白，其後的 .page-section 不再疊加 */
.page-main .value-band { padding-bottom: 0; }

/* ── 18. Page Prose（通用頁面／編輯器內容排版）──────────────────── */
.page-prose {
  max-width: 46rem;
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.9;
}

.page-prose > * + * { margin-top: 1.4rem; }

.page-prose h2 {
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin-top: var(--sp-8);
}

.page-prose h3 {
  color: var(--ink);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  margin-top: var(--sp-7);
}

.page-prose h4 {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: var(--sp-6);
}

.page-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.page-prose a:hover { color: var(--red); }

.page-prose strong { color: var(--ink); font-weight: 600; }

.page-prose ul,
.page-prose ol { padding-left: 1.4rem; }

.page-prose ul { list-style: disc; }
.page-prose ol { list-style: decimal; }
.page-prose li + li { margin-top: 0.6rem; }
.page-prose li::marker { color: var(--red); }

.page-prose blockquote {
  border-left: 3px solid var(--red);
  padding: 0.2rem 0 0.2rem 1.4rem;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.8;
}

.page-prose img,
.page-thumb img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  display: block;
}

.page-thumb { border-radius: var(--r-lg); overflow: hidden; }

.page-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.page-prose th,
.page-prose td {
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0.6rem;
  text-align: left;
}

.page-prose th { color: var(--ink); font-weight: 600; }

.page-prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--sp-7);
}

.page-prose code {
  background: var(--surface);
  border-radius: 0.35rem;
  padding: 0.15em 0.4em;
  font-size: 0.88em;
}

.page-links {
  margin-top: var(--sp-7);
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.page-links a { text-decoration: underline; }

/* 404 卡片可點擊 */
a.info-card { text-decoration: none; color: inherit; }

/* ── 19. 固定導覽列：全站統一深底白字 ───────────────────────────
   原設計為透明浮動＋白字，只在首頁深色 hero 上可讀；
   一到白底／淺灰底頁面（/about/ /join/ /contact/ /cases/ /weekly/）
   就整條消失。改為全站一致的固定深色列，不再依頁面背景判斷。
   ------------------------------------------------------------------ */
.header {
  position: fixed;
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid #ffffff1a;
  box-shadow: 0 0.5rem 1.5rem #00000026;
}

/* 導覽連結 */
.desktop-nav a,
.desktop-nav button {
  color: #ffffffcc;
}

.desktop-nav a:hover,
.desktop-nav button:hover {
  color: #fff;
}

/* 品牌字與副標 */
.header .brand { color: #fff; }
.header .brand small { color: #ffffff8a; }

/* 深底上的玻璃按鈕（Taipei 時鐘、MENU）提高對比 */
.header .glass-chip {
  background: #ffffff16;
  border-color: #ffffff30;
  color: #fff;
}

.header .glass-chip:hover { background: #ffffff26; }

/* 固定列不佔文件流，內容區需自行保留高度 */
.page-main { padding-top: max(var(--page-top), 8rem); }

@media (max-width: 1024px) {
  .page-main { padding-top: max(var(--page-top), 7rem); }
}

@media (max-width: 640px) {
  .header-inner { height: 5rem; }
  .page-main { padding-top: 6.5rem; }
}

/* sticky 元素需避開固定導覽列高度 */
.join-copy { top: 8.5rem; }

@media (max-width: 1024px) {
  .join-copy { position: static; top: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   20. 排版調校 v1.3.2 — Hero 字級、About 區塊、價值主張三欄
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero：主標字級下修，大螢幕不再壓迫 ──────────────────────── */
.display {
  font-size: clamp(2.3rem, 5vw, 5.4rem);
  line-height: 1.04;
}

.hero-desc { max-width: 38rem; }

/* ── About：修掉左欄空洞與句子中斷 ───────────────────────────── */
.about { padding: 7rem 0 6.5rem; }

/* 原為 0.7fr / 1.3fr + 8rem 間距，左欄只放一行小標 → 大面積留白 */
.about-grid {
  grid-template-columns: 0.32fr 1.68fr;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.about-statement {
  /* 原 clamp 中段寫成固定值等同失效，且 22ch 造成句子從中間斷開 */
  font-size: clamp(1.75rem, 2.9vw, 3.1rem);
  line-height: 1.32;
  max-width: 26ch;
}

/* 第二句獨立成行，不再接在「任。」後面折行 */
.about-statement .muted {
  display: block;
  margin-top: 0.35rem;
}

.about-meta { margin-top: 3.5rem; }

/* ── 價值主張：取消膠囊按鈕，改為編輯式三欄 ──────────────────── */
.value-band { padding: 0 0 7rem; }

.value-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.value-item {
  padding: 2.6rem clamp(1.2rem, 2.5vw, 2.5rem) 0;
  border-right: 1px solid var(--line);
}

.value-item:first-child { padding-left: 0; }
.value-item:last-child { border-right: 0; }

.value-no {
  display: block;
  font: 600 0.68rem/1 'Onest';
  letter-spacing: 0.16em;
  color: var(--muted);
}

.value-item h3 {
  margin-top: 1.1rem;
  font: 500 clamp(1.7rem, 3vw, 2.8rem)/1.1 'Onest';
  letter-spacing: -0.045em;
  color: var(--ink);
}

.value-item h3.is-red { color: var(--red); }

.value-item p {
  margin-top: 0.9rem;
  color: var(--slate);
  font-size: 0.88rem;
  line-height: 1.85;
  max-width: 24ch;
}

/* 深色頁面（page-about）上的價值主張 */
.page-main--ink .value-row { border-top-color: #ffffff1f; }
.page-main--ink .value-item { border-right-color: #ffffff1f; }
.page-main--ink .value-item h3 { color: #fff; }
.page-main--ink .value-item p { color: #ffffff8d; }

@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-meta { grid-column: 1; }
  .about-statement { max-width: 30ch; }
}

@media (max-width: 640px) {
  .about { padding: 5rem 0 4.5rem; }
  .value-band { padding-bottom: 5rem; }
  .value-row { grid-template-columns: 1fr; }
  .value-item {
    padding: 2rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .value-item:last-child { border-bottom: 0; }
  .value-item p { max-width: none; }
}

/* 小標對齊大標第一行，而非浮在兩行之間 */
.about-grid { align-items: start; }
.about .eyebrow { margin-top: 0.85rem; }

/* 三欄描述讓欄寬決定行長，不再被 24ch 提前截斷 */
.value-item p { max-width: none; padding-right: 1.5rem; }

/* ── 21. Hero 重力球體場（Three.js）──────────────────────────── */
.hero-field {
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}

.hero-field.is-active { opacity: 1; }

/* 啟用 WebGL 版時隱藏舊的 2D 粒子網路；反之隱藏球體場畫布 */
:root[data-hero-field="webgl"] #networkCanvas { display: none; }
:root:not([data-hero-field="webgl"]) .hero-field { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-field { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   22. 每週主題簡報 — 兩位講者與現場相簿 v1.5.0
   ═══════════════════════════════════════════════════════════════ */

/* ── 講者列（首頁焦點卡／封存頁焦點卡，深底）──────────────────── */
.speaker-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: 2rem;
}

.speaker-row .speaker { margin-top: 0; }

.speaker-avatar.has-photo {
  background-size: cover;
  background-position: center;
}

/* ── 簡報專頁：兩位講者卡 ─────────────────────────────────────── */
.presentation-speakers {
  padding: clamp(3.5rem, 7vw, 6rem) 0 0;
}

.speaker-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-card);
  margin-top: var(--sp-7);
}

.speaker-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  transition: transform 0.4s var(--spring), box-shadow 0.4s, border-color 0.4s;
}

.speaker-card:hover {
  transform: translateY(-0.35rem);
  border-color: var(--ink);
  box-shadow: var(--e-2);
}

.speaker-card-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.speaker-photo {
  width: clamp(5rem, 9vw, 7rem);
  height: clamp(5rem, 9vw, 7rem);
  border-radius: 50%;
  background: linear-gradient(145deg, #e9556c, #7a0a1c);
  border: 1px solid var(--line);
  flex: none;
}

.speaker-photo.has-photo {
  background-size: cover;
  background-position: center;
  border-color: #00000014;
}

.speaker-no {
  font: 500 clamp(1.8rem, 3vw, 2.6rem)/1 'Onest';
  letter-spacing: -0.06em;
  color: var(--surface-2);
}

.speaker-industry {
  display: block;
  margin-top: var(--sp-5);
  font: 700 0.7rem/1 'Onest';
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.speaker-name {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-top: var(--sp-3);
}

.speaker-name a { text-decoration: none; }
.speaker-name a:hover { color: var(--red); }

.speaker-team {
  display: block;
  margin-top: var(--sp-2);
  font: 600 0.68rem/1 'Onest';
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.speaker-topic {
  margin-top: var(--sp-5);
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--ink);
}

.speaker-lead {
  margin-top: var(--sp-3);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--slate);
}

/* ── 特色圖片：焦點卡與專頁視覺區 ─────────────────────────────── */
.weekly-art.has-cover,
.presentation-visual.has-cover {
  background-size: cover;
  background-position: center;
  position: relative;
}

.weekly-art.has-cover::after,
.presentation-visual.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0a0c66 0%, #0a0a0ccc 100%);
  z-index: 0;
}

.weekly-art.has-cover > *,
.presentation-visual.has-cover > * {
  position: relative;
  z-index: 1;
}

/* ── 例會現場相簿 ─────────────────────────────────────────────── */
.presentation-gallery {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
  margin-top: var(--sp-7);
}

.gallery-item {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
}

.gallery-item.is-lead {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 16 / 11;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--spring);
}

.gallery-item:hover img { transform: scale(1.04); }

/* ── 專頁其他修正 ─────────────────────────────────────────────── */
.presentation-page-standalone {
  background: #f4f4f2;
  color: var(--ink);
  padding-top: max(var(--page-top), 8rem);
}

.presentation-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-7);
  width: 100%;
}

@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.is-lead { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 640px) {
  .speaker-duo { grid-template-columns: 1fr; }
  .speaker-row { gap: 1rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item.is-lead { grid-column: auto; aspect-ratio: 4 / 3; }
  .presentation-cta-inner { flex-direction: column; align-items: start; }
}

/* 固定導覽列存在時，錨點捲動要留出高度 */
:target,
section[id],
.presentation-speakers,
.presentation-gallery { scroll-margin-top: 8rem; }

/* ═══════════════════════════════════════════════════════════════════
   23. 簡報專頁改版 v1.5.1 — 固定封面 + 簡單列表
   改動原因：上傳的邀請函當成滿版背景圖會被裁切、文字疊上去難辨識。
   改成每週版型固定的封面，只連動會員頭像、姓名、產業與主題。
   ═══════════════════════════════════════════════════════════════ */

/* ── 標題縮小 ─────────────────────────────────────────────────── */
.presentation-copy h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 20ch;
}

.presentation-lead {
  font-size: 0.95rem;
  line-height: 1.85;
  max-width: 34rem;
  color: var(--slate);
}

/* ── 左欄：講者簡單列表 ───────────────────────────────────────── */
.speaker-list {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.speaker-line {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}

.speaker-line-avatar {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #e9556c, #7a0a1c);
  border: 1px solid #00000012;
}

.speaker-line-avatar.has-photo {
  background-size: cover;
  background-position: center;
}

.speaker-line-body { display: block; }

.speaker-line-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.speaker-line-name a { text-decoration: none; }
.speaker-line-name a:hover { color: var(--red); }

.speaker-line-name em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--red);
  margin-left: 0.6rem;
}

.speaker-line-topic {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--slate);
}

/* ── 右欄：固定封面 ───────────────────────────────────────────── */
.presentation-cover {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-7);
  padding: clamp(2rem, 4vw, 3.5rem);
  isolation: isolate;
}

/* 品牌紅暈，取代原本的滿版照片 */
.presentation-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 18%, #c8102e3d 0%, transparent 46%),
    linear-gradient(150deg, #1b1b1f 0%, #0b0b0d 70%);
}

.cover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font: 600 0.64rem/1 'Onest';
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff8d;
}

.cover-week { color: var(--red); }

.cover-speakers {
  display: grid;
  /* 依當週講者人數自動排列：1 位滿版、2 位並排、3 位以上自動換行 */
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.cover-speaker { margin: 0; }

.cover-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(145deg, #3a3f4a, #121214);
  border: 1px solid #ffffff1f;
  max-width: 9.5rem;
}

.cover-portrait.has-photo {
  background-size: cover;
  background-position: center top;
}

.cover-industry {
  display: block;
  margin-top: var(--sp-4);
  font: 700 0.62rem/1 'Onest';
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

.cover-name {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cover-topic {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.65;
  color: #ffffff8d;
}

.cover-mark {
  position: absolute;
  right: -0.6rem;
  bottom: -0.8rem;
  font: 500 clamp(3rem, 7vw, 5.5rem)/1 'Onest';
  letter-spacing: -0.06em;
  color: #ffffff08;
  z-index: -1;
}

/* meta 列縮小 */
.presentation-meta span { font-size: 0.6rem; letter-spacing: 0.16em; }
.presentation-meta strong { font-size: 0.92rem; }

@media (max-width: 900px) {
  .presentation-cover { padding: 2rem 1.5rem; }
  .cover-portrait { max-width: 7rem; }
}

@media (max-width: 640px) {
  .cover-speakers { grid-template-columns: 1fr; gap: 1.5rem; }
  .cover-portrait { max-width: 6rem; }
  .presentation-copy h2 { max-width: none; }
}

/* 只有一位講者時放大人像，避免右側留白 */
.cover-speakers:has(.cover-speaker:only-child) .cover-portrait { max-width: 13rem; }
.cover-speakers:has(.cover-speaker:only-child) .cover-name { font-size: 1.4rem; }

/* ── 24. 簡報專頁：副標、標籤、引薦對象 v1.6.0 ─────────────────── */
.presentation-subtitle {
  margin-top: var(--sp-4);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--sp-5);
  list-style: none;
  padding: 0;
}

.topic-tags li {
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 0.38rem 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--slate);
  background: var(--paper);
}

.presentation-referral { padding: clamp(3rem, 6vw, 5rem) 0 0; }

.referral-list {
  margin-top: var(--sp-7);
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 52rem;
}

.referral-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid #ffffff1f;
}

.referral-list li:last-child { border-bottom: 1px solid #ffffff1f; }

.referral-no {
  flex: none;
  font: 600 0.7rem/1 'Onest';
  letter-spacing: 0.12em;
  color: var(--red);
}

.referral-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #ffffffd6;
}

@media (max-width: 640px) {
  .referral-list li { gap: var(--sp-4); }
  .referral-text { font-size: 0.92rem; }
}

/* ── 25. 會員名片頁：公司 Logo 與官網 v1.6.1 ───────────────────── */
.member-company {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

.member-logo {
  flex: none;
  width: clamp(4.5rem, 9vw, 6.5rem);
  aspect-ratio: 3 / 2;
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  padding: 0.6rem;
}

.member-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.member-company-body { min-width: 0; }

.member-company-name {
  font-size: 1.15rem;
  color: var(--red);
  font-weight: 600;
  line-height: 1.4;
}

.member-website {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font: 500 0.82rem/1.4 'Onest';
  color: #ffffffa6;
  border-bottom: 1px solid #ffffff2e;
  padding-bottom: 0.15rem;
  word-break: break-all;
  transition: 0.25s;
}

.member-website:hover { color: #fff; border-color: #fff; }
.member-website svg { width: 0.8rem; flex: none; }

@media (max-width: 640px) {
  .member-company { gap: var(--sp-4); }
}