/* 八目工作室 — Desktop.vision motion language on light brand field
   Pin chapters + oversized type + diagonal cut planes (scrub).
   Palette ONLY via :root tokens (see README「調色」).
   Light #FAFAF8 · gold #F2A900 · orange #EC6600 · ink #231916
   Translucency: color-mix from tokens — no raw rgba / #000 / #fff.
   Content opacity always 1. Vertical only. No GPS nav. No opaque white slabs. */

:root {
  --gold: #F2A900;
  --orange: #EC6600;
  --orange-hover: #d45500;
  --ink: #231916;
  --ink-soft: #5c534e;
  --ink-muted: #8a817a;
  --bg: #FAFAF8;
  --line: color-mix(in srgb, var(--ink) 8%, transparent);
  --header-h: 4.5rem;
  --font: "Noto Sans TC", "DM Sans", system-ui, sans-serif;
  --display: "DM Sans", "Noto Sans TC", system-ui, sans-serif;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --max: min(100% - var(--pad-x) * 2, 90rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  /* Off while ScrollTrigger pin/scrub is active — JS toggles .has-scroll-trigger */
  scroll-behavior: auto;
  overflow-x: hidden;
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}
html:not(.has-scroll-trigger) {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html, html:not(.has-scroll-trigger) { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-h);
  overflow-x: hidden;
}
/* Dark copy always uses palette ink — never browser default / pure #000 */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, figcaption, blockquote, label, small, strong, em, b, i {
  color: inherit;
}
h1, h2, h3, h4, h5, h6 { color: var(--ink); }
button { color: inherit; font-family: inherit; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); text-underline-offset: 0.2em; }
a:hover { color: var(--orange-hover); }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--ink); color: var(--bg); padding: 0.75rem 1rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap {
  width: var(--max);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  z-index: 250; pointer-events: none;
}

html { scroll-padding-top: calc(var(--header-h) + 0.75rem); }

/* Screen-reader / SEO text for icon-only controls (crawlers see this; not alt) */
.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;
}

/* Continuous light field (still base) */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.field-wash {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

/* ===== Diagonal cut planes (Desktop.vision language, brand gold/orange) ===== */
.scene-planes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.plane {
  position: absolute;
  will-change: transform;
  pointer-events: none;
}
.plane-a {
  width: 145%;
  height: 62%;
  top: -18%;
  left: -28%;
  background: linear-gradient(
    115deg,
    color-mix(in srgb, var(--gold) 42%, transparent) 0%,
    color-mix(in srgb, var(--orange) 22%, transparent) 55%,
    color-mix(in srgb, var(--gold) 8%, transparent) 100%
  );
  clip-path: polygon(0 28%, 100% 0, 100% 62%, 0 100%);
  opacity: 0.55;
  transform-origin: 30% 40%;
}
.plane-b {
  width: 130%;
  height: 58%;
  bottom: -22%;
  right: -30%;
  background: linear-gradient(
    250deg,
    color-mix(in srgb, var(--orange) 32%, transparent) 0%,
    color-mix(in srgb, var(--gold) 16%, transparent) 50%,
    transparent 100%
  );
  clip-path: polygon(0 35%, 100% 8%, 100% 100%, 0 100%);
  opacity: 0.4;
  transform-origin: 70% 60%;
}

/* Per-scene rhythm tint (still low–medium, never fights text) */
.pin-track[data-scene="hero"] .plane-a { opacity: 0.5; }
.pin-track[data-scene="hero"] .plane-b { opacity: 0.32; }
.pin-track[data-scene="services"] .plane-a {
  opacity: 0.58;
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--orange) 40%, transparent) 0%,
    color-mix(in srgb, var(--gold) 22%, transparent) 55%,
    transparent 100%
  );
}
.pin-track[data-scene="services"][data-tone="team"] .plane-a {
  background: linear-gradient(
    108deg,
    color-mix(in srgb, var(--gold) 48%, transparent) 0%,
    color-mix(in srgb, var(--orange) 20%, transparent) 60%,
    transparent 100%
  );
}
.pin-track[data-scene="services"][data-tone="community"] .plane-a {
  background: linear-gradient(
    128deg,
    color-mix(in srgb, var(--gold) 36%, transparent) 0%,
    color-mix(in srgb, var(--orange) 30%, transparent) 50%,
    transparent 100%
  );
}
.pin-track[data-scene="methods"] .plane-a {
  opacity: 0.45;
  height: 50%;
}
.pin-track[data-scene="methods"] .plane-b {
  opacity: 0.3;
  height: 44%;
}

