/* Shared header based on hong_lam_header.html: orange CRT block, fine grid,
   3px black border, and an 8px offset shadow. */
html, body { height: auto !important; min-height: 100%; overflow-x: hidden !important; overflow-y: auto !important; }
body { background-color: #E8E6D9 !important; }
#site-header { padding: 28px 24px 32px; background: #E8E6D9; position: relative; z-index: 60; font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif; }
#site-header *, #site-header *::before { box-sizing: border-box; }
.hl-header-shell { max-width: 768px; margin: 0 auto; box-shadow: 8px 8px 0 #000; }
.hl-nav { min-height: 64px; border: 3px solid #000; display: flex; align-items: stretch; background-color: #fff; background-image: linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px),linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px); background-size: 15px 15px; }
.hl-orange { position: relative; display: block; width: 160px; flex-shrink: 0; background: #FF5722; border-right: 3px solid #000; }
.hl-orange::before { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 50%,rgba(0,0,0,.08) 50%); background-size: 100% 4px; pointer-events: none; }
.hl-links { display: flex; align-items: center; justify-content: space-evenly; flex: 1; gap: 8px; padding: 8px 16px; }
.hl-links a { display: flex; align-items: center; min-height: 44px; color: #121212; font-size: 12px; font-weight: 700; text-decoration: none; text-align: center; padding: 4px; }
.hl-links a:hover, .hl-links a[aria-current] { color: #FF5722; }
.hl-links a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.hl-menu-button { display: none; }
#root { height: auto !important; min-height: calc(100vh - 124px) !important; overflow: visible !important; }
#root > .h-full, #root .crt-screen { height: auto !important; min-height: calc(100vh - 124px); overflow: visible !important; }
#root main { height: auto !important; overflow-y: visible !important; }
.hl-loading { padding: 40px 24px; color: #121212; font-family: sans-serif; }
@media (max-width: 767px) {
  #site-header { padding: 16px 20px 24px; }
  .hl-nav { min-height: 56px; flex-wrap: wrap; }
  .hl-orange { width: 96px; min-height: 50px; }
  .hl-menu-button { display: block; flex: 1; min-height: 50px; border: 0; background: transparent; color: #121212; text-align: right; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
  .hl-links { display: none; width: 100%; flex-basis: 100%; padding: 8px 16px; border-top: 3px solid #000; }
  .hl-open .hl-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hl-links a { font-size: 14px; padding: 8px; }
  #root main { padding-left: 20px; padding-right: 20px; }
  #root main > .p-12, #root main > .p-8 { padding: 24px 0 48px; }
  #root main .p-12, #root main .p-10, #root main .p-8 { padding: 16px; }
  #root main > .p-12, #root main > .p-8 { padding-left: 0; padding-right: 0; }
  #root main h1, #root main h2, #root main h3, #root main h4 { overflow-wrap: anywhere; }
  #root main .text-8xl, #root main .text-7xl, #root main .text-6xl { font-size: clamp(2rem, 10vw, 3.75rem); }
  #root main .text-5xl { font-size: clamp(1.75rem, 8vw, 3rem); }
  #root main .text-4xl { font-size: clamp(1.4rem, 6vw, 2rem); }
  #root .hl-hero-title { font-size: clamp(2.2rem, 10.5vw, 4.75rem); line-height: .95; }
  #root .hl-hero-heading { padding-left: 0; }
  #root .hl-subtitle span { font-size: 11px; letter-spacing: .06em; overflow-wrap: anywhere; }
  #root .hl-rec-label { padding: 0 8px; }
  #root .hl-rec-label span { font-size: 10px; letter-spacing: .03em; }
  #root .hl-rec-plus { padding: 0 8px; }
  #root .hl-polaroid { transform: none; }
  #root .hl-polaroid .bg-noise { padding: 12px 12px 36px; }
  #root .shadow-black-bold { box-shadow: 8px 8px 0 #121212; }
  #root .hl-caption { flex-direction: column; align-items: stretch; gap: 16px; padding: 0; }
  #root .hl-tags { margin-right: 0; gap: 6px; }
  #root .hl-tags > div > div { padding: 5px 8px; font-size: 12px; letter-spacing: .04em; }
  #root .hl-play { width: 52px; height: 52px; right: -6px; bottom: -16px; }
  #root main .sticky { position: static; }
  #root main .grid-cols-2 { grid-template-columns: minmax(0,1fr); }
  #root main .flex { min-width: 0; }
  #root .hl-project-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  #root .hl-project-actions > div { flex-wrap: wrap; }
  #root footer .p-8, #root footer .p-6 { padding: 24px 20px; }
  #root footer button { min-height: 44px; }
  #root main > div > header { padding: 24px 0; margin-bottom: 40px; }
  #root .hl-title-large { font-size: clamp(2.5rem,12vw,5rem); }
}