/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: #efedeb; overscroll-behavior: none; }
body { overscroll-behavior: none; }
/* On essay page, html bg matches article bg so any tiny overscroll doesn't expose dark cover */
html:has(body.essay-page) { background: #f9f8f7; }

/* ── View Transitions API — smooth cross-document page transitions ──── */
/* Enables auto-fade between portfolio.html ↔ essay.html (Chrome 126+, Safari 18+) */
@view-transition {
  navigation: auto;
}
/* Root fade — slower + smoother easing reduces flicker during cross-fade */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Boat cover morph — slightly slower than root fade, matching offmenu-style polish */
::view-transition-old(boat-cover),
::view-transition-new(boat-cover) {
  animation-duration: 0.65s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Honor reduced motion: instant swap */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(boat-cover),
  ::view-transition-new(boat-cover) {
    animation-duration: 0.01ms;
  }
}

/* ── Text wrap optimization (avoid orphan words) ──────────────────── */
/* Article inline strong: match article-mid-h weight 600 (not browser default 700) */
.article-body strong, .body-l strong, .card-body strong { font-weight: 600; }
/* Headings: balance line lengths so the last line isn't a single word */
.hero-h1, .hero-eyebrow, .h2, .card-title, .article-lead-h, .article-mid-h, .source-label, .sec-label, h2, h3 {
  text-wrap: balance;
}
/* Body paragraphs: prettier line breaks (Chrome/Safari only, gracefully degrades) */
.body-l, .body-l-grey, .card-body, .article-body p, .article-body li, .footer-cta, .footer-disclaimer {
  text-wrap: pretty;
}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --txt:   rgb(38,38,38);
  --btn-dark: #2E2E2E;
  --txt-light: rgba(38,38,38,0.7);
  --txt2:  rgba(38,38,38,0.65);
  --txt3:  rgba(38,38,38,0.65);
  --panel: #fafafa;
  --bdr:   rgba(0,0,0,0.09);
  --col:     28px;
  --max:   1120px;
  --mono:  'JetBrains Mono', 'Courier New', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', monospace;
  --head:  'Google Sans', 'Inter', 'neue-haas-grotesk-text', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;
  --body:  'Google Sans', 'Inter', 'neue-haas-grotesk-text', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', Helvetica, Arial, sans-serif;
}

/* ── Text Selection ────────────────────────────────────────────── */
::selection {
  background: rgb(38,38,38);
  color: #f9f8f7;
}
::-moz-selection {
  background: rgb(38,38,38);
  color: #f9f8f7;
}