@media (max-width: 820px) {
  .plane-a { opacity: 0.42; height: 52%; }
  .plane-b { opacity: 0.28; height: 48%; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-planes { display: none; }
}

main { position: relative; z-index: 1; background: transparent; }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner {
  width: var(--max); margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: 0.75rem;
}
.header-inner .nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.header-actions {
  display: flex; align-items: center; gap: 0.5rem;
  margin-left: 0.25rem; flex-shrink: 0;
}
.brand {
  display: flex; align-items: center;
  color: var(--ink); text-decoration: none; flex-shrink: 1; min-width: 0;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-logo {
  height: 3.25rem;
  width: auto;
  max-width: min(18rem, 58vw);
  object-fit: contain;
  object-position: left center;
}

.nav-list {
  display: flex; list-style: none; margin: 0; padding: 0; gap: 0.1rem;
}
.nav-list a {
  display: block; padding: 0.35rem 0.65rem;
  color: var(--ink-soft); font-weight: 500; font-size: 0.82rem;
  text-decoration: none;
}
.nav-list a:hover, .nav-list a.is-active { color: var(--ink); }
.nav-list a.is-active { box-shadow: inset 0 -2px 0 var(--gold); }

.menu-toggle {
  display: none; width: 2.5rem; height: 2.5rem; border: 0;
  background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-toggle span {
  display: block; width: 1.1rem; height: 1.5px; background: var(--ink);
  transition: transform 0.25s, opacity 0.2s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 820px) {
  .menu-toggle { display: flex; }
  /*
   * Mobile drawer: keep specificity on .header-inner .nav so width/height
   * are not left at 0 (background would collapse; labels looked “broken”).
   */
  .header-inner .nav {
    flex: none;
    justify-content: stretch;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: calc(100svh - var(--header-h));
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 12%, transparent);
    padding: 0.75rem var(--pad-x) 1.25rem;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.25s;
    z-index: 120;
  }
  .header-inner .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* Keep header bar opaque while drawer is open */
  .site-header:has(.nav.is-open) {
    background: var(--bg);
    backdrop-filter: none;
  }
  .nav-list { flex-direction: column; width: 100%; }
  .nav-list a { padding: 0.75rem 0; }
  .header-actions { margin-left: auto; }
}

/* ——— Pin tracks (Desktop.vision rhythm) ——— */
.pin-track {
  position: relative;
  /* Track height set by JS pin end OR natural stage height — no empty ghost spacers */
}
.pin-stage {
  position: relative;
  width: 100%;
  min-height: calc(100svh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: transparent;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}
.pin-content {
  width: var(--max);
  max-width: none;
  position: relative;
  z-index: 2;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

/* Oversized type — full-bleed storytelling, not narrow column */
.mega {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
  opacity: 1;
  max-width: 18em;
  will-change: transform;
}
.hero-mega {
  font-size: clamp(2.75rem, 1rem + 8vw, 7.5rem);
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  max-width: 12em;
}
.chapter-mega {
  font-size: clamp(2.75rem, 1.2rem + 7vw, 6.5rem);
  margin-bottom: 1rem;
}
.scene-mega {
  font-size: clamp(2.5rem, 1.1rem + 5.5vw, 5.5rem);
  margin-bottom: 1rem;
  max-width: 14em;
}
.method-mega {
  font-size: clamp(2.25rem, 1rem + 5vw, 5rem);
  max-width: 12em;
}
.plain-mega {
  font-size: clamp(2rem, 1.1rem + 3.5vw, 4rem);
  margin-bottom: 0.85rem;
  max-width: 14em;
}
.mega-num {
  font-family: var(--display);
  font-size: clamp(5rem, 3rem + 12vw, 14rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: color-mix(in srgb, var(--gold) 32%, transparent);
  margin: 0 0 0.15rem;
  opacity: 1;
  will-change: transform;
}

/* Hero brand — ink wordmark + gold→orange rule (README 調色) */
.hero-brand {
  display: inline-block;
  margin: 0 0 1.35rem;
  font-family: var(--font);
  font-size: clamp(2.35rem, 1.5rem + 3.2vw, 4.25rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  color: var(--ink);
}
.hero-brand::after {
  content: "";
  display: block;
  width: 3.75rem;
  height: 4px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--gold), var(--orange));
}

.hero-lead {
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  color: var(--ink-soft); max-width: 42rem; margin: 0; line-height: 1.65;
  opacity: 1;
}

.chapter-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--orange); margin: 0 0 0.75rem;
}
.accent-line {
  display: block; width: 3.5rem; height: 3px; border: 0; margin: 0 0 1.25rem;
  background: linear-gradient(90deg, var(--gold), var(--orange));
}
/* Title + accent scrub together (GSAP targets .plain-title) */
.plain-title {
  margin: 0;
}
.plain-title .plain-mega {
  margin-bottom: 0.85rem;
}
.plain-title .accent-line {
  margin-bottom: 1.25rem;
}
/* Contact only: bar follows「想」on the first line.
   The span keeps the heading line-height, so the bar stays in that line's
   gap and does not drop under the wrapped lines. */
#contact .plain-mega {
  line-height: 1.45;
}
#contact .title-accent {
  position: relative;
  display: inline-block;
  line-height: inherit;
}
#contact .title-accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.06em;
  width: 3.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  pointer-events: none;
}
.method-sub {
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem);
  color: var(--ink-soft); max-width: 36rem; margin: 0;
}
.scene-body {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
  max-width: 38rem;
  opacity: 1;
}
.tag-row {
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.35rem; padding: 0; list-style: none;
}
.tag-row li {
  font-size: 0.78rem; font-weight: 650; color: var(--ink-muted);
  padding: 0.35rem 0.85rem;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-radius: 999px;
}

