/* Hallmark · genre: editorial · macrostructure: shared-chrome · design-system: design.md · designed-as-app
 * Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */
@import "../tokens.css";

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:132px}
body{
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* fixed dot-grid texture */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(oklch(from var(--color-ink) l c h / 0.05) 1px,transparent 1px);
  background-size:28px 28px;
}
::selection{background:var(--color-accent);color:var(--color-accent-ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;position:relative;z-index:2}

/* ---------- label register (replaces mono) ---------- */
.tag{
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted);
  display:flex;align-items:center;gap:14px;
}
.tag::before{content:"";width:34px;height:1px;background:var(--color-accent)}
.tag .num{color:var(--color-accent)}

/* ---------- buttons (CTA voice) ---------- */
.btn{
  font-family:var(--font-body);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  min-height:44px;padding:14px 30px;border-radius:var(--radius-card);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;
  transition:background-color var(--dur-med) var(--ease-out),border-color var(--dur-med) var(--ease-out),color var(--dur-med) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--color-accent);color:var(--color-accent-ink)}
.btn-red:hover{background:var(--color-paper);border-color:var(--color-accent);color:var(--color-accent)}
.btn-ghost{background:transparent;border-color:var(--color-rule-strong);color:var(--color-ink)}
.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* ---------- fixed site header: N12 banner + nav ---------- */
.site-head{
  --banner-h:40px;
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform var(--dur-med) var(--ease-in-out);
}
.site-head.banner-hidden{transform:translateY(calc(-1 * var(--banner-h)))}
.site-banner{
  display:block;height:var(--banner-h);line-height:var(--banner-h);
  padding:0 var(--space-sm);text-align:center;
  background:var(--color-accent);color:var(--color-accent-ink);
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background-color var(--dur-short) var(--ease-out);
}
.site-banner:hover{background:var(--color-accent-deep)}
nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;
  background:color-mix(in oklch,var(--color-paper) 62%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-med) var(--ease-out),background-color var(--dur-med) var(--ease-out);
}
nav.scrolled{border-bottom-color:var(--color-rule);background:color-mix(in oklch,var(--color-paper) 86%,transparent)}
nav .brand{display:flex;align-items:center;gap:16px;text-decoration:none}
nav .brand img{height:44px;width:auto}
.brand-text{display:flex;flex-direction:column;gap:4px;padding-left:16px;border-left:1px solid var(--color-rule-strong)}
.brand-text .bt-top{font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted)}
.brand-text .bt-hk{font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1;letter-spacing:-0.01em;text-transform:uppercase;color:var(--color-accent)}
nav .links{display:flex;gap:34px;align-items:center}
nav .links a{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-muted);
  transition:color var(--dur-short) var(--ease-out);position:relative;
}
nav .links a:hover{color:var(--color-ink)}
nav .links a:hover::after,
nav .links a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--color-accent);
}
nav .links a.on{color:var(--color-ink)}
nav .links a.lang{border:1px solid var(--color-rule-strong);padding:8px 14px;color:var(--color-muted)}
nav .links a.lang:hover{border-color:var(--color-accent);color:var(--color-accent)}
nav .links a.lang:hover::after{content:none}
nav .links a.lang b{color:var(--color-accent);font-weight:700}

/* ---------- section head (shared · S2 hanging) ---------- */
.sec-head{margin-bottom:var(--space-2xl)}
.sec-head h2{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:-0.01em;line-height:1.04;
  font-size:clamp(2.2rem,4.2vw,3.8rem);color:var(--color-ink);
}
.sec-head p{margin-top:18px;color:var(--color-muted)}
h2 .r{color:var(--color-accent)}
/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.c-card{
  background:var(--color-surface);border:1px solid var(--color-rule);padding:30px 28px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out);
}
a.c-card:hover{border-color:var(--color-accent);transform:translateY(-2px)}
.c-tag{font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent)}
.c-val{font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--color-ink);overflow-wrap:anywhere;line-height:1.2}
.c-sub{color:var(--color-muted);font-size:var(--text-sm)}
.c-icons{display:flex;gap:12px}
.c-icons a{
  width:46px;height:46px;border:1px solid var(--color-rule-strong);
  display:flex;align-items:center;justify-content:center;color:var(--color-muted);
  transition:border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out);
}
.c-icons a:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* ---------- footer : Ft1 mast-headed, dark ink band ---------- */
footer{
  background:var(--color-ink);
  color:oklch(from var(--color-accent-ink) l c h / 0.62);
  padding:60px 0 40px;position:relative;z-index:2;
}
.foot{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.foot-brand{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot-brand img{height:44px;width:auto;opacity:.95}
.foot-name{
  font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-accent-ink);
}
.foot-tag{font-size:var(--text-sm);color:oklch(from var(--color-accent-ink) l c h / 0.62)}
.foot .fl{display:flex;gap:26px;flex-wrap:wrap}
.foot .fl a{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:oklch(from var(--color-accent-ink) l c h / 0.55);
  transition:color var(--dur-short) var(--ease-out);
}
.foot .fl a:hover{color:var(--color-accent-bright)}
.foot small{
  flex-basis:100%;margin-top:8px;padding-top:24px;
  border-top:1px solid oklch(from var(--color-accent-ink) l c h / 0.14);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:oklch(from var(--color-accent-ink) l c h / 0.55);
}
.foot small a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  transition:color var(--dur-short) var(--ease-out);
}
.foot small a:hover{color:var(--color-accent-bright)}

