/* HAKKA holding page. GENERATED by tools/holding-page/build.mjs from docs/design/holding-page/project. Do not edit by hand. */
/* ---- Main.dc.html <helmet> (the page), verbatim ---- */
body { margin: 0; background: #F4F1EC; }
a { color: #1D1B18; }
a:hover { color: #A63A24; }
.hk-cap4 a:hover { color: #E7B95A !important; }
.hk *:focus-visible { outline: 2px solid #1D1B18; outline-offset: 3px; border-radius: 8px; }
/* The story is one screen tall, and its box is the layout's only measure: the component reads the box (box(), geo()),
   never the window. 100svh is the viewport with the browser's bars showing — on phones 100vh is the taller one without
   them, and window.innerHeight moves between the two — so a whole frame, caption included, is on screen with the bars
   there, and nothing is laid out again when they slide away. Browsers without svh (before 2022) get the window's
   visible height from the component instead (--vh, fitViewport()); 100vh is only what is left if no script runs.
   The padding carries the home indicator's inset into the measure (box()); absolutely placed children ignore it. */
.hk-story { box-sizing: border-box; height: 100vh; height: calc(var(--vh, 1vh) * 100); padding-bottom: env(safe-area-inset-bottom, 0px); }
@supports (height: 100svh) { .hk-story { height: 100svh; } }
html, body { overscroll-behavior-y: none; }
.hk-step { transition: color 240ms ease; }
.hk-stepdot { transition: background-color 240ms ease, box-shadow 240ms ease; }
.hk-hdr { transition: background-color 400ms, box-shadow 400ms; }
.hk-prog { transition: opacity 400ms; }
/* language toggle (ES · 中文): plain text, no pill or icon. The active language is black and semibold over a short thin
   underline; the other one is a muted warm grey that darkens on hover. */
.hk-lang { display: flex; align-items: center; gap: 22px; }
.hk-lb { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; line-height: 16px; letter-spacing: 0.02em; transition: color 180ms ease; -webkit-tap-highlight-color: transparent; }
.hk-lb[aria-pressed="false"]:hover { color: #3A3530 !important; }
.hk-lbt { position: relative; display: inline-flex; flex-direction: column; }
.hk-lbt::after { content: attr(data-t); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }   /* keeps the semibold width: nothing shifts when the weight changes */
.hk-lbu { position: absolute; left: 0; right: 0; top: calc(100% + 5px); height: 2px; border-radius: 1px; background: #1D1B18; transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.hk-lsep { flex: 0 0 auto; width: 1px; height: 13px; margin: 0 28px 0 30px; background: rgba(29,27,24,0.2); }
/* narrow screens: a second row under the header (progress on the left, language on the right). Like the header it is
   paper at all times, so it never sits on top of the letter; only its hairline waits for the page to leave the top. */
.hk-row2 { position: absolute; left: 0; right: 0; top: 100%; height: 30px; box-sizing: border-box; padding: 0 40px; display: flex; align-items: center; gap: 12px; transition: background-color 400ms, box-shadow 400ms; }
.hk-row2 .hk-lang { margin-left: auto; gap: clamp(14px, calc(10vw - 19px), 20px); }
.hk-cmp .hk-lsec { padding-top: 128px; }
/* Simplified Chinese: CJK glyphs come from the system's Chinese fonts (the letter's serif lines: Noto Serif SC); no
   negative tracking, a little more leading, and headings and captions break only between phrases (\200B marks). */
.hk:lang(zh) { --zhs: 0.92; }
.hk:lang(zh) .hk-t1, .hk:lang(zh) .hk-h1 { margin-left: 0 !important; letter-spacing: 0.01em !important; line-height: 1.14 !important; }
.hk:lang(zh) .hk-tc, .hk:lang(zh) .hk-h2 { letter-spacing: 0.01em !important; line-height: 1.24 !important; word-break: keep-all; overflow-wrap: anywhere; }
.hk:lang(zh) .hk-ts, .hk:lang(zh) .hk-sub { line-height: 1.7 !important; word-break: keep-all; overflow-wrap: anywhere; }
.hk:lang(zh) .hk-tl, .hk:lang(zh) .hk-lede { line-height: 1.75 !important; word-break: keep-all; overflow-wrap: anywhere; }
.hk:lang(zh) .hk-eyebrow { letter-spacing: 0.12em !important; }
.hk:lang(zh) .hk-lhead { letter-spacing: 0.02em !important; }
.hk:lang(zh) .hk-lbody { line-height: 1.9 !important; }
.hk:lang(zh) .hk-lclose { line-height: 1.65 !important; letter-spacing: 0.02em !important; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .hk-hdr { height: 60px !important; padding: 0 16px !important; }
  .hk-progwide { display: none !important; }
  .hk-row2 { padding: 0 16px !important; }
  .hk-h1 { font-size: calc(min(35px, calc((100vw - 32px) / 10.2)) * var(--zhs, 1)) !important; }
  .hk-lede { font-size: 16px !important; margin-top: 14px !important; }
  .hk-h2 { font-size: calc(27px * var(--zhs, 1)) !important; }
  .hk-sub { font-size: 16px !important; }
  .hk-sec { padding: 116px 16px 96px !important; }
}
/* the letter: one sheet of stationery. Fluid below 780px wide; type and padding scale with the viewport. */
.hk-lsec { padding: 100px clamp(16px, 5vw, 48px) 64px; }
.hk-lwrap { max-width: 780px; margin: 0 auto; }
.hk-eyebrow { margin-bottom: 28px; }
.hk-card { padding: clamp(28px, 4.2vw, 60px) clamp(22px, 5vw, 72px) clamp(32px, 3.8vw, 54px); }
.hk-lhead { font-size: clamp(30px, calc(20px + 1.6vw), 42px); }
.hk-lbody { font-size: clamp(16px, calc(14px + 0.45vw), 17px); }
.hk-lclose { font-size: clamp(19px, calc(16.8px + 0.3vw), 21px); }
@media (max-width: 760px) {
  .hk-lsec { padding: 84px 16px 48px; }
  .hk-cmp .hk-lsec { padding-top: 114px; }
  .hk-eyebrow { margin-bottom: 20px; }
}
/* (the story is never veiled: a frame that is scrolling away, or back in, is shown as it is) */
/* Nothing of the scene that cannot be seen is rendered — it would be styled, laid out and held in compositing layers
   for nothing (paint(), onScroll()): the facility's beats before they begin (their items are at opacity 0 until then),
   the store window, tiles and shelf once the drawing has taken over (opacity 0 from p 0.752), and the whole scene
   while the story is scrolled out of sight. */
.hk-pre-st .hk3 .bt-st, .hk-pre-wl .hk3 .bt-wl, .hk-pre-dk .hk3 .bt-dk, .hk-pre-tk .hk3 .bt-tk, .hk-pre-sh .hk3 .bt-sh, .hk-pre-pp .hk3 .bt-pp, .hk-pre-sg .hk3 .bt-sg { display: none; }
.hk-noshelf .hk3 > :not(.env), .hk-off .hk3 { display: none; }
/* ---- Stage.dc.html <helmet> (the scene), verbatim ---- */
body{margin:0}
.hk3 *{box-sizing:border-box}
.hk3 .p3{position:absolute;left:0;top:0;transform-style:preserve-3d}
.hk-noenv .hk3 .env{display:none}
.hk3 .env{background:rgba(62,58,53,var(--pvb))}
.hk3:not(.hkc) .hk-c, .hk3.hkc .hk-d{display:none}
@property --od { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --oc { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --w { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --o { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --t { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --e { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --gk { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --gc { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --pa { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --pb { syntax: '<number>'; inherits: false; initial-value: 0; }
.hk3 .bt-ru { --o: var(--od); --t: clamp(0, calc((var(--bru) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: clamp(0, calc(var(--t) * 6), 1); transform: matrix(1, calc(var(--gk) * (1 - var(--e))), 0, var(--e), 0, calc((1 - var(--e)) * var(--gc))); }
.hk3.hkc .bt-ru { --o: var(--oc); }
.hk3 .bt-rp { --o: var(--od); --t: clamp(0, calc((var(--brp) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: var(--e); }
.hk3.hkc .bt-rp { --o: var(--oc); }
.hk3 .bt-rb { --o: var(--od); --t: clamp(0, calc((var(--brb) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: clamp(0, calc(var(--t) * 6), 1); transform: matrix(calc((1 + var(--e)) / 2), calc(0.28868 * (1 - var(--e))), calc(0.86603 * (1 - var(--e))), calc((1 + var(--e)) / 2), calc((1 - var(--e)) * var(--pa)), calc((1 - var(--e)) * var(--pb))); }
.hk3.hkc .bt-rb { --o: var(--oc); }
.hk3 .bt-rc { --o: var(--od); --t: clamp(0, calc((var(--brc) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: clamp(0, calc(var(--t) * 3), 1); transform: translate(0px, calc((1 - var(--e)) * -26px)); }
.hk3.hkc .bt-rc { --o: var(--oc); }
.hk3 .bt-rl { --o: var(--od); --t: clamp(0, calc((var(--brl) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: var(--e); }
.hk3.hkc .bt-rl { --o: var(--oc); }
.hk3 .bt-st { --o: var(--od); --t: clamp(0, calc((var(--bst) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: clamp(0, calc(var(--t) * 4), 1); transform: translate(0px, calc((1 - var(--e)) * 30px)); }
.hk3.hkc .bt-st { --o: var(--oc); }
.hk3 .bt-wl { --o: var(--od); --t: clamp(0, calc((var(--bwl) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: clamp(0, calc(var(--t) * 6), 1); transform: matrix(1, calc(var(--gk) * (1 - var(--e))), 0, var(--e), 0, calc((1 - var(--e)) * var(--gc))); }
.hk3.hkc .bt-wl { --o: var(--oc); }
.hk3 .bt-dk { --o: var(--od); --t: clamp(0, calc((var(--bdk) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: clamp(0, calc(var(--t) * 4), 1); transform: translate(0px, calc((1 - var(--e)) * 24px)); }
.hk3.hkc .bt-dk { --o: var(--oc); }
.hk3 .bt-tk { --o: var(--od); --t: clamp(0, calc((var(--btk) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: clamp(0, calc(var(--t) * 3), 1); transform: translate(calc((1 - var(--e)) * -1060.7px), calc((1 - var(--e)) * 612.4px)); }
.hk3.hkc .bt-tk { --o: var(--oc); }
.hk3 .bt-sh { --o: var(--od); --t: clamp(0, calc((var(--bsh) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: clamp(0, calc(var(--t) * 4), 1); transform: translate(0px, calc((1 - var(--e)) * 26px)); }
.hk3.hkc .bt-sh { --o: var(--oc); }
.hk3 .bt-pp { --o: var(--od); --t: clamp(0, calc((var(--bpp) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: clamp(0, calc(var(--t) * 4), 1); transform: translate(0px, calc((1 - var(--e)) * 14px)); }
.hk3.hkc .bt-pp { --o: var(--oc); }
.hk3 .bt-sg { --o: var(--od); --t: clamp(0, calc((var(--bsg) - var(--o)) / var(--w)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); opacity: var(--e); }
.hk3.hkc .bt-sg { --o: var(--oc); }
.hk3 .cl-fl { --e0: calc(var(--cfl0) * var(--cfl0) * (3 - 2 * var(--cfl0))); --e1: calc(var(--cfl1) * var(--cfl1) * (3 - 2 * var(--cfl1))); --e2: calc(var(--cfl2) * var(--cfl2) * (3 - 2 * var(--cfl2))); transform: matrix(calc(882.469 + 1414.214 * var(--e0) + 1663.115 * var(--e2)), calc(-509.494 + -816.497 * var(--e0) + -960.2 * var(--e2)), calc(480.833 + 1107.541 * var(--e1) + 2194.647 * var(--e2)), calc(277.609 + 639.439 * var(--e1) + 1267.08 * var(--e2)), calc(5393.08 + -587.747 * var(--e0) + -1107.541 * var(--e1) + -1611.143 * var(--e2)), calc(4924.107 + 339.336 * var(--e0) + -639.439 * var(--e1) + 249.481 * var(--e2))); }
.hk3.hkc .cl-fl { --e0: calc(var(--cfl0) * var(--cfl0) * (3 - 2 * var(--cfl0))); --e1: calc(var(--cfl1) * var(--cfl1) * (3 - 2 * var(--cfl1))); --e2: calc(var(--cfl2) * var(--cfl2) * (3 - 2 * var(--cfl2))); transform: matrix(calc(588.313 + 1708.37 * var(--e0) + 1663.115 * var(--e2)), calc(-339.663 + -986.328 * var(--e0) + -960.2 * var(--e2)), calc(480.833 + 1107.541 * var(--e1) + 2194.647 * var(--e2)), calc(277.609 + 639.439 * var(--e1) + 1267.08 * var(--e2)), calc(4951.845 + -146.513 * var(--e0) + -1107.541 * var(--e1) + -1611.143 * var(--e2)), calc(5178.854 + 84.589 * var(--e0) + -639.439 * var(--e1) + 249.481 * var(--e2))); }
.hk3 .cl-pv { --s: calc(0.0 + 7.0 * calc(var(--cpv0) * var(--cpv0) * (3 - 2 * var(--cpv0))) + 9.0 * calc(var(--cpv1) * var(--cpv1) * (3 - 2 * var(--cpv1)))); transform: matrix(var(--s), 0, 0, var(--s), calc((1 - var(--s)) * var(--cx)), calc((1 - var(--s)) * var(--cy))); }
.hk3 .cl-sf { --s: calc(0.0 + 1.0 * calc(var(--csf0) * var(--csf0) * (3 - 2 * var(--csf0)))); transform: matrix(var(--s), 0, 0, var(--s), calc((1 - var(--s)) * var(--cx)), calc((1 - var(--s)) * var(--cy))); }
/* ---- the port ----
   The design renders nothing until its runtime has run; the port ships its markup, so until holding.js has laid the
   page out for this screen (its first render replaces the class) the page stays hidden, and nothing is ever shown
   in another layout. Without JavaScript, noscript.css shows the static markup (header and letter) at once; should
   holding.js fail to load or run, it appears after 8 s. */
.hk-boot { visibility: hidden; animation: hk-boot 0s 8s forwards; }
@keyframes hk-boot { to { visibility: visible; } }