/* Full-bleed split for primary service — not a skinny left card */
.scene-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  width: 100%;
}
@media (min-width: 821px) {
  .scene-split {
    /* Give side photos (~2×) room beside copy */
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 1fr);
  }
  .pin-content {
    width: min(100% - var(--pad-x) * 2, 90rem);
  }
  /* Big type uses wide measure */
  .hero-mega, .chapter-mega, .scene-mega, .method-mega {
    max-width: min(100%, 16em);
  }
}

/* Chapter stages — shared pin + stacked beats.
   Horizontal measure/margin come from sibling classes on the same node
   (.wrap / .pin-content). Do not override width/margin here. */
.chapter-stage-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-block: clamp(1rem, 3vw, 1.75rem);
}
.chapter-intro { position: relative; z-index: 3; }
.chapter-mega-compact {
  font-size: clamp(2rem, 1rem + 4.5vw, 4rem);
  max-width: 14em;
  margin-bottom: 0.65rem;
}
.beat-progress {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.beat-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: background 0.25s, transform 0.25s;
}
.beat-dot.is-active {
  background: var(--orange);
  transform: scale(1.25);
}

.beat-stack {
  display: grid;
  width: 100%;
}
.service-beat {
  grid-area: 1 / 1;
  pointer-events: none;
}
.service-beat.is-active {
  pointer-events: auto;
  z-index: 2;
}
.service-beat .scene-split,
.service-beat .scene-copy {
  width: 100%;
}
/* Desktop fallback only when GSAP off — do NOT set opacity here (fights scrub autoAlpha) */
.no-js .service-beat:not(.is-active),
body.reduced-motion .service-beat:not(.is-active) {
  opacity: 0;
  visibility: hidden;
}
/* Mobile / no-js / reduced-motion: stack beats in document flow (scrollable, no overlap) */
.no-js .beat-stack,
body.reduced-motion .beat-stack,
.pin-track.services-mobile-flow .beat-stack {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.no-js .service-beat,
body.reduced-motion .service-beat,
.pin-track.services-mobile-flow .service-beat {
  position: relative;
  grid-area: auto;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  z-index: auto;
  transform: none;
}
.pin-track.services-mobile-flow .pin-stage {
  min-height: 0;
  overflow: visible;
  align-items: flex-start;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

/* Methods accordion — detail under active item; peers shift down */
.pin-track[data-scene="methods"] .pin-stage {
  overflow: visible; /* accordion must not clip */
  align-items: flex-start;
}
/* No pin: stage follows content height so large photo pairs stay fully scrollable */
.pin-track.methods-scroll-flow .pin-stage {
  min-height: 0;
  overflow: visible;
  align-items: flex-start;
  padding-top: 0.5rem;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.pin-track.methods-mobile-flow .pin-stage {
  min-height: 0;
  padding-top: 0.5rem;
  padding-bottom: 1.25rem;
}
.methods-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  max-width: min(100%, 48rem);
}
.method-item {
  border-radius: 0.45rem;
  transition: background 0.3s var(--ease), transform 0.35s var(--ease);
}
.method-item.is-active {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.method-item:not(.is-active) {
  opacity: 0.72;
  transition: opacity 0.35s var(--ease), background 0.3s var(--ease), transform 0.35s var(--ease);
}
.method-item.is-active {
  opacity: 1;
}
.pin-track.methods-mobile-flow .method-item:not(.is-active) {
  opacity: 0.52;
  transform: scale(0.985);
  transform-origin: left center;
}
.pin-track.methods-mobile-flow .method-item.is-active {
  transform: scale(1);
}
.pin-track.methods-mobile-flow .methods-accordion {
  gap: 1.15rem;
  padding-bottom: 12vh;
}
.pin-track.methods-mobile-flow .method-item-trigger {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
/* Mobile: keep panels open — no height accordion while scrolling (was the jank source).
   Focus/dim + scrub entrance carry the motion instead. */
.pin-track.methods-mobile-flow .method-item-panel {
  grid-template-rows: 1fr;
  transition: none;
}
.pin-track.methods-mobile-flow.methods-motion .method-item .method-item-panel-inner,
.pin-track.methods-mobile-flow .method-item-panel-inner {
  visibility: visible;
  overflow: visible;
  opacity: 1;
  padding: 0.15rem 0.75rem 0.85rem;
}
.pin-track.methods-mobile-flow .method-item:not(.is-active) .method-item-panel-inner {
  opacity: 0.72;
}
.pin-track.services-mobile-flow .service-beat {
  will-change: transform;
}
.method-item-trigger {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  /* Match .chapter-mega-compact — same size as「我們善用不同工具與手法」 */
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 1rem + 4.5vw, 4rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--ink-muted);
  min-height: 44px;
  transition: color 0.25s;
}
.method-item.is-active .method-item-trigger {
  color: var(--ink);
}
.method-item-trigger .roster-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.72em;
  letter-spacing: -0.04em;
  line-height: 1;
  color: color-mix(in srgb, var(--gold) 55%, transparent);
  min-width: 1.35em;
  flex-shrink: 0;
  transition: color 0.25s, transform 0.35s var(--ease);
}
.method-item.is-active .method-item-trigger .roster-num {
  color: var(--orange);
  transform: scale(1.06);
  transform-origin: left center;
}
.method-item-title {
  flex: 1 1 auto;
  max-width: 14em;
}

/* Grid 0fr→1fr accordion open — pushes following items down */
.method-item-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.method-item.is-active .method-item-panel {
  grid-template-rows: 1fr;
}
.method-item-panel-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0.75rem;
  /* opacity/y driven by GSAP when .methods-motion; CSS fallback below */
}
.method-item.is-active .method-item-panel-inner {
  padding: 0.2rem 0.75rem 1.1rem;
}
.methods-motion .method-item:not(.is-active) .method-item-panel-inner {
  visibility: hidden;
}
.method-item-panel .scene-body {
  margin: 0;
  max-width: 36rem;
}
.method-item-panel .method-glyph,
.method-item-panel .method-photo-pair {
  margin-top: 0.85rem;
}
.method-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  /* Same 4:3 for every method — stable layout when accordion switches */
  width: min(100%, 26rem);
  max-width: 100%;
}
.method-photo-pair .photo-ph-inline {
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin-left: 0;
}