/* ---------- mobile nav menu ---------- */
.nav-toggle{display:none}
@media(max-width:980px){
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;padding:0;
    background:transparent;border:1px solid var(--color-rule-strong);cursor:pointer;
    transition:border-color var(--dur-short) var(--ease-out);
  }
  .nav-toggle span{
    display:block;width:18px;height:2px;background:var(--color-ink);
    transition:transform var(--dur-short) var(--ease-out),opacity var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out);
  }
  .nav-toggle:hover{border-color:var(--color-accent)}
  .nav-toggle:hover span{background:var(--color-accent)}
  nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
  nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav .links{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:99;
    height:calc(100vh - 100%);height:calc(100dvh - 100%);
    flex-direction:column;align-items:stretch;gap:0;
    background:color-mix(in oklch,var(--color-paper) 98%,transparent);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--color-rule-strong);
    padding:64px 28px 36px;overflow:auto;
  }
  nav.menu-open .links{display:flex}
  nav.menu-open .links a:not(.btn):not(.lang){display:block}
  nav.menu-open .links a:not(.btn):not(.lang):hover::after{content:none}
  nav .links a:not(.btn):not(.lang){
    padding:22px 4px;border-bottom:1px solid var(--color-rule);
    font-size:1rem;letter-spacing:.14em;
  }
  nav .links a.lang{
    position:absolute;top:20px;right:28px;
    display:inline-flex;align-items:center;min-height:44px;
  }
  nav .links a.btn{margin-top:30px;justify-content:center;min-height:52px;font-size:.8rem}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  nav{padding:14px 20px}
  nav .brand img{height:38px}
  .brand-text{padding-left:12px}
  .brand-text .bt-top{font-size:.62rem}
  .brand-text .bt-hk{font-size:.9rem}
  .foot{flex-direction:column;align-items:flex-start;gap:24px}
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--color-ink);color:var(--color-accent-ink);padding:14px 22px;
}
.skip-link:focus{left:0}

/* ---------- visible focus ---------- */
:where(a:any-link,button):focus-visible{
  outline:2px solid var(--color-focus);outline-offset:3px;
}
.cta-panel :where(a:any-link,button):focus-visible,
.site-banner:focus-visible,
.btn-red:focus-visible,
.page-head :where(a:any-link):focus-visible,
footer :where(a:any-link):focus-visible{outline-color:var(--color-accent-ink)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .site-head{transition:none}
  .ticker-track{animation:none!important}
  .hero-bot img{animation:none!important}
}

/* ---------- shared page head (why / guide) ---------- */
.page-head{
  padding:190px 0 90px;position:relative;overflow:hidden;
  background:url("../assets/why-hall.jpg") center 38%/cover no-repeat;
}
.page-head::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    oklch(from var(--color-ink) l c h / 0.82) 0%,
    oklch(from var(--color-ink) l c h / 0.70) 55%,
    oklch(from var(--color-ink) l c h / 0.86) 100%);
}
.page-head .ph-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:60px;align-items:center;position:relative}
.page-head .tag{color:oklch(from var(--color-accent-ink) l c h / 0.72)}
.page-head h1{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.04;margin-top:26px;color:var(--color-paper);
}
.page-head h1 .r{color:var(--color-accent-bright)}
.page-head .lead{max-width:620px;color:oklch(from var(--color-paper) l c h / 0.82);font-size:1.08rem;margin-top:28px}
.ph-city{position:relative}
.ph-city img{height:auto;filter:drop-shadow(0 24px 48px oklch(from var(--color-ink) l c h / 0.45))}

/* ---------- floating quick links (right edge) ---------- */
.float-links{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:10px}
.float-link{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:18px 12px;color:var(--color-accent-ink);background:var(--color-ink);
  border:1px solid var(--color-ink);border-right:none;
  transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out);
}
.float-link:hover{transform:translateX(-6px);box-shadow:0 4px 24px oklch(from var(--color-ink) l c h / 0.06)}
.float-link.fl-red{background:var(--color-accent);border-color:var(--color-accent)}
/* the rail overlaps page content on narrow viewports — the banner and nav
 * already carry these actions there */
@media(max-width:768px){.float-links{display:none}}

/* CJK glyphs need taller line boxes than Latin caps */
:lang(zh) h1,:lang(zh) h2{line-height:1.15}
:lang(zh) .sec-head h2,:lang(zh) .page-head h1,:lang(zh) .brand-text .bt-hk{letter-spacing:0}

/* wide Latin tracking doesn't suit CJK labels — reset spacing & case */
:lang(zh) .tag,:lang(zh) .btn,:lang(zh) nav .links a,:lang(zh) .site-banner,
:lang(zh) .coll-cap,:lang(zh) .cd-link,:lang(zh) .map-note,
:lang(zh) .status-chip,:lang(zh) .float-link,
:lang(zh) .foot .fl a,:lang(zh) .foot small,:lang(zh) .foot-name,
:lang(zh) .c-tag,:lang(zh) .rd-tag,
:lang(zh) .skip-link,:lang(zh) .brand-text .bt-top{letter-spacing:.06em;text-transform:none}