/* ── Email Copy Tooltip ────────────────────────────────────────── */
.email-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(218, 218, 216, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgb(38,38,38);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  height: 35px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
.nav-dropdown-email:hover + .email-tooltip,
.footer-email:hover + .email-tooltip,
.email-tooltip:hover {
  opacity: 1;
  pointer-events: auto;
}

/* ── Back to Top ───────────────────────────────────────────────── */
.back-to-top {
  font-family: var(--mono) !important;
  font-size: 1rem;
  font-weight: 700;
  color: var(--txt);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding-right: 47px; /* 35px arrow + 12px gap */
  white-space: nowrap;
}
.back-to-top-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px; height: 35px;
  background: rgba(218, 218, 216, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgb(38,38,38);
  border-radius: 10px;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.back-to-top:hover .back-to-top-arrow {
  opacity: 1;
}

/* ── Base ─────────────────────────────────────────────────────────── */
body {
  background: #efedeb;
  color: var(--txt);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
p { color: var(--txt) !important; }
.hero-eyebrow { color: rgb(153,153,153) !important; }
.footer-cta { color: rgb(153,153,153) !important; }
.nav-dropdown-cta { color: rgb(153,153,153) !important; }
li { color: var(--txt) !important; }

/* 內文超連結：預設無底線黑字，hover 有底線 */
p a { 
  color: var(--txt) !important; 
  text-decoration: none;
}
p a:hover {
  color: var(--txt) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Source 超連結：預設深灰無底線，hover 黑色有底線 */
.source-list {
  list-style: none;
  padding-left: 0;
}
.source-list li {
  margin-bottom: 1.2em;
  line-height: 1.575;
}
.source-list a {
  color: var(--txt) !important;
  text-decoration: none;
}
.source-list a:hover {
  color: var(--txt) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration: underline;
  text-decoration-color: rgb(38,38,38);
  text-underline-offset: 3px;
}

/* ── Wave SVG — fixed background, same as portfolio-wave-bg.html ── */
#wave-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  will-change: transform;
  transform: translateZ(0);
}

/* ── NAV ──────────────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 var(--col);
  background: transparent;
  transition: transform 0.3s ease;
}
/* Hide-on-scroll: nav slides up when user scrolls down */
#nav.nav-hidden { transform: translateY(-100%); }
.nav-logo, .nav-links, .nav-burger { height: 64px; display: flex; align-items: center; }
.nav-burger { align-self: center; }

.nav-logo {
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
  letter-spacing: .04em; color: var(--txt); text-decoration: none;
}
.nav-logo:hover { text-decoration: none; }

/* Language toggle button — right side of nav, floema-style rectangle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 35px;
  background: rgba(218, 218, 216, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  cursor: pointer;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0;
  transition: background 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
  border: none;
}
/* When in Chinese mode, the button shows "EN" (Latin chars) — bigger for optical balance with CJK */
body[data-lang="zh"] .lang-toggle { font-size: 0.875rem; }
@media (hover: hover) {
  .lang-toggle:hover {
    background: var(--btn-dark);
    color: #fff;
    border-color: transparent;
    transform: scale(1.05);
  }
}
.lang-toggle:active { transform: scale(1.0); }
.lang-toggle-label { display: inline-block; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a {
  font-family: var(--mono); font-size: 1rem;
  font-weight: 600; letter-spacing: .04em;
  color: var(--txt); text-decoration: none; transition: color .2s;
  text-transform: none;
}
/* ── Menu overlay backdrop ──────────────────────────────────────── */
.nav-overlay {
  position: fixed; inset: 0;
  background: #efedeb;
  z-index: 11;
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.4,0,.2,1);
}
.nav-overlay.open { opacity: 1; pointer-events: all; }
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 4px 0 4px 4px; width: 38px; height: 38px;
  transform: translateY(-2px);
}
.nav-burger span {
  display: block; width: 100%; height: 2px;
  background: var(--txt);
  transition: transform .3s, opacity .3s;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ── Mobile dropdown ────────────────────────────────────────────── */
.nav-dropdown {
  width: 100%;
  background: #f9f8f7;
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
  /* Override the inherited nav side-padding so the dropdown bg spans full viewport width */
  margin: 0 calc(-1 * var(--col));
  padding: 0 var(--col);
  box-sizing: content-box;
}
.nav-dropdown.open { max-height: 500px; }
.nav-dropdown-links {
  list-style: none;
  padding: 16px var(--col) 24px;
}
.nav-dropdown-links li { border: none; }
.nav-dropdown-links a {
  display: block;
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  color: var(--txt); text-decoration: none;
  padding: 14px 0;
  
  transition: opacity .2s;
}
.nav-dropdown-links a:hover { text-decoration: underline; text-decoration-color: var(--txt); text-underline-offset: 3px; }
/* Active page indicator (mobile/tablet nav only) */
.nav-dropdown-links a.active {
  text-decoration: underline;
  text-decoration-color: var(--txt);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

.nav-dropdown-footer {
  padding: 20px var(--col) 32px;
}
.nav-dropdown-cta {
  font-family: var(--head); font-size: 1.25rem; font-weight: 500;
  color: rgb(153,153,153); margin-bottom: 15px;
}
.nav-dropdown-email {
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  color: var(--txt); text-decoration: none;
  transition: opacity .2s;
}
.nav-dropdown-email:hover {
  text-decoration: underline;
  text-decoration-color: var(--txt);
  text-underline-offset: 3px;
}
.nav-links a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ── HERO ──────────────────────────────────────────────────────── */
#hero {
  position: relative; z-index: 1;
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 35vh 0 0;
}
.hero-inner {
  /* Desktop: 80vw capped at 880px */
  width: min(80vw, 880px);
  text-align: center;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 767px) {
  /* Mobile: 85vw */
  .hero-inner { width: 85vw; }
}
.hero-eyebrow {
  font-family: var(--head); 
  font-size: clamp(2rem, 3.28vw, 3rem);
  font-weight: 500; line-height: 0.96; letter-spacing: -0.0078em;
  color: rgb(153,153,153);
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 0;
}
.hero-h1 {
  font-family: var(--head); 
  font-size: clamp(2rem, 3.28vw, 3rem);
  font-weight: 500; line-height: 1.05; letter-spacing: -0.0078em;
  color: var(--txt); margin-bottom: 0.32em;
}

/* ── WHITE PANEL — one continuous surface ──────────────────────── */
#panel {
  position: relative; z-index: 1;
  background: #f9f8f7;
}

/* ── FOOTER — outside panel, wave visible through it ───────────── */
#footer {
  position: relative; z-index: 1;
  background: transparent;
  border-top: none;
  padding-top: clamp(248px, 24vw, 374px);
  padding-right: var(--col);
  padding-bottom: 25px;
  padding-left: var(--col);
}
/* ── Layout helpers ─────────────────────────────────────────────── */
.w { max-width: var(--max); margin: 0 auto; padding: 0 var(--col); }
.sec { padding: clamp(80px, 8vw, 120px) 0; }
/* 2× padding overrides — only on these two specific spots */
#work { padding-top: clamp(160px, 16vw, 168px); }
#about { padding-bottom: clamp(248px, 24vw, 374px); }
.two-col {
  display: block;
}
.two-col .lbl { margin-bottom: 7px; }

/* ── Typography ─────────────────────────────────────────────────── */
.sec-label {
  font-family: var(--mono); font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 500;
  color: rgb(153,153,153) !important; letter-spacing: 0.03em;
  margin-bottom: 14px; line-height: 1.1;
}
.h2 {
  font-family: var(--head);
  font-size: clamp(1.625rem, calc(0.95vw + 1.25rem), 2rem);
  font-weight: 500; letter-spacing: -0.0078em; line-height: 1.0;
  color: var(--txt); margin-bottom: 36px;
}
.body-l {
  font-size: 1.125rem; line-height: 1.625; color: var(--txt);
  margin-bottom: 1.5em;
}
/* Combine with .body-l to get 18px gray 500-weight paragraph
   (used for de-emphasised intro paragraphs that still flow with body type) */
.body-l-grey {
  font-weight: 500;
  letter-spacing: -0.00936em;
  color: rgb(153,153,153) !important;
}
.body-l:last-child { margin-bottom: 0; }

/* ── Video ──────────────────────────────────────────────────────── */
.video-wrap {
  position: relative; padding-bottom: 56.25%;
  margin: 52px 0 0;
  background: linear-gradient(90deg, #e5e3e1 25%, #f0eeec 50%, #e5e3e1 75%);
  background-size: 200% 100%;
  animation: video-skeleton-shimmer 1.5s infinite linear;
  overflow: hidden; border-radius: 10px;
}
@keyframes video-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.video-wrap iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* ── Feature cards ──────────────────────────────────────────────── */
.cards {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 50px 29px; margin-top: 24px;
  align-items: stretch;
}
.card {
  padding: 30px 25px;
  border: 1px solid var(--txt);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 14em;
}
.card:nth-child(3) { grid-column: 1; }
.card-title {
  font-family: var(--head); font-size: 1.375rem; font-weight: 500;
  letter-spacing: -0.0078em; line-height: 1.3;
  color: var(--txt); margin-bottom: 10px;
}
.card-body {
  font-family: var(--body); font-size: 1.125rem;
  line-height: 1.625; color: var(--txt);
}

/* ── Essay intro ─────────────────────────────────────────────────── */
/* ── Boat grid ──────────────────────────────────────────────────── */
/* ── Boat section ───────────────────────────────────────────────── */
.boat-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 29px;
}
.boat-col {
  display: flex; flex-direction: column; gap: 14px;
}
.boat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 48vh;
  gap: 32px;
}
.bpanel {
  position: relative; overflow: hidden;
  display: block; text-decoration: none; background: #1a1a1a;
  border-radius: 10px;
  height: calc(50vh + 5px);
  transition: transform 0.25s ease-out;
  -webkit-tap-highlight-color: transparent;
  /* iOS fix: force GPU compositing so border-radius properly masks canvas during scale */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  clip-path: inset(0 round 10px);
  -webkit-clip-path: inset(0 round 10px);
  isolation: isolate;
}
@media (hover: hover) {
  .bpanel:hover { 
    text-decoration: none;
    transform: translateZ(0) scale(1.014);
  }
}
.bpanel:active { transform: translateZ(0) scale(1.0); }
.boat-strip-simple {
  font-family: var(--head); font-size: clamp(1.375rem, 2.5vw, 1.5rem); font-weight: 500;
  letter-spacing: -0.00392em; line-height: 0.95;
  color: var(--txt);
  transition: transform 0.25s ease-out;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .boat-strip-simple:hover {
    transform: scale(1.014);
  }
}
.boat-strip-simple:active { transform: scale(1.0); }
.bpanel canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.bpanel::after { display: none; }