.no-js .method-item-panel,
body.reduced-motion .method-item-panel {
  display: block;
  grid-template-rows: none;
}
.no-js .method-item-panel-inner,
body.reduced-motion .method-item-panel-inner {
  overflow: visible;
  opacity: 1;
  visibility: visible;
  padding: 0.15rem 0.75rem 1.15rem;
  transform: none;
}
.no-js .method-item,
body.reduced-motion .method-item {
  background: transparent;
  opacity: 1;
}
.no-js .method-item + .method-item,
body.reduced-motion .method-item + .method-item {
  border-top: 1px solid var(--line);
}

@media (max-width: 820px) {
  .pin-track[data-scene="methods"] .chapter-mega-compact {
    font-size: clamp(1.65rem, 1rem + 3.5vw, 2.2rem);
  }
  .pin-track[data-scene="methods"] .chapter-stage-inner {
    gap: 0.85rem;
    padding-block: 0.75rem 1.25rem;
  }
  .method-item-trigger {
    padding: 0.45rem 0.35rem;
    /* Keep parity with mobile chapter-mega-compact */
    font-size: clamp(1.65rem, 1rem + 3.5vw, 2.2rem);
  }
}

/* Light method glyphs (semantic accents, not cards) */
.method-glyph {
  margin-top: 1.25rem;
  height: 3.5rem;
  max-width: 14rem;
  position: relative;
}
.method-glyph-pd {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent) 0 24%, transparent 24%),
    linear-gradient(90deg, transparent 26%, color-mix(in srgb, var(--orange) 45%, transparent) 26% 50%, transparent 50%),
    linear-gradient(90deg, transparent 52%, color-mix(in srgb, var(--gold) 35%, transparent) 52% 74%, transparent 74%),
    linear-gradient(90deg, transparent 76%, color-mix(in srgb, var(--ink) 20%, transparent) 76% 100%);
  border-radius: 0.25rem;
}
.method-glyph-tie {
  border: 2px solid color-mix(in srgb, var(--orange) 45%, transparent);
  border-radius: 0.35rem 0.35rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%);
}
.method-glyph-disc {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  height: auto;
}
.method-glyph-disc span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 0.3rem;
}
.method-glyph-sport {
  clip-path: polygon(8% 70%, 35% 20%, 55% 48%, 78% 10%, 96% 62%, 70% 100%, 42% 72%, 22% 100%);
  background: linear-gradient(135deg, var(--gold), var(--orange));
  opacity: 0.55;
}

