:root {
  --ink: #111;
  --paper: #fff;
  --orange: #ff4f2c;
  --blue: #a9d9e9;
  --green: #cfe5d8;
  --yellow: #f2db61;
  --line: rgba(17, 17, 17, .2);
  --sans: "vivo Sans TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --display:  "Space Grotesk", sans-serif;
  --mono: "DM Mono", monospace;
  --rail-w: 56px
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7
}
a {
  color: inherit;
  text-decoration: none
}
button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer
}
.skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 20;
  background: var(--ink);
  color: white;
  padding: 8px 14px
}
.skip:focus {
  top: 16px
}
.topbar {
  height: 84px;
  padding: 20px 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: absolute;
  z-index: 10;
  width: 100%
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px
}
.brand span {
  font: 700 2rem/1 var(--display);
  letter-spacing: -.1em
}
.brand small, .eyebrow, .section-no, .hero__notice, .field a, footer {
  font: 500 .68rem/1.25 var(--mono);
  letter-spacing: .1em
}
nav {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: .9rem
}
nav a:hover {
  text-decoration: underline;
  text-underline-offset: 5px
}
.nav-cta {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 99px
}
.nav-toggle {
  display: none
}
.hero {
  min-height: 100svh;
  padding: 150px 7vw 64px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: 1fr auto;
  position: relative;
  overflow: hidden;
  background: var(--yellow)
}
.hero__copy {
  align-self: center;
  max-width: 680px
}
.eyebrow {
  margin-bottom: 32px
}
.hero h1, h2 {
  font: 700 clamp(3.5rem, 9vw, 8.5rem)/.86 var(--display);
  letter-spacing: -.09em;
  margin: 0
}
.hero h1 em, h2 em {
  font-style: normal;
  color: var(--orange)
}
.hero__intro {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  max-width: 37rem;
  margin: 32px 0 20px
}
.button {
  display: inline-flex;
  gap: 26px;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 99px;
  padding: 15px 20px 15px 24px;
  transition: transform .25s
}
.button:hover {
  transform: translateY(-4px)
}
.button b {
  font-size: 1.3rem
}
.hero__stamp {
  position: absolute;
  top: 130px;
  right: 7vw;
  font: 700 7rem/.75 var(--display);
  letter-spacing: -.1em
}
.hero__stamp span {
  font: 500 .6rem var(--mono);
  letter-spacing: .12em
}
.hero__orbit {
  align-self: center;
  justify-self: end;
  width: min(36vw, 420px);
  height: min(36vw, 420px);
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transform: rotate(-12deg)
}
.hero__orbit div {
  font: 700 8rem/.7 var(--display);
  letter-spacing: -.12em;
  text-align: center;
  transform: rotate(12deg)
}
.hero__orbit small {
  font: 500 .55rem var(--mono);
  letter-spacing: .12em
}
.hero__orbit span {
  position: absolute;
  background: var(--orange);
  padding: 4px 9px;
  font: 500 .6rem var(--mono)
}
.hero__orbit span:nth-child(1) {
  top: 12%;
  left: 10%
}
.hero__orbit span:nth-child(2) {
  right: 0;
  top: 47%;
  background: var(--blue)
}
.hero__orbit span:nth-child(3) {
  bottom: 8%;
  left: 23%;
  background: var(--green)
}
.hero__notice {
  grid-column: 1/-1;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  display: flex;
  gap: 24px
}
.hero__notice strong {
  font-family: var(--sans);
  font-size: 1rem
}
.hero__notice small {
  margin-left: auto
}
.manifesto, .fields, .process, .timeline {
  padding: 130px 7vw;
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 48px;
  border-bottom: 1px solid var(--line)
}
.manifesto {
  background: var(--paper)
}
.manifesto h2, .process h2, .timeline h2 {
  font-size: clamp(3rem, 6.5vw, 7rem);
  margin-bottom: 40px
}
.manifesto h2 span, .process h2 span {
  color: var(--orange)
}
.manifesto p {
  max-width: 34rem;
  font-size: 1.15rem
}
.manifesto__quote {
  grid-column: 2;
  font: 700 clamp(2rem, 4vw, 4rem)/1 var(--display);
  letter-spacing: -.06em;
  margin-top: 40px
}
.fields {
  background: var(--ink);
  color: var(--paper);
  display: block
}
.fields .section-no {
  margin-bottom: 44px
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}
.field {
  color: var(--ink);
  min-height: 470px;
  padding: 28px;
  display: flex;
  flex-direction: column
}
.field--orange {
  background: var(--orange)
}
.field--blue {
  background: var(--blue)
}
.field--green {
  background: var(--green)
}
.field span {
  font: 600 1.3rem var(--mono)
}
.field h3 {
  font: 700 clamp(3.3rem, 6vw, 6rem)/.8 var(--display);
  letter-spacing: -.1em;
  margin: 70px 0 28px
}
.field p {
  margin-top: auto
}
.field a {
  margin-top: 28px
}
.process {
  background: var(--paper)
}
.steps {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px
}
.steps div {
  border-top: 2px solid var(--ink);
  padding-top: 16px
}
.steps b {
  font: 500 1rem var(--mono);
  color: var(--orange)
}
.steps h3 {
  font-size: 1.8rem;
  margin: 20px 0 10px
}
.timeline {
  background: var(--blue);
  display: block
}
.timeline__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 30px 0 50px
}
.date-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink)
}
.date-list div {
  min-height: 190px;
  padding: 20px 14px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 16px
}
.date-list div:last-child {
  border: 0
}
.date-list time {
  font: 700 clamp(1.5rem, 2.5vw, 2.6rem)/1 var(--display);
  letter-spacing: -.01em
}
.date-list span {
  margin-top: auto;
  font-size: .85rem
}
.date-list__active {
  background: var(--orange)
}
.apply {
  background: var(--orange);
  padding: 130px 7vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
  align-items: center
}
.apply__graphic {
  font: 700 clamp(4rem, 10vw, 11rem)/.78 var(--display);
  letter-spacing: -.12em;
  transform: rotate(-8deg)
}
.apply h2 {
  font-size: clamp(4rem, 8vw, 8rem)
}
.apply p {
  max-width: 30rem;
  margin: 20px 0 30px;
  font-size: 1.15rem
}
.button--light {
  background: var(--paper);
  color: var(--ink)
}
.apply small {
  display: block;
  margin-top: 18px;
  font: 500 .68rem var(--mono)
}
footer {
  padding: 24px 7vw;
  display: flex;
  justify-content: space-between;
  background: var(--ink);
  color: var(--paper)
}
@media(max-width:800px) {
  .topbar {
    position: relative;
    background: var(--paper)
  }
  .topbar nav {
    display: none;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    padding: 24px 7vw;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start
  }
  .topbar:has(.nav-toggle[aria-expanded=true]) nav {
    display: flex
  }
  .nav-toggle {
    display: block;
    font: 500 .7rem var(--mono)
  }
  .nav-toggle i {
    display: inline-block;
    width: 24px;
    border-top: 1px solid;
    margin-left: 8px
  }
  .hero {
    padding: 86px 7vw 42px;
    display: block
  }
  .hero__stamp {
    top: 100px;
    right: 7vw;
    font-size: 4rem
  }
  .hero__copy {
    padding-top: 100px
  }
  .hero__orbit {
    width: 72vw;
    height: 72vw;
    margin: 60px auto 40px
  }
  .hero__notice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px
  }
  .hero__notice small {
    margin: 0;
    grid-column: 1/-1
  }
  .manifesto, .fields, .process, .timeline {
    padding: 84px 7vw;
    display: block
  }
  .section-no {
    margin-bottom: 36px
  }
  .manifesto__quote {
    margin-top: 65px
  }
  .field-grid, .steps {
    display: block
  }
  .field {
    min-height: 360px;
    margin-bottom: 12px
  }
  .field h3 {
    margin: 70px 0 28px
  }
  .steps div {
    margin-bottom: 25px
  }
  .timeline__head {
    display: block;
    margin-bottom: 42px
  }
  .date-list {
    grid-template-columns: 1fr 1fr
  }
  .date-list div {
    min-height: 150px;
    border-bottom: 1px solid var(--ink)
  }
  .apply {
    display: block;
    padding: 90px 7vw
  }
  .apply__graphic {
    margin-bottom: 85px
  }
  footer {
    display: block
  }
  footer span {
    display: block;
    margin: 7px 0
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  .button {
    transition: none
  }
}
@font-face {
  font-family: "vivo Sans TC";
  src: url("../fonts/vivoSansTCVF.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap
}
.brand img {
  display: block;
  width: 168px;
  height: auto;
  mix-blend-mode: multiply
}
.brand small {
  display: none
}
.hero__stamp {
  font-family:  var(--display);
}
.field--orange {
  background: var(--orange);
  color: #111
}
.field--orange h3 {
  color: #fff
}
.field--blue {
  background: #000;
  color: #fff
}
.field--blue h3 {
  color: #fff
}
.field--green {
  background: #fff;
  color: #111;
  border: 1px solid rgba(255, 75, 47, .45)
}
.field--green h3 {
  color: #111
}
/* 首屏橙色 Banner 與 TNDA 動態 Logo */
.hero {
  background: #fe5732;
  color: var(--paper)
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none
}
.hero__video-label {
  position: absolute;
  right: 7vw;
  bottom: 110px;
  font: 500 .62rem var(--mono);
  letter-spacing: .14em;
  z-index: 2
}
.hero__copy, .hero__stamp, .hero__orbit, .hero__notice {
  position: relative;
  z-index: 2
}
.hero .button {
  background: var(--ink);
  color: var(--orange)
}
.hero__orbit {
  border-color: var(--paper)
}
.hero__orbit span {
  background: var(--yellow);
  color: var(--ink)
}
.hero__orbit span:nth-child(2) {
  background: var(--blue)
}
.hero__orbit span:nth-child(3) {
  background: var(--green)
}
.hero__notice {
  border-color: var(--paper)
}
.hero__orbit {
  display: none
}
.hero h1 em {
  color: var(--paper)
}
.hero .eyebrow, .hero__intro {
  color: var(--paper)
}
.hero__video {
  inset: 96px 0 0;
  height: calc(100% - 96px)
}
.hero__copy {
  max-width: 860px;
  width: min(58vw, 860px)
}
.hero h1 {
  max-width: 920px
}
.hero__video {
  right: auto;
  width: 52%;
  object-position: left center
}
.hero__copy {
  grid-column: 2;
  justify-self: end
}
.apply h2 em {
  color: var(--paper)
}
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: hidden;
  pointer-events: none
}
.transition-panel {
  position: absolute;
  inset: -12%;
  display: block;
  transform: translateY(110%) skewY(-7deg);
  transition: transform .65s cubic-bezier(.77, 0, .18, 1)
}
.transition-panel--one {
  background: var(--orange);
  transition-delay: 0s
}
.transition-panel--two {
  background: #111;
  transform: translateY(110%) skewY(7deg);
  transition-delay: .08s
}
.transition-panel--three {
  background: var(--orange);
  transform: translateY(110%) skewY(-4deg);
  transition-delay: .16s
}
.page-transition.is-active .transition-panel {
  transform: translateY(0) skewY(0)
}
.page-transition img {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(150px, 24vw);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  transition: opacity .25s .25s, transform .65s .25s cubic-bezier(.22, 1, .36, 1)
}
.page-transition.is-active img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1)
}
.click-frame {
  position: fixed;
  z-index: 90;
  width: 36px;
  height: 26px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: click-frame-pop .6s cubic-bezier(.22, 1, .36, 1) forwards
}
.click-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.click-frame.is-on-orange img {
  filter: brightness(0) invert(1)
}
@keyframes click-frame-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.35)
  }
  65% {
    opacity: 1
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.7)
  }
}
.site-loader__video {
  display: block;
  width: min(220px, 32vw);
  height: min(220px, 32vw);
  object-fit: contain;
  background: transparent
}
.field-group-image {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
  margin-bottom: 26px
}
.info-grid--fields .field {
  overflow: hidden
}
.info-grid--fields .field--orange .field-group-image {
  background: #111
}
.info-grid--fields .field--blue .field-group-image {
  background: #111
}
.info-grid--fields .field--green .field-group-image {
  background: #fff
}
@media(max-width:800px) {
  .field-group-image {
    height: 210px
  }
}
.site-loader__logo {
  display: block;
  width: min(220px, 42vw);
  height: auto;
  object-fit: contain;
  animation: loader-mark .9s cubic-bezier(.22, 1, .36, 1) both
}
.sub-page-video {
  background: var(--orange)
}
.cursor-orb {
  width: 34px;
  height: 34px;
  border: 1px solid var(--paper);
  mix-blend-mode: difference
}
.cursor-orb::before, .cursor-orb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%)
}
.cursor-orb::before {
  width: 48px;
  height: 1px
}
.cursor-orb::after {
  width: 1px;
  height: 48px
}
@media(max-width:800px) {
  .cursor-trail {
    display: none
  }
}
.cursor-stroke {
  position: fixed;
  z-index: 89;
  width: 28px;
  height: 3px;
  background: var(--orange);
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--stroke-angle));
  transform-origin: center;
  animation: cursor-stroke-fade .42s ease-out forwards
}
@keyframes cursor-stroke-fade {
  0% {
    opacity: .85;
    transform: translate(-50%, -50%) rotate(var(--stroke-angle)) scaleX(.35)
  }
  55% {
    opacity: .7
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--stroke-angle)) translateX(10px) scaleX(1.15)
  }
}
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fc542d;
  color: var(--paper);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 24px;
  transition: opacity .65s ease, visibility .65s
}
.site-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}
.site-loader__mark {
  font: 700 clamp(4rem, 14vw, 11rem)/.78 var(--display);
  letter-spacing: -.11em;
  animation: loader-mark .9s cubic-bezier(.22, 1, .36, 1) both
}
.site-loader__line {
  width: min(320px, 60vw);
  height: 2px;
  background: rgba(255, 255, 255, .35);
  overflow: hidden
}
.site-loader__line i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--paper);
  transform: translateX(-100%);
  animation: loader-line 1.4s cubic-bezier(.22, 1, .36, 1) infinite
}
.site-loader p {
  font: 500 .65rem var(--mono);
  letter-spacing: .14em
}
@keyframes loader-mark {
  from {
    opacity: 0;
    transform: scale(.7) rotate(-8deg)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes loader-line {
  to {
    transform: translateX(100%)
  }
}
@media(prefers-reduced-motion:reduce) {
  .site-loader {
    transition: none
  }
  .site-loader__mark, .site-loader__line i {
    animation: none
  }
  .site-loader__line i {
    transform: none
  }
}
.timeline, .timeline__head {
  background: var(--paper);
  color: var(--ink)
}
.date-list__active {
  background: var(--orange);
  color: #111
}
.sub-page-video {
  display: block;
  width: 100%;
  height: clamp(180px, 28vw, 360px);
  object-fit: cover;
  background: #ff4b2f;
  margin: -40px 0 72px
}
.page-shell--apply .sub-page-video {
  margin-bottom: 72px
}
@media(max-width:800px) {
  .sub-page-video {
    height: 180px;
    margin: -30px 0 50px
  }
}
.space-banner, .experience-banner, .experience-card {
  cursor: grab;
  touch-action: none
}
.space-banner.is-dragging, .experience-banner.is-dragging, .experience-card.is-dragging {
  cursor: grabbing;
  z-index: 5;
  box-shadow: 24px 24px 0 rgba(17, 17, 17, .18)
}
.space-banner, .experience-banner, .experience-card {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1)
}
.space-banner:hover {
  transform: rotate(-.7deg) scale(.985)
}
.experience-banner:hover {
  transform: rotate(.7deg) scale(.985)
}
.experience-card:hover {
  transform: rotate(-1deg) translateY(-10px)
}
.space-banner img, .experience-banner img, .experience-card img {
  transition: transform 1s cubic-bezier(.22, 1, .36, 1)
}
.space-banner:hover img, .experience-banner:hover img, .experience-card:hover img {
  transform: scale(1.06)
}
.space-banner::before, .experience-banner::before, .experience-card::before {
  content: "✦";
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 30px;
  color: var(--yellow);
  font: 700 2rem var(--display);
  animation: star-bob 2.8s ease-in-out infinite
}
.experience-card--left::before {
  right: auto;
  left: 30px;
  color: var(--orange)
}
@keyframes star-bob {
  0%, 100% {
    transform: rotate(0) translateY(0)
  }
  50% {
    transform: rotate(15deg) translateY(-7px)
  }
}
.field:nth-child(1) {
  transform: rotate(-1deg)
}
.field:nth-child(2) {
  transform: rotate(1deg)
}
.field:nth-child(3) {
  transform: rotate(-.6deg)
}
.field:nth-child(1):hover, .field:nth-child(2):hover, .field:nth-child(3):hover {
  transform: translateY(-14px) rotate(0)
}
.experience-card--left {
  margin-left: 7vw;
  margin-right: auto
}
.experience-card--left figcaption {
  left: auto;
  right: 32px;
  text-align: right
}
.experience-card {
  position: relative;
  width: min(72vw, 980px);
  margin: 18px 7vw 0 auto;
  background: #111;
  overflow: hidden;
  min-height: clamp(300px, 42vw, 620px)
}
.experience-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover
}
.experience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, .03), rgba(17, 17, 17, .7))
}
.experience-card figcaption {
  position: absolute;
  z-index: 1;
  left: 32px;
  bottom: 32px;
  color: var(--orange);
  display: grid;
  gap: 8px
}
.experience-card figcaption span {
  font: 500 .7rem var(--mono);
  letter-spacing: .12em
}
.experience-card figcaption strong {
  font: 700 clamp(1.8rem, 4vw, 4rem)/.9 var(--display)
}
.experience-banner {
  position: relative;
  margin: 0;
  background: #111;
  overflow: hidden;
  min-height: clamp(360px, 55vw, 760px)
}
.experience-banner img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover
}
.experience-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, .05), rgba(17, 17, 17, .72))
}
.experience-banner figcaption {
  position: absolute;
  z-index: 1;
  left: 7vw;
  bottom: 44px;
  color: var(--orange);
  display: grid;
  gap: 8px
}
.experience-banner figcaption span {
  font: 500 .7rem var(--mono);
  letter-spacing: .12em
}
.experience-banner figcaption strong {
  font: 700 clamp(2rem, 5vw, 5rem)/.9 var(--display);
  letter-spacing: -.07em
}
.space-banner {
  position: relative;
  margin: 0;
  background: #111;
  overflow: hidden
}
.space-banner img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  object-fit: cover;
  filter: saturate(.9)
}
.space-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17, 17, 17, .08), rgba(17, 17, 17, .48))
}
.space-banner figcaption {
  position: absolute;
  z-index: 1;
  right: 7vw;
  bottom: 28px;
  color: var(--orange);
  display: flex;
  align-items: end;
  gap: 20px;
  font-family: var(--display)
}
.space-banner figcaption span {
  font: 500 .7rem var(--mono);
  letter-spacing: .1em
}
.space-banner figcaption strong {
  font-size: clamp(1.3rem, 3vw, 2.8rem);
  line-height: 1
}
.nav-cta {
  background: #111;
  color: var(--orange)
}
.sub-page .page-shell::after {
  content: "TNDA / OPEN CALL 115";
  display: block;
  width: min(100%, 1100px);
  margin-top: 100px;
  padding: 24px 28px;
  background: #111;
  color: var(--orange);
  font: 700 clamp(1.4rem, 3vw, 3rem)/1 var(--display);
  letter-spacing: .02em
}
.sub-page {
  background: var(--paper);
  min-height: 100vh
}
.sub-page .topbar {
  position: relative;
  background: var(--orange);
  color: #111
}
.sub-page .brand img {
  mix-blend-mode: normal
}
.page-shell {
  padding: 150px 7vw 120px;
  min-height: calc(100vh - 150px)
}
.page-shell h1 {
  font: 700 clamp(4rem, 10vw, 9rem)/.82 var(--display);
  letter-spacing: -.08em;
  margin: 60px 0 40px;
  max-width: 900px
}
.page-shell h1 em {
  font-style: normal;
  color: var(--orange)
}
.page-lead {
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  max-width: 720px;
  margin-bottom: 80px
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1100px
}
.info-grid article {
  border-top: 2px solid var(--ink);
  padding: 20px 24px 32px;
  min-height: 190px
}
.info-grid article b, .checklist b {
  font: 500 .75rem var(--mono);
  color: var(--orange)
}
.info-grid h2, .checklist h2 {
  font: 700 clamp(1.8rem, 3vw, 3.2rem)/1 var(--display);
  letter-spacing: -.06em;
  margin: 28px 0 6px
}
.info-grid--fields {
  grid-template-columns: repeat(3, 1fr);
  max-width: none
}
.info-grid--fields article {
  border: 0;
  min-height: 360px;
  padding: 28px
}
.date-list--page {
  max-width: 1200px;
  margin-bottom: 90px;
  grid-template-columns: repeat(3, 1fr)
}
.date-list--page div {
  min-height: 180px;
  border-bottom: 1px solid var(--ink)
}
.steps--page {
  grid-column: auto;
  max-width: 1100px
}
.steps--page h2 {
  font-size: 2rem
}
.checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin-bottom: 60px
}
.checklist > div {
  border: 1px solid var(--line);
  padding: 24px;
  min-height: 190px
}
.page-shell--apply {
  background: var(--orange)
}
.page-shell--apply h1 em {
  color: var(--paper)
}
.page-shell--apply .section-no, .page-shell--apply .page-lead {
  color: var(--paper)
}
.page-shell--apply .button {
  background: var(--paper);
  color: var(--ink)
}
@media(max-width:800px) {
  .sub-page .topbar {
    position: relative
  }
  .page-shell {
    padding: 90px 7vw
  }
  .page-shell h1 {
    font-size: clamp(4rem, 17vw, 7rem)
  }
  .info-grid, .info-grid--fields, .date-list--page, .checklist {
    grid-template-columns: 1fr
  }
  .page-lead {
    margin-bottom: 50px
  }
  .info-grid--fields article {
    min-height: 280px
  }
  .date-list--page div {
    border-right: 0
  }
  .steps--page {
    display: block
  }
  .steps--page > div {
    margin-bottom: 36px
  }
}
.hero__video {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) scale(1.03);
  transition: transform .18s ease-out
}
.scroll-progress {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none
}
.cursor-orb {
  position: fixed;
  z-index: 31;
  width: 18px;
  height: 18px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, opacity .2s
}
.cursor-orb.is-active {
  opacity: 1
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  border: 2px solid rgba(255, 228, 107, .75);
  pointer-events: none
}
.hero::before {
  width: 48vw;
  height: 48vw;
  right: -14vw;
  top: 18%;
  border-radius: 50%;
  animation: orbit-drift 14s ease-in-out infinite
}
.hero::after {
  width: 32vw;
  height: 32vw;
  left: -18vw;
  bottom: -10vw;
  transform: rotate(24deg);
  animation: shape-drift 10s ease-in-out infinite
}
@keyframes orbit-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0)
  }
  50% {
    transform: translate3d(-24px, 18px, 0) rotate(18deg)
  }
}
@keyframes shape-drift {
  0%, 100% {
    transform: rotate(24deg) translate(0, 0)
  }
  50% {
    transform: rotate(42deg) translate(28px, -22px)
  }
}
.hero__video {
  left: 0;
  right: 0;
  width: 100%;
  inset: 150px 0 0;
  height: calc(100% - 150px);
  object-position: center center
}
.hero__copy {
  transform: translateY(-54px)
}
@media(max-width:800px) {
  .hero__video {
    inset: 0 0 auto;
    width: 100%;
    height: 42%;
    object-position: center top
  }
  .hero__copy {
    grid-column: auto;
    width: 100%;
    max-width: none;
    padding-top: 43vh
  }
}
@media(max-width:800px) {
  .hero__video-label {
    bottom: 96px
  }
}
.hero__copy {
  animation: hero-copy-in .9s cubic-bezier(.22, 1, .36, 1) both
}
.hero__stamp {
  animation: hero-stamp-in 1s .15s cubic-bezier(.22, 1, .36, 1) both
}
.hero__notice {
  animation: hero-notice-in .9s .35s cubic-bezier(.22, 1, .36, 1) both
}
.field {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s
}
.field:hover {
  transform: translateY(-12px) rotate(-1deg);
  box-shadow: 18px 18px 0 rgba(17, 17, 17, .16)
}
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1)
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none
}
@keyframes hero-copy-in {
  from {
    opacity: 0;
    transform: translateY(38px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes hero-stamp-in {
  from {
    opacity: 0;
    transform: translateX(-30px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes hero-notice-in {
  from {
    opacity: 0;
    transform: translateY(20px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero__copy, .hero__stamp, .hero__notice {
    animation: none
  }
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none
  }
  .field:hover {
    transform: none;
    box-shadow: none
  }
}
/* ---- V4 資料補正元件 ---- */
.field__cross {
  font: 500 .72rem/1.5 var(--mono);
  opacity: .92;
  display: block;
  margin: 14px 0 5px;
  letter-spacing: .04em
}
.detail-head {
  font: 700 clamp(1.6rem, 3vw, 2.6rem)/1 var(--display);
  letter-spacing: -.05em;
  margin: 50px 0 12px
}
.detail-lead {
  max-width: 640px;
  margin: 0 0 34px;
  color: rgba(17, 17, 17, .7)
}
.crit-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px
}
.crit-card {
  border-top: 2px solid var(--ink);
  padding: 20px 22px 26px
}
.crit-card h4 {
  font: 700 1.5rem var(--display);
  letter-spacing: -.04em;
  margin: 0 0 16px
}
.crit-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px
}
.crit-card li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .92rem;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 7px
}
.crit-card li b {
  font: 500 .95rem var(--mono);
  color: var(--orange)
}
.course-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1100px
}
.course-item {
  border: 1px solid var(--line);
  padding: 22px 24px
}
.course-item .tag {
  font: 500 .7rem var(--mono);
  color: var(--orange);
  letter-spacing: .08em
}
.course-item h4 {
  font: 700 1.4rem var(--display);
  letter-spacing: -.04em;
  margin: 6px 0 14px
}
.course-item dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  font-size: .9rem;
  margin: 0
}
.course-item dt {
  color: rgba(17, 17, 17, .5);
  font: 500 .7rem var(--mono);
  align-self: center
}
.course-item dd {
  margin: 0
}
.course-item .stars {
  color: var(--orange);
  letter-spacing: 2px
}
.footer-contact {
  background: var(--ink);
  color: var(--paper);
  padding: 22px 7vw;
  font: 500 .88rem/1.7 var(--mono);
  letter-spacing: .04em;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 26px
}
.footer-contact a {
  color: var(--orange)
}
.footer-contact b {
  color: var(--paper);
  font-weight: 500
}
@media(max-width:800px) {
  .crit-cols, .course-cols {
    grid-template-columns: 1fr
  }
  .detail-head {
    margin-top: 64px
  }
  .footer-contact {
    display: block
  }
  .footer-contact span {
    display: block
  }
}
/* ---- 學生專區 / 聯盟學校 ---- */
.cert-tag {
  font: 500 .72rem var(--mono);
  color: var(--orange);
  letter-spacing: .06em
}
.info-grid .hl {
  background: linear-gradient(transparent 55%, rgba(255, 79, 44, .28) 55%);
  font-weight: 700
}
.info-grid .cert {
  color: var(--orange);
  font-weight: 700
}
.info-grid article p {
  font-size: .98rem
}
.info-grid article ul {
  margin: 10px 0 0;
  padding-left: 1.1em
}
.info-grid article li {
  font-size: .92rem;
  margin-bottom: 4px
}
.school-stat {
  font: 700 clamp(6rem, 20vw, 15rem)/.8 var(--display);
  letter-spacing: -.06em;
  color: var(--orange);
  margin: 0 0 8px
}
.school-stat small {
  display: block;
  font: 500 1.1rem var(--mono);
  letter-spacing: .2em;
  color: var(--ink)
}
.schools {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(11, auto);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 1200px;
  margin-top: 40px
}
.schools div {
  background: var(--paper);
  padding: 16px 18px;
  font-weight: 700;
  font-size: .95rem;
  transition: background .2s, color .2s
}
.schools div:hover {
  background: var(--orange);
  color: #fff
}
.schools div.empty {
  background: #faf7f5
}
.schools div.empty:hover {
  background: #faf7f5
}
@media(max-width:800px) {
  .schools {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(18, auto)
  }
  .schools div.empty {
    display: none
  }
}
html, body {
  overflow-x: clip
}
/* ---- 子頁全出血主題橫幅（更有設計感） ---- */
.page-shell .experience-banner {
  margin: 12px -7vw 88px;
  min-height: clamp(280px, 40vw, 540px);
  border-radius: 0
}
.page-shell .experience-banner video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover
}
.page-shell .experience-banner--video::after {
  background: linear-gradient(180deg, rgba(17, 17, 17, .02), rgba(17, 17, 17, .55))
}
.page-shell .experience-banner figcaption {
  left: 7vw
}
/* 子頁大幽靈字裝飾 */
.page-shell {
  position: relative
}
.page-ghost {
  position: absolute;
  top: 120px;
  right: -1vw;
  z-index: 0;
  font: 700 clamp(7rem, 20vw, 20rem)/.8 var(--display);
  letter-spacing: -.08em;
  color: rgba(17, 17, 17, .05);
  pointer-events: none;
  user-select: none
}
.sub-page .page-shell > *:not(.page-ghost) {
  position: relative;
  z-index: 1
}
.page-shell .experience-banner {
  z-index: 1
}
/* info-grid / crit / course 卡片微互動，增加設計感 */
.info-grid article, .crit-card, .course-item {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s
}
.info-grid article:hover, .course-item:hover {
  transform: translateY(-6px);
  box-shadow: 14px 14px 0 rgba(17, 17, 17, .08)
}
.crit-card:hover {
  transform: translateY(-6px)
}
@media(max-width:800px) {
  .page-shell .experience-banner {
    margin: 8px -7vw 56px;
    min-height: 230px
  }
  .page-ghost {
    display: none
  }
}
/* ---- 首頁照片橫幅縮小（原本佔版面過大） ---- */
#main > .space-banner img {
  min-height: 160px;
  max-height: 300px
}
#main > .experience-banner {
  min-height: clamp(200px, 26vw, 360px)
}
#main > .experience-card {
  min-height: clamp(180px, 20vw, 300px);
  width: min(62vw, 760px)
}
#main > .experience-banner figcaption strong {
  font-size: clamp(1.5rem, 3.4vw, 3rem)
}
@media(max-width:800px) {
  #main > .experience-banner {
    min-height: 200px
  }
  #main > .experience-card {
    min-height: 180px;
    width: auto
  }
}
/* ---- Hero：透明背景影片（無橘色色差），Logo 滿版寬放大、置於下半部與標語錯開 ---- */
.hero__video {
  background: transparent
}
@media(min-width:801px) {
  .hero__copy {
    align-self: start;
    transform: translateY(4px)
  }
  .hero__video {
    inset: auto auto 0 -16%;
    top: auto;
    width: 132%;
    height: 48%;
    object-fit: cover;
    object-position: center 30%
  }
}
@media(max-width:800px) {
  .hero__video {
    object-fit: cover;
    object-position: center;
    background: transparent
  }
}
/* ---- Hero 標題「把好奇心做成作品。」單行不換行 ---- */
.hero h1 {
  white-space: nowrap
}
@media(min-width:801px) {
  .hero h1 {
    font-size: clamp(3rem, 8.6vw, 8rem)
  }
}
@media(max-width:800px) {
  .hero h1 {
    font-size: min(11vw, 4.2rem)
  }
}
/* ---- 最新消息列表 ---- */
.news-list {
  max-width: 1140px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink)
}
.news-item {
  display: flex;
  gap: clamp(16px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 34px) 4px;
  border-bottom: 1px solid var(--ink);
  transition: padding-left .35s cubic-bezier(.22, 1, .36, 1), background-color .3s
}
.news-item__date {
  font: 700 clamp(1.3rem, 2.2vw, 1.9rem)/1 var(--display);
  letter-spacing: -.04em;
  color: var(--orange);
  white-space: nowrap
}
.news-item__tag {
  font: 500 .85rem var(--mono);
  letter-spacing: .08em;
  border: 1px solid var(--ink);
  border-radius: 99px;
  padding: 5px 16px;
  white-space: nowrap
}
.news-item__body {
  flex: 1
}
.news-item__title {
  font: 700 clamp(1.15rem, 1.9vw, 1.45rem)/1.2 var(--display);
  letter-spacing: 0;
  margin: 0;
	line-height: 1.4
}
.news-item__note {
  font-size: 1rem;
  color: rgba(17, 17, 17, .7)
}
.news-item__arrow {
  font: 500 1.1rem var(--mono);
  color: var(--orange);
  align-self: center
}
@media(max-width:700px) {
  .news-item {
    flex-wrap: wrap;
    gap: 8px 16px
  }
  .news-item__arrow {
    display: none
  }
  .news-item__body {
    flex-basis: 100%
  }
}
/* ---- 三大學程左側固定直欄（內頁一直掛在左邊，仿 V4 版型） ---- */
.field-rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  z-index: 16;
  display: flex;
  flex-direction: column;
  gap: 15px
}
.field-rail .fr {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 700;
  font-family: var(--sans);
  font-size: clamp(.95rem, 1.05vw, 1.15rem);
  letter-spacing: .32em;
  text-decoration: none;
  transition: letter-spacing .35s cubic-bezier(.22, 1, .36, 1), background-color .3s, color .3s
}
.field-rail .fr:hover {
  letter-spacing: .52em
}
.field-rail .fr-anim {
  background: var(--orange);
  color: #fff
}
.field-rail .fr-game {
  background: #111;
  color: #fff
}
.field-rail .fr-int {
  background: #fff;
  color: #111;
  box-shadow: inset -1px 0 0 var(--line)
}
.field-rail .fr-int:hover {
  background: var(--orange);
  color: #fff
}
.field-rail .fr-anim:hover {
  background: var(--orange-deep, #e0350f)
}
.field-rail .fr-game:hover {
  background: #000
}
.sub-page {
  padding-left: var(--rail-w)
}
@media(max-width:800px) {
  .field-rail {
    display: none
  }
  .sub-page {
    padding-left: 0
  }
}
/* ---- 主選單：桌機也用漢堡選單、捲動懸浮固定 ---- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background: #fe5732;
  box-shadow: 0 2px 24px rgba(120, 50, 20, .14)
}
.sub-page .topbar {
  position: fixed;
  left: var(--rail-w);
  width: calc(100% - var(--rail-w));
  background: var(--orange)
}
/* 漢堡永遠顯示，橫向 nav 改成下拉面板 */
.nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px
}
.topbar nav {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: clamp(16px, 4vw, 40px);
  left: auto;
  min-width: 250px;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 54px rgba(120, 50, 20, .2)
}
.topbar:has(.nav-toggle[aria-expanded=true]) nav {
  display: flex
}
.topbar nav a {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  transition: background-color .2s, color .2s
}
.topbar nav a:hover {
  background: rgba(255, 79, 44, .1);
  color: var(--orange);
  text-decoration: none
}
.topbar nav .nav-cta {
  background: var(--ink);
  color: var(--orange);
  text-align: center;
  margin-top: 6px;
  font-weight: 700
}
.topbar nav .nav-cta:hover {
  background: #000;
  color: var(--orange)
}
@media(max-width:800px) {
  .sub-page .topbar {
    left: 0;
    width: 100%
  }
  .topbar nav {
    right: 0;
    left: 0;
    min-width: 0;
    border-radius: 0;
    border-inline: 0
  }
}
/* ---- Logo 改透明白字版（不再靠混色，杜絕色差框） ---- */
.brand img {
  mix-blend-mode: normal;
  width: 150px
}
.sub-page .brand img {
  mix-blend-mode: normal
}
/* ---- 漢堡鈕：三條線圓形按鈕 ---- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #111;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .3s
}
.nav-toggle:hover {
  transform: scale(1.08)
}
.nav-toggle i {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--orange);
  border: 0;
  margin: 0;
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s
}
.nav-toggle[aria-expanded=true] {
  background: #000
}
.nav-toggle[aria-expanded=true] i:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}
.nav-toggle[aria-expanded=true] i:nth-child(2) {
  opacity: 0
}
.nav-toggle[aria-expanded=true] i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}
/* ---- 海報設計語言：空心字 hashtag、氣泡框圖片、細黑曲線（參考講座海報） ---- */
.hash-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin: 0 0 34px;
  font: 700 clamp(1.5rem, 3.2vw, 2.7rem)/1.2 var(--display);
  letter-spacing: .02em
}
.hash-row span {
  color: transparent;
  -webkit-text-stroke: 2px #111;
  text-stroke: 2px #111
}
.hash-row span.hl-solid {
  color: var(--orange);
  -webkit-text-stroke: 0;
  text-stroke: 0
}
.blob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 44px);
  max-width: 1200px;
  position: relative
}
.blob-media {
  position: relative;
  margin: 0
}
.blob-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 52% 48% 55% 45%/48% 55% 45% 52%;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1)
}
.blob-media:nth-child(2) img {
  border-radius: 45% 55% 48% 52%/55% 45% 52% 48%
}
.blob-media:nth-child(3) img {
  border-radius: 55% 45% 52% 48%/45% 55% 48% 52%
}
.blob-media:hover img {
  transform: scale(1.04) rotate(-1deg)
}
.blob-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  left: -7%;
  bottom: 4%
}
.blob-media:nth-child(2)::before {
  left: auto;
  right: -6%;
  top: 6%;
  bottom: auto;
  background: #111
}
.blob-media::after {
  content: "✦";
  position: absolute;
  top: 4%;
  right: 2%;
  color: var(--orange);
  font: 700 1.6rem var(--display);
  animation: star-bob 2.8s ease-in-out infinite
}
.blob-media figcaption {
  margin-top: 14px;
  font: 500 .8rem var(--mono);
  letter-spacing: .1em;
  color: rgba(17, 17, 17, .6);
  text-align: center
}
.wire-curve {
  position: absolute;
  left: -90px;
  top: -30px;
  height: calc(100% + 60px);
  width: auto;
  pointer-events: none
}
.wire-curve path {
  fill: none;
  stroke: #111;
  stroke-width: 2
}
@media(max-width:800px) {
  .blob-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px
  }
  .wire-curve {
    display: none
  }
  .hash-row {
    gap: 6px 18px
  }
}
/* ---- 選單最終行為：桌機橫向選單（懸浮）、手機漢堡下拉 ---- */
@media(min-width:801px) {
  .nav-toggle {
    display: none
  }
  .topbar nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 1.8vw, 28px);
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none
  }
  .topbar nav a {
    padding: 4px 2px;
    border-radius: 0;
    color: #111;
    font-size: .9rem;
    font-weight: 500;
    background: transparent
  }
  .topbar nav a:hover {
    background: transparent;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 5px
  }
  .topbar nav .nav-cta {
    background: #111;
    color: var(--orange);
    padding: 10px 18px;
    border-radius: 99px;
    margin-top: 0;
    font-weight: 700
  }
  .topbar nav .nav-cta:hover {
    background: #000;
    color: var(--orange);
    text-decoration: none
  }
}
/* ---- topbar 不要陰影 ---- */
.topbar {
  box-shadow: none
}
/* ---- 手機漢堡選單：滿版圓形擴散＋交錯滑入 ---- */
@media(max-width:800px) {
  .topbar nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: -1;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 0 9vw;
    margin: 0;
    background: var(--orange);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    clip-path: circle(0px at calc(100% - 46px) 46px);
    visibility: hidden;
    transition: clip-path .68s cubic-bezier(.77, 0, .18, 1), visibility .68s
  }
  .topbar:has(.nav-toggle[aria-expanded=true]) nav {
    display: flex;
    clip-path: circle(165% at calc(100% - 46px) 46px);
    visibility: visible
  }
  .topbar nav::after {
    content: "TNDA";
    position: absolute;
    right: -4vw;
    bottom: -6vw;
    font: 700 42vw/1 var(--display);
    letter-spacing: -.08em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .35);
    pointer-events: none
  }
  .topbar nav a {
    position: relative;
    z-index: 1;
    padding: 12px 0;
    border-radius: 0;
    background: transparent;
    color: #111;
    font: 700 clamp(1.9rem, 8.6vw, 3rem)/1.15 var(--display);
    letter-spacing: -.03em;
    opacity: 0;
    transform: translateY(34px) skewY(3deg);
    transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1)
  }
  .topbar nav a:hover {
    background: transparent;
    color: #fff
  }
  .topbar:has(.nav-toggle[aria-expanded=true]) nav a {
    opacity: 1;
    transform: none
  }
  .topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(1) {
    transition-delay: .22s
  }
  .topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(2) {
    transition-delay: .28s
  }
  .topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(3) {
    transition-delay: .34s
  }
  .topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(4) {
    transition-delay: .4s
  }
  .topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(5) {
    transition-delay: .46s
  }
  .topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(6) {
    transition-delay: .54s
  }
  .topbar nav .nav-cta {
    margin-top: 26px;
    background: #111;
    color: var(--orange);
    padding: 14px 34px;
    border-radius: 99px;
    font: 700 1.15rem/1 var(--sans)
  }
  .topbar nav .nav-cta:hover {
    background: #000;
    color: var(--orange)
  }
  .nav-toggle {
    position: relative;
    z-index: 2
  }
}
@media(prefers-reduced-motion:reduce) {
  .topbar nav, .topbar nav a {
    transition: none !important
  }
}
/* ---- 最終選單架構：桌機「橫向快速選單＋漢堡」並存；漢堡＝滿版選單（全裝置） ---- */
.nav-toggle {
  display: flex
}
.quick-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-right: 18px;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1)
}
.quick-nav a {
  color: #111;
  font-size: .9rem;
  font-weight: 500
}
.quick-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 5px
}
.quick-nav .nav-cta {
  background: #111;
  color: var(--orange);
  padding: 9px 22px;
  border-radius: 99px;
  font-weight: 700
}
.quick-nav .nav-cta:hover {
  background: #000;
  text-decoration: none
}
@media(max-width:800px) {
  .quick-nav {
    display: none
  }
}
/* 滿版選單（桌機與手機共用，圓形擴散） */
.topbar nav {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: -1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: 0 clamp(9vw, 12vw, 180px);
  margin: 0;
  background: var(--orange);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  clip-path: circle(0px at calc(100% - 52px) 42px);
  visibility: hidden;
  transition: clip-path .68s cubic-bezier(.77, 0, .18, 1), visibility .68s
}
.topbar:has(.nav-toggle[aria-expanded=true]) nav {
  display: flex;
  clip-path: circle(165% at calc(100% - 52px) 42px);
  visibility: visible
}
.topbar nav::after {
  content: "TNDA";
  position: absolute;
  right: -3vw;
  bottom: -7vw;
  font: 700 34vw/1 var(--display);
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .35);
  pointer-events: none
}
.topbar nav a {
  position: relative;
  z-index: 1;
  padding: 10px 0;
  border-radius: 0;
  background: transparent;
  color: #111;
  font: 700 clamp(1.9rem, 5.2vh, 3.2rem)/1.15 var(--display);
  letter-spacing: -.03em;
  opacity: 0;
  transform: translateY(34px) skewY(3deg);
  transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1)
}
.topbar nav a:hover {
  background: transparent;
  color: #fff;
  text-decoration: none
}
.topbar:has(.nav-toggle[aria-expanded=true]) nav a {
  opacity: 1;
  transform: none
}
.topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(1) {
  transition-delay: .22s
}
.topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(2) {
  transition-delay: .28s
}
.topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(3) {
  transition-delay: .34s
}
.topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(4) {
  transition-delay: .4s
}
.topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(5) {
  transition-delay: .46s
}
.topbar:has(.nav-toggle[aria-expanded=true]) nav a:nth-child(6) {
  transition-delay: .54s
}
.topbar nav .nav-cta {
  margin-top: 26px;
  background: #111;
  color: var(--orange);
  padding: 14px 34px;
  border-radius: 99px;
  font: 700 1.15rem/1 var(--sans)
}
.nav-toggle {
  position: relative;
  z-index: 2
}
/* 捲動精簡：header 縮小動畫、橫向選單淡出 */
.topbar {
  transition: height .38s cubic-bezier(.22, 1, .36, 1), padding .38s cubic-bezier(.22, 1, .36, 1)
}
.brand img {
  transition: width .38s cubic-bezier(.22, 1, .36, 1)
}
.nav-toggle {
  transition: width .3s, height .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .3s
}
.topbar.is-compact {
  height: 60px;
  padding-top: 8px;
  padding-bottom: 8px
}
.topbar.is-compact .brand img {
  width: 128px
}
.topbar.is-compact .quick-nav {
  opacity: 0;
  transform: translateX(14px);
  pointer-events: none
}
.topbar.is-compact .nav-toggle {
  width: 42px;
  height: 42px
}
@media(prefers-reduced-motion:reduce) {
  .topbar, .brand img, .topbar nav, .topbar nav a, .quick-nav {
    transition: none !important
  }
}
/* ---- 報名開放資訊區上移（緊接標語下方，不再貼底） ---- */
@media(min-width:801px) {
  .hero {
    grid-template-rows: auto auto;
    align-content: start;
    row-gap: clamp(14px, 2.2vh, 26px)
  }
  .hero__notice {
    align-self: start;
    max-width: 860px;
    grid-column: 2;
    justify-self: end;
    width: min(58vw, 860px)
  }
}
/* ---- 滿版選單改靠上排列（不置中） ---- */
.topbar nav {
  justify-content: flex-start;
  padding-top: clamp(110px, 16vh, 160px)
}
/* ---- 移除黃色線條裝飾 ---- */
.hero::before, .hero::after {
  display: none
}
.scroll-progress {
  background: #111
}
/* ---- Hero padding 調整（使用者指定） ---- */
@media(min-width:801px) {
  .hero {
    padding: 120px 7vw 64px
  }
}
/* ---- Hero 拉高超過一屏，影片多顯示一點 ---- */
@media(min-width:801px) {
  .hero {
    min-height: 118svh
  }
  .hero__video {
    height: 56%;
    object-position: center 42%
  }
}
/* ---- 全站最大寬度：影片與內容區塊不滿版 ---- */
@media(min-width:801px) {
  .hero__video {
    width: 100%;
    max-width: 1920px;
    left: 0;
    right: 0;
    margin-inline: auto
  }
}
@media(min-width:1201px) {
  /* 背景滿版、內容鎖 1240px */
  .hero, .manifesto, .fields, .process, .timeline, .apply, .page-shell, footer, .footer-contact {
    padding-inline: max(7vw, calc((100% - 1240px)/2))
  }
  .topbar {
    padding-inline: max(4vw, calc((100% - 1400px)/2))
  }
  .page-shell .experience-banner {
    margin-inline: 0
  }
  #main > .space-banner, #main > .experience-banner {
    max-width: 1240px;
    margin-inline: auto
  }
}
/* ---- quick-nav 靠右 ---- */
.quick-nav {
  margin-left: auto
}
/* ---- Logo 填滿左右：影片放大 132%，畫面內留白裁掉，筆畫貼齊兩緣 ---- */
@media(min-width:801px) {
  .hero__video {
    width: 132%;
    max-width: none;
    left: -16%;
    right: auto;
    margin-inline: 0
  }
}
/* ---- 主選單字大一級、影片下移一點 ---- */
.quick-nav a {
  font-size: 1rem
}
.quick-nav .nav-cta {
  font-size: 1rem
}
/* 箭頭按鈕：降低高度、增加橫向留白，讓文字與箭頭更舒展 */
.button {
  padding: 12px 20px 12px 34px;
  gap: 34px
}
.nav-cta {
  padding-left: 26px;
  padding-right: 22px
}
/* Hero 收在報名資訊下方，讓首頁圖片緊接 hero__notice */
@media(min-width:801px) {
  .hero {
    min-height: auto;
    padding-bottom: 0
  }
}
@media(min-width:801px) {
  .hero__video {
    object-position: center 28%
  }
}
/* ---- 照片橫幅滿版（寬度貼齊兩緣；文字內容仍鎖 1240px） ---- */
@media(min-width:1201px) {
  #main > .space-banner, #main > .experience-banner {
    max-width: none;
    margin-inline: 0;
    width: 100%
  }
  .page-shell .experience-banner {
    width: calc(100vw - var(--rail-w));
    margin-left: calc(50% - (100vw - var(--rail-w))/2);
    margin-right: 0
  }
}
@media(max-width:800px) {
  .page-shell .experience-banner {
    width: auto;
    margin-left: -7vw;
    margin-right: -7vw
  }
}
/* ---- 滿版選單：黑底橙字 ---- */
.topbar nav {
  background: #111
}
.topbar nav a {
  color: var(--orange)
}
.topbar nav a:hover {
  color: #fff
}
.topbar nav::after {
  -webkit-text-stroke: 2px rgba(255, 79, 44, .32)
}
.topbar nav .nav-cta {
  background: var(--orange);
  color: #111
}
.topbar nav .nav-cta:hover {
  background: #fff;
  color: #111
}
.nav-toggle[aria-expanded=true] {
  background: var(--orange)
}
.nav-toggle[aria-expanded=true] i {
  background: #111
}
/* 選單開啟時隱藏橫向快速選單 */
.topbar:has(.nav-toggle[aria-expanded=true]) .quick-nav {
  opacity: 0;
  pointer-events: none
}
/* ---- 滿版選單：選項加英文小字 ---- */
.topbar nav a[data-en]::after {
  content: attr(data-en);
  display: block;
  font: 500 .62rem/1 var(--mono);
  letter-spacing: .32em;
  color: rgba(255, 255, 255, .5);
  margin-top: 5px;
  -webkit-text-stroke: 0
}
.topbar nav a[data-en]:hover::after {
  color: rgba(255, 255, 255, .85)
}
/* 影片再往上一點點 */
@media(min-width:801px) {
  .hero__video {
    object-position: center 34%
  }
}
/* 影片往下收，避免上方過早出現主視覺 */
@media(min-width:801px) {
  .hero__video {
    height: 56%;
    bottom: -8%;
    object-position: center 42%
  }
}
/* hero__intro margin（使用者指定） */
.hero__intro {
  margin: 28px 0 20px
}
/* ---- 多行大標題行高調高，避免上下行重疊 ---- */
.manifesto h2, .process h2, .timeline h2 {
  line-height: 1.06
}
.page-shell h1 {
  line-height: 1.02
}
.manifesto__quote {
  line-height: 1.12
}
.apply h2 {
  line-height: 1.02
}
/* ---- 選單幽靈字改用 tnda.svg（橘色遮罩水印，右下角） ---- */
.topbar nav::after {
  content: "";
  left: auto;
  top: auto;
  right: 0;
  bottom: -1vw;
  width: min(80vw, 1040px);
  height: auto;
  aspect-ratio: 1012.72 / 248.6;
  background: var(--orange);
  -webkit-mask: url("../images/tnda.svg") no-repeat right bottom/contain;
  mask: url("../images/tnda.svg") no-repeat right bottom/contain;
  -webkit-text-stroke: 0;
  font: 0/0 a;
  letter-spacing: 0;
  opacity: .18;
}
/* ---- Hero 按鈕文字加粗 ---- */
.hero .button {
  font-weight: 900
}
/* ---- 選單三大學程群組圖 ---- */
.menu-fields {
  position: absolute;
  z-index: 2;
  right: clamp(48px, 7vw, 130px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px)
}
.menu-fields a {
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateX(26px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1)
}
.topbar:has(.nav-toggle[aria-expanded=true]) .menu-fields a {
  opacity: 1;
  transform: none
}
.topbar:has(.nav-toggle[aria-expanded=true]) .menu-fields a:nth-child(1) {
  transition-delay: .4s
}
.topbar:has(.nav-toggle[aria-expanded=true]) .menu-fields a:nth-child(2) {
  transition-delay: .48s
}
.topbar:has(.nav-toggle[aria-expanded=true]) .menu-fields a:nth-child(3) {
  transition-delay: .56s
}
.menu-fields img {
  width: clamp(92px, 9vw, 132px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1)
}
.menu-fields a:hover img {
  transform: scale(1.06) rotate(-2deg)
}
.menu-fields span {
  display: flex;
  flex-direction: column;
  font: 900 clamp(1.05rem, 1.5vw, 1.35rem)/1.2 var(--sans);
  color: #fff
}
.menu-fields em {
  font: 500 .58rem var(--mono);
  letter-spacing: .24em;
  color: var(--orange);
  margin-top: 4px
}
@media(max-width:900px) {
  .menu-fields {
    position: static;
    transform: none;
    flex-direction: row;
    gap: 12px;
    margin-top: 40px
  }
  .topbar nav {
    justify-content: flex-start
  }
  .menu-fields a {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center
  }
  .menu-fields img {
    width: clamp(72px, 22vw, 96px)
  }
  .menu-fields span {
    font-size: .9rem
  }
}
/* ---- 三大學程卡：群組圖無縫融入、修正橘卡標籤 ---- */
.info-grid--fields .field-group-image {
  background: transparent;
  object-fit: cover;
  height: clamp(200px, 20vw, 260px)
}
.info-grid--fields .field--orange b {
  color: #111
}
.info-grid--fields .field b {
  position: relative;
  z-index: 1
}
/* ---- 三大學程下方 tnda.svg 水印帶 ---- */
.fields-mark {
  width: 100%;
  max-width: 1240px;
  margin: clamp(40px, 5vw, 72px) auto 0;
  height: clamp(56px, 8vw, 120px);
  background: #111;
  -webkit-mask: url("../images/tnda.svg") no-repeat center/contain;
  mask: url("../images/tnda.svg") no-repeat center/contain;
  opacity: .1
}
/* ---- 首頁 fields 卡：群組圖 + 標題行高修正 ---- */
.field-grid .field-group-image {
  display: block;
  width: 100%;
  height: clamp(170px, 15vw, 210px);
  object-fit: cover;
  background: transparent;
  margin-bottom: 18px
}
.field-grid .field h3 {
  line-height: .95;
  margin: 16px 0 22px
}
.field-grid .field span:first-child {
  color: inherit
}
.field-grid .field--orange span:first-child {
  color: #111
}
/* ---- 影片改為流內、緊貼 hero__notice 下方（不再絕對貼底） ---- */
@media(min-width:801px) {
  .hero {
    min-height: 0;
    grid-template-rows: auto auto auto
  }
  .hero__video {
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    width: 132vw;
    max-width: none;
    margin-left: calc(50% - 66vw);
    margin-top: clamp(20px, 3.2vh, 46px);
    transform: none;
    height: clamp(300px, 44vh, 600px);
    object-fit: cover;
    object-position: center 34%;
  }
}
/* ---- Hero 修正：標題不裁切、影片填滿無左空隙且上移 ---- */
@media(min-width:801px) {
  .hero__copy {
    width: min(64vw, 1020px)
  }
  .hero h1 {
    font-size: clamp(2.6rem, 7vw, 7rem)
  }
  .hero__video {
    width: 150vw;
    margin-left: calc(50% - 75vw);
    margin-top: clamp(4px, 1vh, 14px);
    height: clamp(280px, 42vh, 560px);
    object-position: center 32%
  }
}
/* ---- 標題保證不裁：縮字級、放寬 copy、移除舊上限 ---- */
@media(min-width:801px) {
  .hero__copy {
    max-width: 1100px;
    width: min(64vw, 1100px)
  }
  .hero h1 {
    font-size: clamp(2.2rem, 6.1vw, 6.4rem)
  }
}
/* ---- 影片改絕對定位在底部（脫離 grid，不撐寬欄位）；hero padding-bottom 預留空間 ---- */
@media(min-width:801px) {
  .hero {
    min-height: 0;
    grid-template-rows: auto auto;
    padding-bottom: clamp(280px, 42vh, 560px)
  }
  .hero__video {
    position: absolute;
    inset: auto auto 0 50%;
    top: auto;
    right: auto;
    transform: translateX(-50%);
    grid-column: auto;
    grid-row: auto;
    width: 134vw;
    max-width: none;
    height: clamp(280px, 42vh, 560px);
    margin: 0;
    object-fit: cover;
    object-position: center 32%
  }
}
/* ---- 標題放大（右緣仍不裁）＋ quick-nav 捲動時保持顯示 ---- */
@media(min-width:801px) {
  .hero h1 {
    font-size: clamp(2.4rem, 6.8vw, 7.6rem)
  }
}
.topbar.is-compact .quick-nav {
  opacity: 1;
  transform: none;
  pointer-events: auto
}
/* ---- 首頁兩張橫幅：sticky 疊層（第一張固定→第二張疊上→一起離開） ---- */
.stack-banners > figure {
  width: 100%;
  max-width: none;
  margin: 0
}
.stack-banners > .space-banner {
  z-index: 1
}
.stack-banners > .experience-banner {
  z-index: 2
}
@media(min-width:801px) {
  .stack-banners {
    position: relative
  }
  .stack-banners > figure {
    position: sticky;
    top: 0;
    height: auto;
    min-height: 0
  }
  .stack-banners > figure img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: fill
  }
  .stack-banners > .experience-banner figcaption {
    bottom: 56px
  }
  .stack-banners > .space-banner figcaption {
    bottom: 40px
  }
}
@media(max-width:800px) {
  .stack-banners > .space-banner img {
    min-height: 260px;
    max-height: 300px
  }
  .stack-banners > .experience-banner {
    min-height: 220px
  }
}
/* ---- space-banner 標語放大 ---- */
.stack-banners > .space-banner figcaption strong {
  font-size: clamp(1.9rem, 4.2vw, 4rem)
}
/* ---- WHY TNDA 引言卡：海報風（黑旗小標／虛線軌道／半色調點／星芒） ---- */
.manifesto__quote {
  grid-column: 2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 56px;
  padding: clamp(38px, 4vw, 62px) clamp(34px, 3.6vw, 58px);
  background: var(--orange);
  color: #111;
  border-radius: 0px;
}
.manifesto__kicker {
  display: inline-block;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
  background: #111;
  color: var(--orange);
  padding: 9px 30px 9px 16px;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  font: 500 .7rem var(--mono);
  letter-spacing: .2em;
}
.manifesto__quote .mq-text {
  margin: 0;
  position: relative;
  z-index: 1;
  color: #111;
  max-width: 14em;
  font: 700 clamp(2.2rem, 4.2vw, 4.4rem)/1.12 var(--sans);
  letter-spacing: -.01em;
}
.mq-orbit {
  position: absolute;
  top: -30px;
  right: -26px;
  width: clamp(160px, 17vw, 250px);
  height: auto;
  z-index: 0;
  overflow: visible
}
.mq-orbit ellipse {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-dasharray: 5 10;
  opacity: .85;
  transform: rotate(-16deg);
  transform-origin: center
}
.mq-orbit circle {
  fill: #fff;
  opacity: .85
}
.mq-dots {
  position: absolute;
  left: -8px;
  bottom: -8px;
  width: 150px;
  height: 104px;
  z-index: 0;
  color: #111;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.8px);
  background-size: 13px 13px;
  -webkit-mask: radial-gradient(130px 100px at 0% 100%, #000 42%, transparent 74%);
  mask: radial-gradient(130px 100px at 0% 100%, #000 42%, transparent 74%);
  opacity: .5;
}
.mq-sparks {
  position: absolute;
  right: clamp(34px, 5vw, 86px);
  bottom: clamp(30px, 5vh, 64px);
  z-index: 0;
  display: flex;
  gap: 8px;
  align-items: flex-end
}
.mq-sparks svg {
  fill: #fff;
  flex: none
}
.mq-sparks svg:nth-child(1) {
  width: clamp(58px, 7vw, 100px);
  height: auto;
  opacity: .95
}
.mq-sparks svg:nth-child(2) {
  width: clamp(30px, 3.6vw, 52px);
  height: auto;
  opacity: .8
}
.mq-sparks svg:nth-child(3) {
  width: clamp(20px, 2.4vw, 34px);
  height: auto;
  opacity: .62
}
@media(max-width:800px) {
  .manifesto__quote {
    margin-top: 44px
  }
  .mq-orbit {
    width: 150px;
    top: -20px;
    right: -16px
  }
  .mq-sparks {
    right: 22px;
    bottom: 22px
  }
}
/* ---- 頁尾社群連結 ---- */
.footer-social {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 5px
}
.footer-social a {
  font: 500 .8rem var(--mono);
  letter-spacing: .1em
}
.footer-social a:hover {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 4px
}
/* ---- Hero copy 對齊「報名開放」那條線（同寬同右緣），標題縮到剛好塞進 ---- */
@media(min-width:801px) {
  .hero__copy {
    max-width: 860px;
    width: min(58vw, 860px)
  }
  .hero h1 {
    font-size: clamp(2rem, 6.3vw, 6.4rem)
  }
}
/* ---- fields 區塊壓底圖（暗色氛圍，卡片仍清晰） ---- */
.fields {
  position: relative;
  overflow: hidden
}
.fields > * {
  position: relative;
  z-index: 1
}
.fields::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/gallery/floor-projection.jpg") center/cover no-repeat;
  opacity: .3
}
/* ---- 頁首社群圖示 FB/IG/YT：無框，hover 彈跳放大＋微旋轉 ---- */
.topbar-social {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 2px 0 16px
}
.topbar-social a {
  display: inline-flex;
  color: #111;
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1)
}
.topbar-social a:hover, .topbar-social a:focus-visible {
  transform: translateY(-4px) scale(1.22) rotate(-10deg)
}
.topbar-social svg {
  width: 21px;
  height: 21px;
  display: block
}
@media(max-width:800px) {
  .topbar-social {
    display: none
  }
}
/* ---- 電腦版隱藏漢堡（quick-nav 已提供桌機導覽）---- */
@media(min-width:801px) {
  .nav-toggle {
    display: none
  }
}
/* ---- 點擊 SVG 縮小 ---- */
.click-frame {
  width: 22px;
  height: 16px
}
/* ---- 拖曳軌跡：密集連續但每段較短 ---- */
.cursor-stroke {
  width: 28px;
  height: 4px;
  animation-duration: .42s
}
/* ---- 引言卡虛線加大 ---- */
.mq-orbit ellipse {
  stroke-width: 3.2;
  stroke-dasharray: 11 13
}
/* ---- Hero 標題再放大（左緣仍對齊線，超寬時往右溢出、不裁切）---- */
@media(min-width:801px) {
  .hero h1 {
    font-size: clamp(2.2rem, 7vw, 7.4rem)
  }
  .hero__copy {
    overflow: visible
  }
}
/* ---- Hero 115 印記縮小 ---- */
@media(min-width:801px) {
  .hero__stamp {
    font-size: 5rem
  }
}
/* ---- section-no 放大 ---- */
.section-no {
  font-size: .8rem;
  letter-spacing: .14em
}
/* ---- 拖曳軌跡在橘色底上變黑 ---- */
.cursor-stroke.is-on-orange {
  background: #111
}
/* ---- 主選單 hover：放大＋歪頭（同社群圖示）---- */
.quick-nav a:not(.nav-cta) {
  display: inline-block;
  transform-origin: center;
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1)
}
.quick-nav a:not(.nav-cta):hover, .quick-nav a:not(.nav-cta):focus-visible {
  transform: translateY(-3px) scale(1.16) rotate(-7deg)
}
/* ---- Hero 報名資訊：時間放大、與「報名開放」基線對齊 ---- */
.hero__notice span, .hero__notice small {
  font-size: .86rem
}
@media(min-width:801px) {
  .hero__notice {
    align-items: baseline
  }
}
/* ---- Hero 115 縮小、與 OPEN CALL 靠近 ---- */
@media(min-width:801px) {
  .hero__stamp {
    font-size: 3.4rem;
    line-height: .92
  }
}
.hero__stamp {
  display: inline-flex;
  align-items: baseline;
  gap: 14px
}
.hero__stamp span {
  display: inline;
  margin: 0;
  font-size: .98rem;
  letter-spacing: .14em
}
/* ---- 星星全部改白 ---- */
.space-banner::before, .experience-banner::before, .experience-card::before, .experience-card--left::before {
  color: #fff
}
/* ---- 115 再縮小、字距放開；影片標籤上移 ---- */
@media(min-width:801px) {
  .hero__stamp {
    font-size: 3rem;
    letter-spacing: 0
  }
}
.hero__video-label {
  bottom: 140px
}
/* ---- 影片標籤再上移 ~100px；標題加字距＋放大 ---- */
.hero__video-label {
  bottom: 240px
}
@media(min-width:801px) {
  .hero h1 {
    font-size: clamp(2.2rem, 7.6vw, 8rem);
    letter-spacing: 0
  }
}
/* ---- 標題再放大 ---- */
@media(min-width:801px) {
  .hero h1 {
    font-size: clamp(2.4rem, 7.9vw, 9rem)
  }
}
/* ---- 標題再放大＋字距再密＋往下 ---- */
@media(min-width:801px) {
  .hero h1 {
    font-size: clamp(2.6rem, 8.6vw, 9.8rem);
    letter-spacing: -.05em
  }
  .hero__copy {
    transform: translateY(36px)
  }
}
/* ---- 影片標籤再上移 30px ---- */
.hero__video-label {
  bottom: 270px
}
/* ---- 標題大小／字距 還原為備份 tnda-g3拷貝3 的設定 ---- */
@media(min-width:801px) {
  .hero h1 {
    font-size: clamp(3rem, 8.6vw, 8rem);
    letter-spacing: -.09em
  }
}
/* ---- 115 OPEN CALL 字距收密 ---- */
.hero__stamp {
  letter-spacing: -.03em;
  gap: 10px
}
.hero__stamp span {
  letter-spacing: .08em
}
/* ---- 區塊大標 h2 放大 ---- */
.manifesto h2, .process h2, .timeline h2 {
  font-size: clamp(3.4rem, 7.4vw, 8.2rem)
}
/* ---- 115 OPEN CALL 往下 ---- */
@media(min-width:801px) {
  .hero__stamp {
    margin-top: 70px
  }
}
/* ---- hero 內文加寬 ---- */
.hero__intro {
  max-width: 43rem
}
/* ---- 115 OPEN CALL 再往下約 100px ---- */
@media(min-width:801px) {
  .hero__stamp {
    margin-top: 170px
  }
}
/* ---- 115 OPEN CALL margin-top 150px ---- */
@media(min-width:801px) {
  .hero__stamp {
    margin-top: 150px
  }
}
/* ---- 115 OPEN CALL margin-top 160px ---- */
@media(min-width:801px) {
  .hero__stamp {
    margin-top: 160px
  }
}
/* ---- 社群圖示與立即報名靠近 ---- */
.topbar-social {
  margin-left: 4px
}
/* ---- field__cross 字放大 ---- */
.field__cross {
  font-size: 1.1rem
}
/* ---- mq-orbit 放大一倍 ---- */
.mq-orbit {
  width: clamp(320px, 34vw, 500px)
}
@media(max-width:800px) {
  .mq-orbit {
    width: 300px
  }
}
/* ---- 社群與立即報名再收近 ---- */
.topbar-social {
  margin-left: -12px
}
/* ---- mq-orbit 往右推出卡片、右緣裁切破格 ---- */
@media(min-width:801px) {
  .mq-orbit {
    right: -140px;
    top: -46px;
    width: clamp(360px, 38vw, 560px)
  }
}
/* ---- 立即報名 左側加寬一點 ---- */
.nav-cta {
  padding-left: 34px
}
/* ---- 虛線橢圓往上 ---- */
@media(min-width:801px) {
  .mq-orbit {
    top: -100px
  }
}
/* ---- quick-nav 右側：立即報名前加間距 ---- */
.quick-nav .nav-cta {
  margin-left: 0px;
  margin-right: 10px
}
/* ---- 虛線橢圓再細、再往上 ---- */
.mq-orbit ellipse {
  stroke-width: 2.4
}
@media(min-width:801px) {
  .mq-orbit {
    top: -140px
  }
}
/* ---- 引言卡下方 TNDA 字標簽名條 ---- */
.mq-wordmark {
  position: absolute;
  z-index: 0;
  left: clamp(34px, 3.6vw, 58px);
  right: clamp(34px, 3.6vw, 58px);
  bottom: 40px;
  width: auto;
  height: auto;
  opacity: .92;
}
@media(max-width:800px) {
  .mq-wordmark {
    bottom: 18px
  }
}
/* ---- 引言卡 margin-top 0 ---- */
.manifesto__quote {
  margin-top: 0
}
/* ---- 引言卡下方 padding 增加 ---- */
.manifesto__quote {
  padding-bottom: clamp(72px, 6.5vw, 104px)
}
/* ---- 引言卡星芒往上（離開字標）---- */
.mq-sparks {
  bottom: clamp(104px, 11vh, 150px)
}
/* ---- 引言卡小標斜角變緩 ---- */
.manifesto__kicker {
  clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%)
}
/* ---- 首頁三大區比照 why.html：淺底、移除深色底圖 ---- */
.fields {
  background: var(--paper);
  color: var(--ink)
}
.fields::before {
  content: none
}
/* ---- 三大區加回圖片壓底（深底＋紋理，卡片浮在上方）---- */
.fields {
  background: #111;
  color: var(--paper);
  position: relative;
  overflow: hidden
}
.fields > * {
  position: relative;
  z-index: 1
}
.fields::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/gallery/floor-projection.jpg") center/cover no-repeat;
  opacity: .42
}
/* ---- MAKE YOUR MOVE 放大 ---- */
.apply__graphic {
  font-size: clamp(5rem, 13vw, 14rem)
}
/* ---- TNDA 動態識別區（禾標記橘底循環）---- */
.brand-motion {
  background: var(--orange);
  line-height: 0;
  overflow: hidden
}
.brand-motion video {
  display: block;
  width: 100%;
  height: clamp(340px, 52vh, 600px);
  object-fit: contain;
  background: var(--orange)
}
@media(max-width:800px) {
  .brand-motion video {
    height: clamp(220px, 42vh, 360px)
  }
}
/* ---- 報名連結即將開放 按鈕：黑底橙字 ---- */
.button--light {
  background: #111;
  color: var(--orange)
}
/* ---- 影片放進引言卡：字標與影片改隨內容排列 ---- */
.mq-wordmark {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  margin-top: clamp(24px, 3.4vh, 44px);
  opacity: .92
}
.mq-video {
  display: block;
  width: 100%;
  height: clamp(200px, 26vh, 300px);
  object-fit: contain;
  background: var(--orange);
  margin-top: 14px
}
.manifesto__quote {
  padding-bottom: clamp(40px, 4vw, 60px)
}
@media(max-width:800px) {
  .mq-wordmark {
    margin-top: 26px
  }
}
/* ---- 卡內影片 100% 寬、自然高度 ---- */
.mq-video {
  height: auto
}
/* ---- 頁腳版權列（用中文字型，© 才顯示正常）---- */
footer {
  flex-wrap: wrap
}
footer .copyright {
  flex-basis: 100%;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .02em;
  opacity: .68
}
@media(max-width:800px) {
  footer .copyright {
    margin-top: 8px
  }
}
/* ---- 報名按鈕字加粗、下方文案放大 ---- */
.button--light {
  font-weight: 700
}
.apply small {
  font-size: .84rem
}
/* ---- 引言卡星芒移到上面 ---- */
.mq-sparks {
  top: clamp(150px, 19vh, 230px);
  bottom: auto
}
/* ---- 內頁 H1 縮小一點 ---- */
.page-shell h1 {
  font-size: clamp(3.4rem, 8.5vw, 7.6rem)
}
/* ---- fields 三大區視差：reveal 改純淡入，交給 JS 做上下位移 ---- */
.info-grid--fields .field.reveal-on-scroll {
  transform: none;
  transition: opacity .8s ease
}
.info-grid--fields .field {
  will-change: transform
}
/* ---- page-lead 最大寬度 ---- */
.page-lead {
  max-width: 950px
}
/* ---- 計畫緣起：左標題／右內容兩欄 ---- */
.detail-split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(56px, 8vh, 104px)
}
.detail-split .detail-head {
  margin-top: 0
}
.detail-split .detail-lead {
  margin-bottom: 0
}
.detail-split .info-grid {
  margin-top: 0
}
@media(max-width:800px) {
  .detail-split {
    display: block
  }
  .detail-split .info-grid {
    margin-top: 28px
  }
}
/* ---- 計畫緣起標題再往左；info-grid 卡片滑過不用特效 ---- */
.detail-split__head {
  margin-left: clamp(-120px, -7vw, -50px)
}
.info-grid article:hover {
  transform: none;
  box-shadow: none
}
/* ---- 計畫緣起：標題 + 3 欄文字 ---- */
.detail-split {
  grid-template-columns: minmax(0, .62fr) minmax(0, 2.7fr)
}
.detail-split .info-grid {
  grid-template-columns: repeat(3, 1fr)
}
/* ---- 計畫緣起標題移回右邊（靠近內容欄）---- */
.detail-split__head {
  margin-left: 0;
  text-align: right;
  padding-right: clamp(12px, 1.6vw, 30px)
}
/* ---- 計畫緣起三欄標題：比「計畫緣起」小一點 ---- */
.detail-split .info-grid h2 {
  font-size: clamp(1.5rem, 2.3vw, 2.2rem)
}
/* ---- 計畫緣起欄標題行高加大 ---- */
.detail-split .info-grid h2 {
  line-height: 1.2
}
/* ---- info-grid article 內距調整 ---- */
.info-grid article {
  padding: 20px 10px 32px
}
/* ---- info-grid article 內距再縮 ---- */
.info-grid article {
  padding: 20px 5px 32px
}
/* ---- 計畫緣起欄標題再小 2px ---- */
.detail-split .info-grid h2 {
  font-size: clamp(1.4rem, 2.15vw, 2.05rem)
}
/* ---- 有色學程方塊 padding 較大；純文字維持窄 ---- */
.info-grid--fields article {
  padding: 20px 40px 32px
}
/* ---- 核心精神：說明首句獨立粗體標題 ---- */
.detail-sub {
  font: 700 clamp(1.5rem, 2.4vw, 2.15rem)/1.3 var(--sans);
  color: #111;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  max-width: 900px
}
.detail-split__body .detail-lead {
  max-width: 900px
}
/* ---- 首句粗標題縮到約 60% ---- */
.detail-sub {
  font-size: clamp(1rem, 1.45vw, 1.3rem)
}
/* ---- 首句粗標題 22px ---- */
.detail-sub {
  font-size: clamp(1.15rem, 1.55vw, 1.375rem)
}
/* ---- 核心精神說明與下方線之間留間距 ---- */
.detail-split__body .detail-lead {
  margin-bottom: clamp(30px, 4vh, 54px)
}
/* ---- 互動設計卡加橙色外框 ---- */
.field--green {
  border: 2px solid var(--orange)
}
/* ---- 核心精神首句上方加黑線 ---- */
.detail-sub {
  border-top: 2px solid #111;
  padding-top: clamp(16px, 2.2vh, 28px);
  max-width: none
}
/* ---- 互動設計卡橙框（覆蓋 info-grid--fields article border:0）---- */
.info-grid--fields .field--green {
  border: 1px solid var(--orange)
}
/* ---- 內頁學程方塊群組圖高度 190px（首頁不變）---- */
.sub-page .info-grid--fields .field-group-image {
  height: 190px
}
/* ---- 純文字 info-grid 的 × 副標改橙色（有色卡不動）---- */
.info-grid:not(.info-grid--fields) .field__cross {
  color: var(--orange)
}
/* ---- detail-lead 下間距縮短 ---- */
.detail-split__body .detail-lead {
  margin-bottom: clamp(14px, 2vh, 24px)
}
/* ---- 內頁 experience-banner 高度縮小（固定高度＋cover 裁切）---- */
.sub-page .page-shell .experience-banner {
  min-height: 0;
  height: clamp(720px, 28vw, 720px)
}
.sub-page .page-shell .experience-banner img, .sub-page .page-shell .experience-banner video {
  height: 100%;
  min-height: 0;
  object-fit: cover
}
/* ---- 甄選時程橫向時間軸（TNDA 風格）---- */
.roadmap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.8vw, 30px);
  margin: 24px 0 8px
}
.roadmap__head {
  display: flex;
  align-items: center;
  gap: 12px
}
.roadmap__head::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ink);
  opacity: .26
}
.roadmap__phase--last .roadmap__head::after {
  display: none
}
.roadmap__marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: conic-gradient(var(--orange) calc(var(--p, 0)*1%), #fff 0);
  flex: none;
  box-sizing: border-box
}
.roadmap__name {
  font: 700 clamp(1.05rem, 1.5vw, 1.4rem)/1 var(--display);
  letter-spacing: -.03em;
  white-space: nowrap
}
.roadmap__en {
  font: 500 .6rem var(--mono);
  letter-spacing: .16em;
  color: var(--orange);
  margin: 12px 0 20px
}
.roadmap__items {
  list-style: none;
  margin: 0;
  padding: 0
}
.roadmap__items li {
  border-top: 1px solid var(--line);
  padding: 14px 0 4px
}
.roadmap__items b {
  display: block;
  font-weight: 700;
  font-size: .96rem;
  margin-bottom: 0px;
  letter-spacing: -.01em;
  line-height: 1.3
}
.roadmap__items time {
  font: 500 .8rem var(--mono);
  ;
  letter-spacing: .02em
}
@media(max-width:860px) {
  .roadmap {
    grid-template-columns: 1fr;
    gap: 0
  }
  .roadmap__phase {
    position: relative;
    padding: 0 0 26px 26px;
    margin-left: 16px;
    border-left: 2px solid var(--line)
  }
  .roadmap__phase--last {
    border-left-color: transparent
  }
  .roadmap__head::after {
    display: none
  }
  .roadmap__marker {
    position: absolute;
    left: -18px;
    top: 0;
    width: 30px;
    height: 30px
  }
  .roadmap__en {
    margin: 8px 0 14px
  }
}
/* ---- 首頁 hero 影片再往上 ---- */
@media(min-width:801px) {
  .hero__video {
    bottom: clamp(24px, 4.5vh, 64px)
  }
}
/* ---- hero 影片 bottom 30px ---- */
@media(min-width:801px) {
  .hero__video {
    bottom: 30px
  }
}
/* ---- roadmap 7 欄調整＋說明註記 ---- */
.roadmap--7 {
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(8px, 1vw, 18px)
}
.roadmap--7 .roadmap__marker {
  width: 26px;
  height: 26px;
  border-width: 2px
}
.roadmap--7 .roadmap__name {
  font-size: clamp(1.1rem, 1.3vw, 1.45rem)
}
.roadmap--7 .roadmap__head {
  gap: 15px
}
.roadmap__note {
  font: 500 .68rem/1.45 var(--sans);
  color: rgba(17, 17, 17, .58);
  margin: 7px 0 0;
  letter-spacing: 0
}
@media(max-width:860px) {
  .roadmap--7 {
    grid-template-columns: 1fr
  }
  .roadmap--7 .roadmap__name {
    font-size: 1.6rem
  }
}
/* ---- roadmap 第一階段分支結構 ---- */
.roadmap--7 {
  grid-template-columns: 1fr 2fr 1fr 1.15fr 1fr 1fr 1fr
}
.roadmap__phase--wide .roadmap__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}
.roadmap__sub {
  margin-top: 14px
}
.roadmap__subtitle {
  color: var(--orange);
  font: 700 clamp(1rem, 1.15vw, 1.15rem)/1.2 var(--display);
  letter-spacing: -.02em;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px
}
.roadmap__sub .roadmap__items li.nb {
  border-top: 0;
  padding-top: 8px
}
@media(max-width:860px) {
  .roadmap--7 {
    grid-template-columns: 1fr
  }
  .roadmap__phase--wide .roadmap__cols {
    grid-template-columns: 1fr
  }
  /* 第一階段改依時序排列：7/27 報名截止 → 7/28 指定實作題 → 7/30 結果公告 */
  .roadmap__phase--wide {
    display: flex;
    flex-direction: column
  }
  .roadmap__phase--wide .roadmap__cols {
    display: contents
  }
  .roadmap__phase--wide .roadmap__head {
    order: 0
  }
  .roadmap__phase--wide .roadmap__cols > .roadmap__items:nth-child(1) {
    order: 1
  }
  .roadmap__phase--wide .roadmap__sub {
    order: 2
  }
  .roadmap__phase--wide .roadmap__cols > .roadmap__items:nth-child(2) {
    order: 3
  }
}
/* ---- roadmap marker 獨立一行置中、name 置中 ---- */
.roadmap {
  position: relative
}
.roadmap::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--ink);
  opacity: .18;
  z-index: 0
}
.roadmap__phase {
  position: relative;
  z-index: 1
}
.roadmap__head {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px
}
.roadmap__head::after {
  display: none
}
.roadmap__name {
  text-align: center
}
@media(max-width:860px) {
  .roadmap::before {
    display: none
  }
  .roadmap__head {
    flex-direction: row
  }
}
/* ---- 時間軸進場動畫 ---- */
.roadmap--anim::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.6, 0, .2, 1) .1s
}
.roadmap--anim.roadmap--in::before {
  transform: scaleX(1)
}
.roadmap--anim .roadmap__marker {
  transform: scale(0);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s)
}
.roadmap--anim .roadmap__name, .roadmap--anim .roadmap__items, .roadmap--anim .roadmap__cols, .roadmap--anim .roadmap__sub {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease var(--d2, 0s), transform .55s cubic-bezier(.22, 1, .36, 1) var(--d2, 0s)
}
.roadmap--in .roadmap__marker {
  transform: scale(1)
}
.roadmap--in .roadmap__name, .roadmap--in .roadmap__items, .roadmap--in .roadmap__cols, .roadmap--in .roadmap__sub {
  opacity: 1;
  transform: none
}
.roadmap__phase:nth-child(1) {
  --d: .18s;
  --d2: .28s
}
.roadmap__phase:nth-child(2) {
  --d: .30s;
  --d2: .40s
}
.roadmap__phase:nth-child(3) {
  --d: .42s;
  --d2: .52s
}
.roadmap__phase:nth-child(4) {
  --d: .54s;
  --d2: .64s
}
.roadmap__phase:nth-child(5) {
  --d: .66s;
  --d2: .76s
}
.roadmap__phase:nth-child(6) {
  --d: .78s;
  --d2: .88s
}
.roadmap__phase:nth-child(7) {
  --d: .90s;
  --d2: 1s
}
@media(prefers-reduced-motion:reduce) {
  .roadmap--anim::before, .roadmap--anim .roadmap__marker, .roadmap--anim .roadmap__name, .roadmap--anim .roadmap__items, .roadmap--anim .roadmap__cols, .roadmap--anim .roadmap__sub {
    transform: none;
    opacity: 1;
    transition: none
  }
}
/* ---- 標題+1欄（單欄內文）＋編號清單 ---- */
.detail-split--single .detail-split__body {
  border-top: 2px solid #111;
  padding-top: clamp(16px, 2.2vh, 26px);
  max-width: 1000px
}
.detail-split--single .detail-lead {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.9;
  margin: 0
}
.detail-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ds
}
.detail-steps > li {
  counter-increment: ds;
  position: relative;
  padding-left: 2.1em;
  margin-bottom: 20px;
  line-height: 1.85
}
.detail-steps > li::before {
  content: counter(ds, cjk-ideographic)"、";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: #111
}
.detail-steps > li > b {
  font-weight: 700
}
.detail-steps ul {
  margin: 8px 0 0;
  padding-left: 1.3em;
  list-style: disc
}
.detail-steps ul li {
  margin-bottom: 5px
}
.hl {
  background: linear-gradient(transparent 58%, rgba(255, 124, 75, .32) 58%);
  padding: 0 2px;
  font-weight: 600
}
/* ---- 甄選內文：連結、清單、階段標題、註記 ---- */
.inline-link {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap
}
.inline-link:hover, .inline-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px
}
.detail-mini {
  font-weight: 700;
  margin: 24px 0 6px;
  font-size: 1.02rem
}
.detail-ul {
  margin: 8px 0 0;
  padding-left: 1.3em;
  list-style: disc
}
.detail-ul li {
  margin-bottom: 6px;
  line-height: 1.75
}
.crit-stage {
  font: 700 clamp(1.15rem, 1.6vw, 1.5rem)/1.2 var(--display);
  letter-spacing: -.02em;
  margin: 34px 0 10px;
  padding-top: 18px;
  border-top: 2px solid #111
}
.crit-list {
  margin: 8px 0 0;
  padding-left: 1.4em
}
.crit-list li {
  margin-bottom: 5px;
  line-height: 1.7
}
.crit-list b {
  color: var(--orange)
}
.crit-note {
  font: 500 .82rem/1.6 var(--sans);
  color: rgba(17, 17, 17, .55);
  margin: 14px 0 0
}
.crit-strong {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 18px 0 0
}
/* ---- detail-split 標題行高（折行時較透氣）---- */
.detail-split .detail-head {
  line-height: 1.18
}
/* ---- 手機：hero 影片改方形置中、隱藏 115 OPEN CALL ---- */
@media(max-width:800px) {
  .hero__video {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(60vw, 280px);
    height: auto;
    margin: 10px auto 2px;
    object-fit: contain;
    object-position: center;
    transform: none
  }
  .hero__stamp {
    display: none
  }
  .hero__video-label {
    display: none
  }
}
/* ---- 手機方形影片再大一點 ---- */
@media(max-width:800px) {
  .hero__video {
    width: min(86vw, 400px)
  }
}
/* ---- 建構中頁面 ---- */
.under-con {
  min-height: 44vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 0 90px
}
.under-con h1 {
  margin: 0 0 22px
}
.under-con .page-lead {
  max-width: 520px;
  margin: 0 0 20px
}
.under-con__en {
  font: 500 .72rem var(--mono);
  letter-spacing: .24em;
  color: var(--orange)
}
/* ---- experience-banner 圖片直接出現（不做 reveal 淡入）---- */
.experience-banner.reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important
}
/* ---- 手機：detail-split 內容改單欄、標題左對齊 ---- */
@media(max-width:800px) {
  .detail-split .info-grid {
    grid-template-columns: 1fr;
    gap: 0
  }
  .crit-cols {
    grid-template-columns: 1fr;
    gap: 0
  }
  .detail-split__head {
    text-align: left;
    margin-left: 0;
    padding-right: 0;
    margin-bottom: 14px
  }
  .detail-split .info-grid:not(.info-grid--fields) article {
    padding: 18px 0 22px
  }
  .crit-cols .crit-card {
    padding: 18px 0 4px
  }
}
/* ---- 手機：hero 背景配合橘底方形影片、圖片一行一張、copy 上移 ---- */
@media(max-width:800px) {
  .hero {
    background: #ef402f
  }
  .blob-grid {
    grid-template-columns: 1fr
  }
  .hero__copy {
    padding-top: 0;
    margin-top: -2rem
  }
}
/* ---- 手機：直式 Reel 影片滿版滿寬（100vw、允許裁切），底色統一橘 ---- */
@media(max-width:800px) {
  .hero {
    background: #fd4d2a;
    padding-top: 30px
  }
  .hero__video--sq {
    position: relative;
    inset: auto;
    top: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: none;
    height: auto;
    margin: 0;
    display: block;
    object-fit: cover;
    transition: none
  }
  .hero__copy {
    padding-top: 2rem;
    margin-top: 0
  }
  .hero__notice {
    margin-top: 34px
  }
}
/* ---- 手機：首頁橫幅加高 ---- */
@media(max-width:800px) {
  #main > .space-banner img {
    min-height: 280px;
    max-height: 460px
  }
  #main > .experience-banner {
    min-height: 360px
  }
}
/* ---- 手機：內頁 experience-banner 高度縮小 ---- */
@media(max-width:800px) {
  .sub-page .page-shell .experience-banner {
    height: 340px
  }
}
/* ---- 手機：首頁區塊大標 h2 縮小 ---- */
@media(max-width:800px) {
  .manifesto h2, .process h2, .timeline h2 {
    font-size: clamp(2.6rem, 7vw, 2.8rem);
    margin-bottom: 28px;
    line-height: 1.1
  }
}
/* ---- 手機：header logo 縮小（含捲動 compact 狀態）---- */
@media(max-width:800px) {
  .brand img, .topbar.is-compact .brand img {
    width: 120px
  }
}
/* ---- 手機：橫幅取消拖曳、恢復正常觸控捲動（變一般圖片）---- */
@media(max-width:800px) {
  .space-banner, .experience-banner, .experience-card {
    touch-action: auto;
    cursor: default
  }
}
/* ---- 手機：space-banner 標語換行加行高 ---- */
@media(max-width:800px) {
  .stack-banners > .space-banner figcaption strong {
    line-height: 1.2
  }
}
/* ---- 手機：報名資訊改為標籤+日期同排流動 ---- */
@media(max-width:800px) {
  .hero__notice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px
  }
  .hero__notice strong {
    margin: 0
  }
  .hero__notice small {
    flex-basis: 100%;
    margin: 0
  }
}
/* ---- 手機：漢堡鈕固定 46px（含捲動 compact 狀態）---- */
@media(max-width:800px) {
  .nav-toggle, .topbar.is-compact .nav-toggle {
    width: 46px;
    height: 46px
  }
  .topbar.is-compact {
    height: 70px
  }
}
/* ---- 手機：滿版選單連結字級縮小、微調 padding ---- */
@media(max-width:800px) {
  .topbar nav a {
    font-size: clamp(1.5rem, 4.1vh, 2.3rem);
    padding: 10px 4px
  }
}
/* ---- manifesto 大標行高放寬 ---- */
.manifesto h2 {
  line-height: 1.1
}
/* ---- 電腦：hero 報名資訊線上方加間距 ---- */
@media(min-width:801px) {
  .hero__notice {
    margin-top: 10px
  }
}
/* ---- 首頁三大學程卡片：整卡可點入內頁 ---- */
.info-grid--fields .field {
  position: relative
}
.field__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  font-size: 0;
  cursor: pointer
}
/* ---- 卡片 hover 動態：識別圖放大（被 overflow 裁切）＋標題微移 ---- */
.info-grid--fields .field-group-image {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1)
}
.info-grid--fields .field:hover .field-group-image {
  transform: scale(1.09)
}
.info-grid--fields .field h2 {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1)
}
.info-grid--fields .field:hover h2 {
  transform: translateX(8px)
}
@media(prefers-reduced-motion:reduce) {
  .info-grid--fields .field:hover .field-group-image, .info-grid--fields .field:hover h2 {
    transform: none
  }
}
/* ---- 手機：manifesto 大標放大 ---- */
@media(max-width:800px) {
  .manifesto h2 {
    font-size: clamp(2.6rem, 9vw, 3.2rem)
  }
}
/* ---- 手機：識別卡標題真正靠右、mq-orbit 再往右 100px ---- */
@media(max-width:800px) {
  .experience-card--left figcaption {
    left: auto;
    right: 24px
  }
  .mq-orbit {
    right: -130px;
    top: -55px
  }
  .mq-sparks {
    right: -30px;
    top: 165px
  }
  .mq-sparks svg:nth-child(1) {
    width: 40px
  }
  .mq-sparks svg:nth-child(2) {
    width: 24px
  }
  .mq-sparks svg:nth-child(3) {
    width: 15px
  }
  .info-grid--fields .field-group-image {
    height: 150px
  }
  #main > .experience-card {
    margin-left: 7vw;
    margin-right: 0
  }
  .field__cross {
    margin: 3px 0 5px
  }
  .info-grid h2 {
    margin: 28px 0 2px
  }
  .steps h3 {
    margin: 0
  }
  .steps p {
    margin: 3px 0
  }
  .process {
    padding: 70px 7vw 50px
  }
}
/* ---- timeline 標題「這幾天。」橙字（手機＋電腦）---- */
.timeline h2 span {
  color: var(--orange)
}
/* ---- 電腦：process / timeline 區塊 padding ---- */
@media(min-width:801px) {
  .process {
    padding: 110px 7vw
  }
  .timeline {
    padding: 100px 7vw 110px
  }
}
/* ---- timeline 標題下間距 ---- */
.timeline h2 {
  margin-bottom: 10px
}
/* ---- 頁尾社群連結與版權列字放大 ---- */
.footer-social {
  font-size: 1.1rem
}
.copyright {
  font-size: .82rem
}
/* 頁尾社群連結：icon + 文字 */
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 7px
}
.footer-social a svg {
  width: 1.1em;
  height: 1.1em;
  flex: none
}
/* 頁尾教育部徽標（深底加白圓底提升可見度）*/
.footer-contact .footer-guide {
  display: inline-flex;
  align-items: center;
  gap: 6px
}
.moe-seal {
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: #fff;
  flex: none;
  margin-top: -5px
}
/* ---- 電腦：頁尾三行排版（機構名+指導單位／地址電話信箱／社群）---- */
.footer-contact .fbrk {
  display: none
}
@media(min-width:801px) {
  .footer-guide {
    margin-left: auto
  }
  .footer-contact .fbrk {
    display: block;
    flex-basis: 100%;
    height: 0;
    margin: 0
  }
  .footer-social {
    flex-basis: 100%
  }
}
/* ---- 手機：內頁標題縮小 ---- */
@media(max-width:800px) {
  .page-shell h1 {
    font-size: clamp(3rem, 12vw, 5rem);
    line-height: 1.1;
    margin-bottom: 16px
  }
}
/* ---- 手機：計畫緣起等 info-grid 卡片字級/間距參照首頁 steps（排除橘色大卡 --fields）---- */
@media(max-width:800px) {
  .detail-split .info-grid:not(.info-grid--fields) article {
    padding: 16px 0 24px
  }
  .detail-split .info-grid:not(.info-grid--fields) article b {
    font-size: 1rem
  }
  .detail-split .info-grid:not(.info-grid--fields) h2 {
    margin: 10px 0 6px
  }
  .detail-split .info-grid:not(.info-grid--fields) article p {
    font-size: 1.1rem;
    margin: 10px 0 0
  }
  .detail-split .info-grid--fields h2 {
    font-size: clamp(2rem, 7vw, 2.6rem)
  }
}
/* ---- 手機：現場直擊 blob 圓縮小、圖與圖間距加大 ---- */
@media(max-width:800px) {
  .blob-grid {
    gap: 36px
  }
  .blob-media {
    max-width: 82%;
    margin-inline: auto
  }
}
/* ---- 手機：指導單位置頂、社群連結字縮小 ---- */
@media(max-width:800px) {
  .footer-contact {
    display: flex;
    flex-direction: column
  }
  .footer-guide {
    order: -1
  }
  .footer-social {
    font-size: .92rem
  }
  .footer-contact .footer-social {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 8px
  }
  .footer-social a {
    gap: 3px;
    letter-spacing: 0
  }
  .copyright {
    font-size: .72rem
  }
}
/* ---- 內頁各段粗體引言 detail-sub 放大 ---- */
.detail-sub {
  font-size: clamp(1.4rem, 2vw, 1.75rem)
}
/* ---- 頁尾電話/Email 連結不用橙色（社群連結維持橙）---- */
.footer-contact a[href^="tel:"], .footer-contact a[href^="mailto:"] {
  color: inherit
}
/* ---- 首頁三階段說明文字放大 ---- */
.steps p {
  font-size: 1.1rem
}
/* ---- 學程錨點：避開固定標題列 ---- */
.field[id] {
  scroll-margin-top: 110px
}
/* ---- 最新消息頁碼 ---- */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 44px 0 0;
  flex-wrap: wrap
}
.pager__num {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font: 500 .85rem var(--mono);
  letter-spacing: .04em;
  color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s
}
a.pager__num:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper)
}
.pager__num.is-current {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-weight: 700
}
@media(max-width:800px) {
  .pager {
    margin-top: 24px
  }
  .pager__num {
    min-width: 38px;
    height: 38px
  }
  .sub-page .page-shell::after {
    margin-top: 48px
  }
}
/* ---- 最新消息縮圖 ---- */
.news-item__thumb {
  width: clamp(150px, 16vw, 200px);
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  align-self: center;
  background: var(--line)
}
@media(max-width:700px) {
  .news-item__thumb {
    width: 100%;
    aspect-ratio: 16/9;
    order: 3
  }
}
/* ---- 書面審查：兩欄評分卡 ---- */
@media(min-width:801px) {
  .crit-cols--2 {
    grid-template-columns: repeat(2, 1fr)
  }
  .mq-sparks {
    top: clamp(180px, 22vh, 270px)
  }
}
.crit-card p {
  font-size: .95rem;
  line-height: 1.8;
  margin: 0;
  color: rgba(17, 17, 17, .72)
}
.crit-cols--2 .crit-card {
  transition: none
}
.crit-cols--2 .crit-card:hover {
  transform: none;
  box-shadow: none
}
.crit-cols--2 .crit-card h4 {
  font-size: 22px;
  margin-bottom: 10px
}
/* ---- 內頁橫幅：初始即為視差基準 scale，避免載入時放大動畫（視差與平滑過渡保留）---- */
.sub-page .page-shell .experience-banner img {
  transform: scale(1.16)
}
/* ---- 手機：段落標題 detail-head 放大 ---- */
@media(max-width:800px) {
  .detail-head {
    font-size: clamp(2rem, 7vw, 2.6rem)
  }
  .sub-page .info-grid--fields .field-group-image {
    height: 160px
  }
  .field-group-image {
    margin-bottom: 10px
  }
  .crit-note {
    margin: 6px 0 0
  }
  .school-stat small {
    margin-top: 14px
  }
}