/* Hover: white title text gets underline (only the title span, not the #N) */
.bpanel:hover .bpanel-overlay > span:not(.bpanel-overlay-part),
.boat-strip-simple:hover > .boat-strip-title {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.bpanel-overlay {
  position: absolute; bottom: 35px; left: 25px; right: 25px;
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  padding-right: 32px; /* reserve space for arrow */
  font-family: var(--head); font-size: clamp(1.375rem, 2.5vw, 1.5rem); font-weight: 500;
  letter-spacing: -0.00936em; line-height: 0.95;
  color: rgba(249,248,247,0.9);
  pointer-events: none;
}
.bpanel-overlay-part {
  color: rgba(249,248,247,0.5);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.bpanel-title-row {
  display: block;
  position: relative;
  width: 100%;
}
.bpanel-arrow {
  position: absolute;
  right: -32px;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(249,248,247,0.9);
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
/* Desktop: hidden by default, hover shows 100% + 4px right shift */
@media (hover: hover) {
  .bpanel:hover .bpanel-arrow,
  .boat-strip-simple:hover .bpanel-arrow {
    opacity: 1;
    transform: translateX(4px);
  }
}
/* Touch / mobile: always 100% — no hover concept */
@media (hover: none) {
  .bpanel-arrow {
    opacity: 1;
  }
}
/* Desktop: opacity 0.8 default, hover shows 100% + 4px right shift */
@media (hover: hover) {
  .bpanel:hover .bpanel-arrow,
  .boat-strip-simple:hover .bpanel-arrow {
    opacity: 1;
    transform: translateX(4px);
  }
}
/* Touch / mobile: always 100% — no hover concept */
@media (hover: none) {
  .bpanel-arrow {
    opacity: 1;
  }
}

/* Arrow button — bpanel (desktop hover-only) and boat-strip (mobile always-on) */
.boat-arrow {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(calc(-50% + 4px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(218, 218, 216, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgb(38,38,38);
  padding: 6px;
  border-radius: 100px;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
/* Desktop bpanel: hover-only, slides up into place */
.bpanel .boat-arrow { opacity: 0; }
.bpanel:hover .boat-arrow { 
  opacity: 1;
  transform: translateY(-50%);
}
/* Mobile strip: always visible */
.boat-strip-simple .boat-arrow { opacity: 1; }
.boat-btn {
  display: block; text-decoration: none;
  font-family: var(--body); font-size: 0.9rem;
  font-weight: 400; color: var(--txt); line-height: 1.4;
  transition: opacity .2s;
}
.boat-btn:hover { text-decoration: underline; text-decoration-color: var(--txt); text-underline-offset: 3px; }
.boat-btn-part { color: var(--txt3); }

/* Mobile strip — col 2 & 3 on small screens */
/* Mobile: col 2 & 3 bpanel becomes dark strip (hidden on desktop by default) */
.boat-strip {
  display: none;
}
.boat-strip-part { color: rgba(249,248,247,0.5); flex-shrink: 0; }
.furucombo-link { color: var(--txt); text-decoration: none; font-weight: 600; padding: 0 4px 0 0; transition: color .2s; }
.furucombo-link:hover { text-decoration: underline; text-decoration-color: var(--txt); text-underline-offset: 3px; }

/* ── About ──────────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 29px; align-items: start; }
.about-photo { width: 100%; aspect-ratio: 4/5; background: #d0d0d0; overflow: hidden; border-radius: 10px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* About social icon-text buttons (LinkedIn, X) */
.about-socials { display: flex; align-items: center; margin-top: 40px; flex-wrap: wrap; row-gap: 16px; }
.about-socials a:not(:last-child) { margin-right: 100px; }
.about-socials a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--txt); text-decoration: none;
}
.about-socials svg { height: 30px; width: 30px; display: block; flex-shrink: 0; transition: transform 0.15s ease-out; will-change: transform; }
.about-socials a:hover svg { transform: scale(1.12); }
.about-socials a:active svg { transform: scale(1.0); }
/* X icon 15% smaller for optical balance with LinkedIn icon */
.about-socials a[href*="x.com"] svg { height: 25.5px; width: 25.5px; }
.about-socials a[href*="x.com"] { gap: 7.5px; }
.about-social-label {
  font-family: var(--head);
  font-size: clamp(1.0625rem, 1.56vw, 1.375rem);
  font-weight: 500;
  color: rgb(38,38,38);
  letter-spacing: -0.00392em;
  line-height: 1.3;
}
.about-socials a:hover .about-social-label {
  text-decoration: underline;
  text-decoration-color: var(--txt);
  text-underline-offset: 3px;
}
.about-name {
  font-family: var(--head); font-size: clamp(1.2rem, 2.5vw, 2.1rem);
  font-weight: 500; letter-spacing: -0.008624em; line-height: 1.2;
  color: var(--txt); margin-top: 12px; margin-bottom: 0;
}
.interests { list-style: none; margin-top: 0; }
.interests li {
  font-size: 1rem; color: var(--txt);
  line-height: 1.4; padding: 0;
  border: none;
}


/* ── Source Links ───────────────────────────────────────────────── */
.source-links { margin-top: 48px; }
.source-label {
  font-family: var(--head); font-size: clamp(1.25rem, 1.88vw, 1.625rem) !important; font-weight: 600;
  letter-spacing: -0.00392em; line-height: 1.3;
  color: var(--txt) !important; margin-bottom: 12px;
}
.source-list { list-style: none; }
.source-list li { margin-bottom: 20px; line-height: 1.625; }
.source-list a {
  font-family: var(--body); font-size: 1.125rem; line-height: 1;
  color: var(--txt); text-decoration: none;
  transition: color .2s;
}
.source-list a:hover {
  text-decoration: underline;
  text-decoration-color: var(--txt);
  text-underline-offset: 3px;
}
.ext-arrow {
  display: inline-block;
  width: 0.85em; height: 0.85em;
  vertical-align: middle;
  position: relative; top: -0.1em;
  margin-left: 3px;
  flex-shrink: 0;
}


.footer-inner {
  display: grid; 
  grid-template-columns: 1fr; 
  gap: clamp(40px, 4vw, 50px); 
  align-items: end;
}
.footer-cta {
  font-family: var(--head); font-size: 1.25rem; font-weight: 500;
  color: rgb(153,153,153); margin-bottom: 15px;
}
.footer-email {
  font-family: var(--mono) !important; font-size: 1rem; font-weight: 700;
  color: var(--txt); text-decoration: none;
  transition: opacity .2s;
}
.footer-email:hover { 
  text-decoration: underline;
  text-decoration-color: var(--txt);
  text-underline-offset: 3px;
}
.footer-meta { text-align: left; margin-top: 0.5em !important; }
.footer-disclaimer { font-size: 10px; color: #cfcfcd; line-height: 1; margin-top: 12px; }
.footer-copy { font-size: 10px; color: #cfcfcd; line-height: 1; }

/* ── Responsive ─────────────────────────────────────────────────── */
/* Typography scales via clamp() in base rules — no breakpoint overrides needed */
/* h3 shrink at boat-section 3-col layout breakpoint (901+) — boat cards only */
@media (min-width: 901px) {
  .bpanel-overlay,
  .boat-strip-simple { font-size: 1.375rem; }
}
/* About — tablet 50/50 (768-1023) */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: 0 40px; }
}
/* About — desktop (≥1024): photo = 1/3 = same width as boat panel, text spans rest */
@media (min-width: 1024px) {
  .about-grid > div:last-child { grid-column: span 2; }
}
/* About — mobile stack (below 768) */
@media (max-width: 767px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Footer: stack only when truly out of room (small phones) */
  #footer .footer-inner > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 80px;
  }
  /* Mobile body text: 18px → 16px for tighter mobile reading rhythm */
  .body-l { font-size: 1rem; }
  .card-body { font-size: 1rem; }
  .source-list a { font-size: 1rem; }
  /* Mobile container padding: 16 → 12 (-25%, narrower edge feel) */
  :root { --col: 12px; }
  /* About socials: tighter spacing to fit two icon-text buttons in mobile width */
  .about-socials a:not(:last-child) { margin-right: 40px !important; }
  /* Hero: text moves up on mobile (more lines wrap = needs more breathing room below nav) */
  #hero { padding-top: 25vh; }
}

/* ── Touch devices: no hover capability ─────────────────────── */
@media (hover: none) {
  /* Email (footer + nav dropdown): always underlined (no hover on touch) */
  .footer-email,
  .nav-dropdown-email { 
    text-decoration: underline !important;
    text-decoration-color: var(--txt) !important;
    text-underline-offset: 3px !important;
  }
  /* Hide Copy tooltips — mailto opens email app instead */
  #footer-email-tooltip,
  #nav-email-tooltip { display: none; }
  /* Back to top arrow always visible on touch */
  .back-to-top-arrow { 
    opacity: 1;
  }
  /* Boat arrows always visible on touch — reset to centered position */
  .boat-strip-simple .boat-arrow,
  .boat-col-1 .bpanel .boat-arrow {
    transform: translateY(-50%);
  }
}

@media (max-width: 900px) {
  :root { --col: 20px; }
  .cards { grid-template-columns: 1fr; gap: 17px; }
  .card:nth-child(3) { grid-column: auto; }
  .card { min-height: 0; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-meta { text-align: left; }
  .footer-disclaimer { max-width: none; }
  .boat-section { grid-template-columns: 1fr; gap: 17px; }
  .bpanel-desktop { display: none; }
  .boat-btn-desktop { display: none; }
  
  /* Mobile: col 1 keeps animation, col 2-3 become simple strips */
  .boat-col-1 .bpanel { display: block; }
  .boat-col-2 .bpanel,
  .boat-col-3 .bpanel { display: none !important; }
  /* Mobile: arrow always visible on col 1 bpanel (no hover on touch) */
  .boat-col-1 .bpanel .boat-arrow { opacity: 1; }
  /* Mobile strip: arrow aligned with 25px padding */
  .boat-strip-simple .boat-arrow { right: 25px; }
  .boat-strip-simple { 
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 24px 57px 35px 25px;
    color: rgba(249,248,247,0.9);
    line-height: 0.95;
    text-decoration: none;
    position: relative;
  }
  .boat-strip-simple .bpanel-arrow {
    position: absolute;
    right: 25px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .boat-strip-simple .boat-strip-part {
    color: rgba(249,248,247,0.5);
    font-size: 1rem;
    line-height: 1;
  }
  .boat-strip-simple .boat-strip-title {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  
  .boat-labels { grid-template-columns: 1fr; gap: 12px 0; }
  .sec { padding: clamp(60px, 6vw, 80px) 0; }
  section.sec[style*="padding-top:125px"] { padding-top: 83px !important; }
  /* 2× padding overrides — mobile values */
  #work { padding-top: clamp(120px, 12vw, 160px); }
  #about { padding-bottom: clamp(248px, 24vw, 374px); }
}
@media (max-width: 640px) {
}
@media (min-width: 901px) {
  :root {
    /* Match tablet/mobile: fixed 20px regardless of viewport size */
    --col:     20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ── ESSAY PAGE — article reading layout ──────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════ */

/* Article close button (essay page) — mobile left, desktop right */
.article-close {
  position: fixed;
  top: 14.5px;
  left: var(--col);
  right: auto;
  z-index: 200;
  width: 50px;
  height: 35px;
  background: var(--btn-dark);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
}
/* Desktop / tablet ≥768: close button moves to right side */
@media (min-width: 768px) {
  .article-close {
    left: auto;
    right: var(--col);
  }
}
@media (hover: hover) {
  .article-close:hover {
    background: rgba(218, 218, 216, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--txt);
    transform: scale(1.05);
  }
}
.article-close:active { transform: scale(1.0); }
.article-close svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Close button stays visible always — does NOT hide on scroll */

/* Lighter solid background for article main content — wave only shows in footer */
.article-hero,
.article-cover-section,
.article-body {
  background: #f9f8f7;
  position: relative;
  z-index: 1;
}

/* Article hero: date + title (no nav stretch) */
.article-hero {
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
/* Date — same look as homepage section labels */
.article-date {
  font-family: var(--head);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 400;
  color: rgb(153,153,153) !important;
  letter-spacing: 0.02028em;
  line-height: 1.1;
  margin-bottom: 24px;
}

/* Sticky wrapper (page-level, lives above article-hero) */
.breadcrumb-sticky {
  position: sticky;
  top: 63px;
  z-index: 50;
  background: #f9f8f7;
  padding: 24px 0 16px;
  transition: padding 0.3s ease-out;
}
.breadcrumb-sticky.is-stuck {
  padding: 1px 0 10px;
}
/* Hide breadcrumb content when mobile menu is open, but keep wrapper bg
   so the lighter cream stays continuous with nav (avoids body color flash) */
body:has(#nav.menu-open) .breadcrumb-sticky > .w {
  visibility: hidden;
}
/* Breadcrumb row (inside sticky wrapper) */
.breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.breadcrumb-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgb(153,153,153);
  transition: gap 0.3s ease-out;
}
.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(218, 218, 216, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgb(38,38,38);
  padding: 6px;
  border-radius: 100px;
  flex-shrink: 0;
  transition: transform 0.25s ease-out, padding 0.3s ease-out;
}
.breadcrumb-back svg {
  width: 20px;
  height: 20px;
  display: block;
  transition: width 0.3s ease-out, height 0.3s ease-out;
}
/* When sticky-stuck (scrolled past natural position): shrink only the arrow to 70% */
.breadcrumb-sticky.is-stuck .breadcrumb-back { padding: 4.2px; }
.breadcrumb-sticky.is-stuck .breadcrumb-back svg { width: 14px; height: 14px; stroke-width: 2.5; }
.breadcrumb-sticky.is-stuck .breadcrumb-group { gap: 8px; }
/* Hover the whole group: arrow slides left + Index turns black + underline */
.breadcrumb-group:hover .breadcrumb-back {
  transform: translateX(-4px);
}
.breadcrumb-group:hover .breadcrumb-link {
  color: var(--txt) !important;
  text-decoration: underline;
  text-decoration-color: var(--txt);
  text-underline-offset: 3px;
}
.breadcrumb-link {
  color: rgb(153,153,153);
  font-family: var(--head);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 400;
  letter-spacing: 0.02028em;
  line-height: 1.1;
  transition: color .2s;
}
.breadcrumb-suffix {
  font-family: var(--head);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 400;
  color: rgb(153,153,153);
  letter-spacing: 0.02028em;
  line-height: 1.1;
}
.breadcrumb-date {
  font-family: var(--mono);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 500;
  color: rgb(153,153,153) !important;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin: 50px 0 24px;
}
.article-cover {
  position: relative; overflow: hidden;
  display: block; background: #1a1a1a;
  border-radius: 10px;
  height: calc(50vh + 5px);
}
/* Mobile: switch to 5:3 aspect ratio (was 50vh — too tall on phones) */
@media (max-width: 900px) {
  .article-cover {
    height: auto;
    aspect-ratio: 5 / 3;
  }
}
.article-cover canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
/* Spacing from cover to first section title — applied as padding so bg fills the gap */
.article-cover-section {
  padding-bottom: clamp(24px, 3vw, 48px);
}

/* Article body — main padding-top halved from .sec default */
.article-body {
  padding-top: clamp(40px, 4vw, 60px);
  padding-bottom: clamp(248px, 24vw, 374px);
}
.article-section {
  scroll-margin-top: 96px; /* anchor offset for fixed nav */
  /* Section-to-section spacing — matches homepage two-section gap rhythm */
  margin-bottom: clamp(160px, 16vw, 240px);
}
.article-section:last-child { margin-bottom: 0; }
.article-section .body-l + .body-l { margin-top: 0; }

/* Article inline subheadings */
/* Big subheading — same visual style as homepage .card-title */
.article-lead-h {
  font-family: var(--head);
  font-size: clamp(1.25rem, 1.88vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.00392em;
  line-height: 1.3;
  color: var(--txt);
  margin: 32px 0 16px;
}
/* Mid subheading — same visual style as homepage .source-label */
.article-mid-h {
  font-family: var(--head);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.00392em;
  line-height: 1.3;
  color: var(--txt);
  margin: 56px 0 14px;
}
/* Quiet variant — same size/spacing as article-mid-h, but gray.
   Used for reflective/rhetorical questions and their answers. */
.article-mid-h-quiet {
  font-family: var(--head);
  font-size: clamp(1.02rem, 2.125vw, 1.445rem);
  font-weight: 500;
  letter-spacing: -0.00392em;
  line-height: 1.3;
  color: rgb(153,153,153) !important;
  margin: 84px 0 14px;
}
/* When a quiet line follows another quiet line, collapse top margin
   so consecutive reflective lines read as one continuous thought. */
.article-mid-h-quiet + .article-mid-h-quiet {
  margin-top: 8px !important;
}
/* The last quiet line in a run: give it a bottom margin matching the
   group's top margin, so the gap after the group matches the gap before. */
.article-mid-h-quiet:has(+ :not(.article-mid-h-quiet)),
.article-mid-h-quiet:last-child,
.article-mid-h-quiet-dark:last-child,
.article-mid-h-quiet-dark:has(+ :not(.article-mid-h-quiet, .article-mid-h-quiet-dark)) {
  margin-bottom: 84px;
}
/* Dark variant — same as quiet but with default text color (used for definitive answers
   in a quiet group where preceding lines are reflective gray). */
.article-mid-h-quiet-dark {
  font-family: var(--head);
  font-size: clamp(1.02rem, 2.125vw, 1.445rem);
  font-weight: 500;
  letter-spacing: -0.00392em;
  line-height: 1.3;
  color: var(--txt);
  margin: 84px 0 14px;
}
/* When dark follows a quiet (or quiet-dark) line, collapse top margin
   to keep the group continuous. */
.article-mid-h-quiet + .article-mid-h-quiet-dark,
.article-mid-h-quiet-dark + .article-mid-h-quiet-dark {
  margin-top: 8px !important;
}
/* And the inverse: quiet following quiet-dark also stays tight. */
.article-mid-h-quiet-dark + .article-mid-h-quiet {
  margin-top: 8px !important;
}

/* Lead-in sentence — adds extra space ABOVE to separate from previous content,
   keeps tight bottom margin so the next block (list / answer / em) sits close. */
.body-l.next-block {
  margin-top: 3em;
  margin-bottom: 0.5em;
}

/* Article list — bullets inside, aligned with body left edge */
ul.article-list {
  list-style: disc inside;
  padding-left: 0;
  margin: 0 0 3em;
}
ul.article-list li {
  padding-left: 0.5em;
  line-height: 1.625;
}

/* Sticky right-side TOC */
.article-toc {
  position: fixed;
  right: var(--col);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  list-style: none;
  display: none; /* hidden by default */
  /* Available width = space from content right-edge to viewport, minus 20px gap */
  max-width: calc((100vw - 1120px) / 2 - var(--col) - 20px);
  opacity: 1;
  transition: opacity 0.3s ease-out;
}
.article-toc.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.article-toc li {
  margin-bottom: 16px;
}
.article-toc li:last-child { margin-bottom: 0; }
.article-toc a {
  font-family: var(--head);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(153,153,153);
  text-decoration: none;
  transition: color 0.2s ease-out;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-toc a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.article-toc a.active {
  color: var(--txt);
}
/* Label always rendered; ellipsis truncates based on available width */
.article-toc .toc-label { display: inline; }

/* Show TOC only when viewport has enough space (≥ content max + col + 20gap + 30 for "#1") */
@media (min-width: 1260px) {
  .article-toc { display: block; }
}

/* Article tablet/desktop typography aligned with site — handled by clamp() in base rules */

/* ── Chinese letter-spacing overrides ──────────────────────────── */
/* Chinese characters benefit from positive letter-spacing (loosen),
   unlike Latin which uses negative spacing here. Hierarchy:
   - Large headings: +0.02em (subtle)
   - Sub-headings:   +0.03em
   - Body text:      +0.05em
   - Small labels:   +0.06em (most spacing for clarity at small sizes) */
:lang(zh-Hant) .hero-h1,
:lang(zh-Hant) .h2,
:lang(zh-Hant) h2 {
  letter-spacing: 0.02em;
}
:lang(zh-Hant) .article-lead-h,
:lang(zh-Hant) .article-mid-h,
:lang(zh-Hant) .card-title,
:lang(zh-Hant) h3 {
  letter-spacing: 0.03em;
}
:lang(zh-Hant) .body-l,
:lang(zh-Hant) .card-body,
:lang(zh-Hant) .article-body p,
:lang(zh-Hant) .article-body li {
  letter-spacing: 0.05em;
}
:lang(zh-Hant) .body-l-grey {
  letter-spacing: 0.03em;
}
:lang(zh-Hant) .sec-label,
:lang(zh-Hant) .source-label,
:lang(zh-Hant) .source-list,
:lang(zh-Hant) .footer-cta,
:lang(zh-Hant) .footer-disclaimer,
:lang(zh-Hant) .about-social-label {
  letter-spacing: 0.06em;
}