/* Plain sections (about / contact) — clear of header */
.plain-section {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: clamp(3.5rem, 9vw, 6rem) 0;
  scroll-margin-top: calc(var(--header-h) + 1.75rem);
}
/* Tighten About → photo band: was stacking large section paddings, not leftover markup */
#about.plain-section {
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.eyebrow {
  /* Match .chapter-label so About/Contact eyebrows align with pin chapters */
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--orange); margin: 0 0 0.75rem;
}
@media (min-width: 821px) {
  .chapter-label,
  .eyebrow {
    /* Was 0.78rem / then 1.05rem — bump further so desktop reads clearly larger */
    font-size: 1.25rem;
    letter-spacing: 0.12em;
  }
}
.about-block { max-width: 42rem; }
.about-block p { color: var(--ink-soft); margin: 0 0 1rem; }
/* Contact subtitle only. About body stays on .about-block p. */
.contact-lead {
  color: var(--ink-soft);
  max-width: 42rem;
  margin: 0 0 1rem;
  line-height: 1.65;
}
@media (min-width: 821px) {
  .contact-lead { font-size: 1.8rem; }
}

.contact-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
}
a.contact-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 22%, transparent);
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
a.contact-icon-btn:hover,
a.contact-icon-btn:focus-visible {
  background: var(--bg);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  transform: translateY(-3px);
  text-decoration: none;
  outline: none;
}
a.contact-icon-btn .contact-icon {
  display: block;
  flex-shrink: 0;
  fill: currentColor;
}

.site-footer {
  background: var(--ink);
  color: color-mix(in srgb, var(--bg) 55%, transparent);
  padding: 2.5rem 0 2rem; font-size: 0.85rem; position: relative; z-index: 1;
}
.footer-inner {
  width: var(--max); margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-copy {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--bg) 55%, transparent);
}
.footer-copy-zh,
.footer-copy-en {
  display: inline-block;
}
.footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--bg) 48%, transparent);
}
.footer-tags li {
  display: inline-flex;
  align-items: center;
}
.footer-tags li:not(:last-child)::after {
  content: "|";
  margin-inline: 0.55rem;
  opacity: 0.55;
}

