/* Shared navigation: continuous cream surface, orange brand mark and active tab. */
html { height: auto !important; min-height: 100%; overflow-x: clip !important; overflow-y: auto !important; }
body { height: auto !important; min-height: 100%; overflow: visible !important; }
body { background-color: #E8E6D9 !important; }
#site-header { padding: 0 40px; background: #E8E6D9; border-bottom: 2px solid #121212; position: relative; z-index: 60; font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif; }
#site-header *, #site-header *::before, #site-header *::after { box-sizing: border-box; }
.hl-header-shell { max-width: 1200px; margin: 0 auto; }
.hl-nav { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.hl-brand { display: flex; align-items: center; gap: 12px; color: #121212; text-decoration: none; flex-shrink: 0; }
.hl-brand-mark { display: flex; align-items: center; justify-content: center; position: relative; width: 44px; height: 44px; background: #FF5722; border: 2px solid #121212; font-size: 21px; font-weight: 900; letter-spacing: -2px; }
.hl-brand-mark > span { position: absolute; right: 3px; top: 0; font-size: 9px; letter-spacing: 0; }
.hl-brand-name { font-size: 17px; font-weight: 900; line-height: 1.15; letter-spacing: -.04em; }
.hl-brand-name > span { display: block; margin-top: 5px; font-size: 9px; font-weight: 500; letter-spacing: .14em; }
.hl-links { display: flex; align-items: center; gap: 28px; align-self: stretch; }
.hl-links a { display: flex; align-items: center; position: relative; min-height: 44px; color: #121212; font-size: 11px; letter-spacing: .06em; font-weight: 700; text-decoration: none; text-align: center; padding: 12px 0; }
.hl-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 4px; background: #FF5722; transform: scaleX(0); transform-origin: left; transition: transform .15s ease; }
.hl-links a:hover::after, .hl-links a[aria-current]::after { transform: scaleX(1); }
.hl-links a[aria-current] { color: #b72f09; }
#site-header a:focus-visible, .hl-menu-button:focus-visible { outline: 3px solid #FF5722; outline-offset: 4px; }
.hl-menu-button { display: none; }
#root { height: auto !important; min-height: calc(100vh - 86px) !important; overflow: visible !important; }
#root > .h-full, #root .crt-screen { height: auto !important; min-height: calc(100vh - 86px); overflow: visible !important; }
#root main { height: auto !important; overflow-y: visible !important; }
/* Keep the decorative noise inside its screen instead of extending the document. */
#root .crt-noise { inset: 0; width: 100%; height: 100%; }
.hl-loading { padding: 40px 24px; color: #121212; font-family: sans-serif; }
@media (max-width: 767px) {
  #site-header { padding: 0 20px; }
  .hl-nav { min-height: 72px; flex-wrap: wrap; gap: 0; }
  .hl-brand { gap: 10px; }
  .hl-brand-mark { width: 36px; height: 36px; font-size: 18px; }
  .hl-brand-name { font-size: 15px; }
  .hl-brand-name > span { font-size: 8px; }
  .hl-menu-button { display: block; min-height: 44px; border: 0; background: transparent; color: #121212; text-align: right; padding: 8px 0 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer; }
  .hl-links { display: none; width: 100%; flex-basis: 100%; padding: 4px 0 12px; border-top: 1px solid #12121230; }
  .hl-open .hl-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hl-links a { font-size: 12px; padding: 12px; text-align: left; }
  .hl-links a[aria-current] { background: #12121208; }
  .hl-links a::after { top: 10px; bottom: 10px; left: 0; right: auto; width: 3px; height: auto; }
  #root, #root > .h-full, #root .crt-screen { min-height: calc(100vh - 74px) !important; }
  #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); }
}

/* Scalable connected HL monogram, with its border contained in the SVG. */
.hl-brand-mark { border: 0; background: transparent; }
.hl-brand-mark img { display: block; width: 100%; height: 100%; }