/*
 * Photo slots — editorial brief cards (not wireframe hatch).
 * Refs: purpose-led labels + crop intent; soft fill; corner crop marks.
 */
.photo-ph {
  --ph-pad: 0.85rem;
  position: relative;
  width: min(100%, 14rem);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: var(--ph-pad);
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--gold) 10%, var(--bg)),
      color-mix(in srgb, var(--ink) 3%, var(--bg)) 55%,
      color-mix(in srgb, var(--orange) 6%, var(--bg))
    );
  border: 0;
  border-radius: 0.35rem;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
/* Corner crop marks — editorial mat, not dashed wireframe */
.photo-ph-frame {
  position: absolute;
  inset: 0.55rem;
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / 1.1rem 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top left / 1.5px 1.1rem no-repeat,
    linear-gradient(var(--ink), var(--ink)) top right / 1.1rem 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top right / 1.5px 1.1rem no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 1.1rem 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 1.5px 1.1rem no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / 1.1rem 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / 1.5px 1.1rem no-repeat;
  opacity: 0.28;
}
.photo-ph-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  text-align: center;
}
.photo-ph-id {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange);
}
.photo-ph-purpose {
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.92rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.photo-ph-ratio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 999px;
}
/* Soft focus point — crop intent without a heavy inner card */
.photo-ph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--orange) 45%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--orange) 8%, transparent);
  pointer-events: none;
}
/* Per-slot crop guides */
.photo-ratio-1x1 { aspect-ratio: 1 / 1; }
.photo-ratio-3x2 { aspect-ratio: 3 / 2; }
.photo-ratio-4x3 { aspect-ratio: 4 / 3; }
.photo-ratio-4x5 { aspect-ratio: 4 / 5; }
.photo-ph-side {
  width: min(100%, 20rem);
  justify-self: end;
}
.photo-ph-hero {
  margin-top: 2rem;
  width: min(100%, 22rem);
}
.photo-ph-inline {
  width: 100%;
  margin-left: 0;
  --ph-pad: 0.65rem;
}
/* Compact method slots: keep marks + meta, drop focus cue */
.photo-ph-inline::after {
  display: none;
}
.photo-ph-inline .photo-ph-frame {
  inset: 0.4rem;
}
.photo-band {
  padding: clamp(0.35rem, 1vw, 0.75rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.photo-ph-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 36rem;
}
.photo-ph-grid .photo-ph {
  width: 100%;
  min-width: 0;
}
/* Real photos fill the ratio slot */
.photo-ph.has-photo {
  padding: 0;
  background: color-mix(in srgb, var(--ink) 6%, var(--bg));
  box-shadow: none;
}
.photo-ph.has-photo .photo-ph-frame,
.photo-ph.has-photo .photo-ph-meta,
.photo-ph.has-photo::after {
  display: none;
}
.photo-ph.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* Desktop: enlarge photo display sizes (must follow base .photo-ph-* caps) */
@media (min-width: 821px) {
  .pin-track[data-scene="hero"] .pin-stage {
    /* Large hero photo must not clip inside pin viewport */
    overflow: visible;
    min-height: auto;
    align-items: flex-start;
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
  }
  .photo-ph-hero {
    /* ~3.5× of 22rem */
    width: min(100%, 76rem);
    margin-top: 2.5rem;
  }
  .photo-ph-side {
    /* ~2× of 20rem */
    width: min(100%, 40rem);
    justify-self: stretch;
  }
  .pin-track[data-scene="methods"] .methods-accordion {
    /* Room for ~2× method photo pair (was 48rem / 26rem) */
    max-width: min(100%, 56rem);
  }
  .pin-track[data-scene="methods"] .method-photo-pair {
    /* Fill accordion ≈ 2× prior 26rem pair */
    width: 100%;
    max-width: none;
    gap: 0.85rem;
  }
  .photo-ph-grid {
    /* ~2× of 36rem */
    max-width: 72rem;
    gap: 1rem;
  }

  /* Pinned frame only. Type, measure, and left edge stay on the PR 16 rules
     shared with the chapters before and after — do not restyle them here. */
  .pin-track.methods-desktop-dwell .pin-stage {
    /* Hug the open card. A full-viewport frame left a beige band under DISC before 關於. */
    height: auto;
    min-height: 0;
    max-height: calc(100svh - var(--header-h));
    overflow: visible;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 0.35rem;
    padding-bottom: 0.25rem;
  }
  /* One method on screen at the same title size as the chapter heading.
     The other titles stay in the buttons, out of the frame, so the open
     panel is not squeezed into a smaller font. */
  .pin-track.methods-desktop-dwell .method-item:not(.is-active) {
    display: none;
  }
}

/* Short laptops: keep PR 16 type size; only the photo pair shrinks so it stays on screen. */
@media (min-width: 821px) and (max-height: 860px) {
  .pin-track.methods-desktop-dwell .method-photo-pair {
    width: min(100%, 30rem);
  }
  .pin-track.methods-desktop-dwell .chapter-stage-inner {
    gap: 0.55rem;
    padding-block: 0.4rem;
  }
}
@media (min-width: 821px) and (max-height: 740px) {
  .pin-track.methods-desktop-dwell .method-photo-pair {
    width: min(100%, 22rem);
  }
}

/* WhatsApp FAB — mobile only; 調色墨白：`--ink` 底 + `--bg` icon（唔用 #000／WA 綠／金橙） */
.wa-fab {
  display: none;
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 180;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 28%, transparent);
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s;
}
.wa-fab:hover {
  color: var(--bg);
  text-decoration: none;
  background: var(--ink-soft);
}
.wa-fab-icon { display: block; flex-shrink: 0; }
.wa-fab.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
}

@media (max-width: 820px) {
  :root {
    --pad-x: clamp(1rem, 4.5vw, 1.5rem);
    --header-h: 4rem;
  }
  body { padding-top: var(--header-h); }
  html { scroll-padding-top: calc(var(--header-h) + 0.75rem); }
  .brand-logo {
    height: 2.875rem;
    max-width: min(13.5rem, 52vw);
  }
  .header-actions { margin-left: auto; }
  .nav-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.75rem 0.25rem;
    font-size: 1rem;
  }
  .menu-toggle { min-width: 44px; min-height: 44px; }
  .btn {
    min-height: 48px;
    padding: 0.9rem 1.35rem;
  }
  .pin-stage {
    min-height: calc(100svh - var(--header-h));
    align-items: flex-start;
    padding-top: 0.75rem;
    padding-bottom: 2rem;
  }
  .hero-mega {
    font-size: clamp(2.1rem, 1.2rem + 7vw, 3.4rem);
  }
  .chapter-mega, .scene-mega, .method-mega {
    font-size: clamp(1.9rem, 1.1rem + 5vw, 2.8rem);
  }
  .mega-num {
    font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
  }
  .photo-ph-side {
    width: min(100%, 100%);
    max-width: 22rem;
    justify-self: start;
  }
  .photo-ph-hero {
    width: min(100%, 100%);
    max-width: 20rem;
  }
  .method-photo-pair {
    width: min(100%, 100%);
  }
  .plain-section {
    scroll-margin-top: calc(var(--header-h) + 0.75rem);
    padding: clamp(2.75rem, 8vw, 4rem) 0;
  }
  #contact.plain-section {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
  a.contact-icon-btn {
    width: 3.5rem;
    height: 3.5rem;
    min-width: 44px;
    min-height: 44px;
  }
  .wa-fab {
    display: flex;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 190;
  }
  .hero-brand {
    font-size: clamp(2rem, 1.3rem + 3.2vw, 2.85rem);
  }
  /* FAB clearance: pad body a bit; don’t inflate the dark footer band */
  body {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }
  .site-footer {
    padding-top: 1.75rem;
    padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
    /* Keep last service label clear of the floating WhatsApp button */
    padding-right: calc(var(--pad-x) + 4.25rem);
  }
  /* Mobile: stack copyright lines; keep four services on one wrapping row */
  .footer-inner {
    gap: 0.55rem;
  }
  .footer-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .footer-tags {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    width: 100%;
  }
  .footer-tags li {
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .footer-tags li:not(:last-child)::after {
    margin-inline: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-stage {
    min-height: 0;
    padding: clamp(2rem, 5vw, 3.5rem) 0;
  }
}