/* Aurum Prism v2 · hero light engine (13 Sep 2026). Owns .ap-hero and .ap-ray only; tokens.css loads first.
   The canvas (assets/js/light.js) paints the room: a beam, an equilateral glass prism and the spectral fan.
   Everything here is porcelain on black; colour appears only as light (the ray ticks and hairlines). */

.ap-hero{
  --hero-top:calc(14px + 56px + clamp(36px,6.4vh,84px));
  --hero-ro:46px;
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100svh;
  padding-top:var(--hero-top);
  background:var(--ap-ground);color:var(--ap-ink);
}
/* 15 Sep 2026: the 13 Sep skylight staging restored (operator: "go with 3 or 4"), with the 14 Sep fixes that still
   apply carried over: the room fades in from black once its first frame is drawn with final fonts (a still poster that
   did not match the live layout made the cover jump at startup); the poster is only for no WebGL/Canvas2D or no JS. */
.ap-hero__gl{
  position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;
  background-color:var(--ap-ground);background-size:cover;background-position:62% 50%;background-repeat:no-repeat;
  opacity:0;transition:opacity .6s var(--ap-ease-beam);   /* 15 Sep: was 1.8s ("should be sooner") */
}
.ap-hero.is-lit .ap-hero__gl{opacity:1}
/* the floor labels arrive with the light (placed from the first final layout, so they never jump) */
@media (min-width:700px){
  .ap-hero__rays{opacity:0;transition:opacity .6s var(--ap-ease-beam) .2s}
  .ap-hero.is-lit .ap-hero__rays,.ap-hero.no-light .ap-hero__rays,html.no-js .ap-hero__rays{opacity:1}
}
.ap-hero.no-light .ap-hero__gl,html.no-js .ap-hero__gl{
  opacity:1;
  background-image:url(../img/light-poster-1920.jpg);
  background-image:image-set(url(../img/light-poster-1920.webp) type("image/webp"),url(../img/light-poster-1920.jpg) type("image/jpeg"));
}
@media (max-width:699px),(max-aspect-ratio:3/4){
  .ap-hero.no-light .ap-hero__gl,html.no-js .ap-hero__gl{
    background-image:url(../img/light-poster-900.jpg);
    background-image:image-set(url(../img/light-poster-900.webp) type("image/webp"),url(../img/light-poster-900.jpg) type("image/jpeg"));
    background-position:50% 100%;
  }
}

/* instrument grid: faint column hairlines over the room */
.ap-hero__grid{
  position:absolute;z-index:1;top:0;bottom:0;pointer-events:none;
  left:max(var(--ap-pad),calc((100% - var(--ap-maxw)) / 2));
  right:max(var(--ap-pad),calc((100% - var(--ap-maxw)) / 2));
  border-right:1px solid var(--ap-line);
  background-image:linear-gradient(90deg,var(--ap-line) 0 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;
  opacity:.4;
}

/* ---------- headline block (top-left, over black) ---------- */
.ap-hero__head{
  position:relative;z-index:3;
  width:min(100% - 2 * var(--ap-pad),var(--ap-maxw));margin-inline:auto;
}
/* the label: the Aurum label voice (Inter Tight 500, 13px, sentence case, slate), behind the five-line spectral tick */
.ap-hero__label{
  display:flex;align-items:center;gap:11px;margin:0 0 clamp(18px,2.4vh,26px);
  font-family:var(--ap-sans);font-size:var(--ap-fs-label);font-weight:500;line-height:1.2;
  letter-spacing:var(--ap-track-label);text-transform:none;color:var(--ap-slate-2);
}
/* the tick is drawn, whatever the number of <i> in the markup: five 2px lines, s1..s5 (the same as .ap-label::before) */
.ap-hero__tick{display:block;flex:none;width:14px;height:11px;background:linear-gradient(90deg,var(--ap-s1) 0 2px,transparent 2px 3px,var(--ap-s2) 3px 5px,transparent 5px 6px,var(--ap-s3) 6px 8px,transparent 8px 9px,var(--ap-s4) 9px 11px,transparent 11px 12px,var(--ap-s5) 12px 14px)}
.ap-hero__tick i{display:none}

/* the H1: one family, one voice. The copy flows as two balanced sans lines (the .hl spans no longer force lines) and
   the closing phrase is only lighter (weight 300, ink-2), with a 1px spectral line the beam draws under it once. */
.ap-hero__title{
  margin:0;max-width:11.6em;
  font-family:var(--ap-sans);font-weight:500;
  font-size:clamp(2.3rem,1.15rem + 3.7vw,4.6rem);
  line-height:1.04;letter-spacing:var(--ap-track-display);color:var(--ap-ink);
  font-kerning:normal;text-wrap:balance;
}
.ap-hero__title .hl{display:inline}
.ap-hero__title em{
  font-family:inherit;font-style:normal;font-weight:var(--ap-w-accent);font-size:1em;letter-spacing:inherit;
  color:var(--ap-ink-2);padding-bottom:.07em;
  background:var(--ap-spectrum) 0 100%/100% 1px no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:ap-hl-draw 1.6s var(--ap-ease-beam) .9s both;
}
@keyframes ap-hl-draw{from{background-size:0 1px}to{background-size:100% 1px}}
/* Korean: the closing phrase stays one line (one underline), so the H1 reads 기관 자본과 / 엄선된 기회가 만나는 곳 */
@media (min-width:700px){html[lang="ko"] .ap-hero__title em{white-space:nowrap}}
.ap-hero__lead{
  margin:clamp(18px,2.6vh,28px) 0 0;max-width:34rem;
  font-family:var(--ap-sans);font-size:var(--ap-fs-body);font-weight:400;line-height:1.6;color:var(--ap-ink-2);
}
.ap-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.2vh,34px)}
.ap-hero__btn{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px 0 24px;border-radius:var(--ap-r-pill);
  font-family:var(--ap-sans);font-size:.9375rem;font-weight:500;letter-spacing:.005em;line-height:1;white-space:nowrap;
  text-decoration:none;border:1px solid transparent;
  transition:background-color var(--ap-t-fast) var(--ap-ease),border-color var(--ap-t-fast) var(--ap-ease),color var(--ap-t-fast) var(--ap-ease);
}
.ap-hero__btn--solid{background:var(--ap-ink);color:var(--ap-ground)}
.ap-hero__btn--solid:hover{background:var(--ap-slate-2)}
.ap-hero__btn--ghost{background:var(--ap-panel);border-color:var(--ap-line-2);color:var(--ap-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ap-hero__btn--ghost:hover{border-color:var(--ap-slate-2);background:var(--ap-panel-2)}
.ap-hero__btn:focus-visible,.ap-ray:focus-visible{outline:2px solid var(--ap-slate-2);outline-offset:3px}
.ap-hero__arrow{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--ap-t-fast) var(--ap-ease)}
.ap-hero__btn--solid:hover .ap-hero__arrow{transform:translateX(3px)}
.ap-hero__btn--ghost:hover .ap-hero__arrow{transform:translateY(2px)}

/* ---------- the five labelled rays (desktop/tablet: placed by light.js; the staging is light.js's) ---------- */
.ap-hero__rays{
  position:absolute;z-index:4;inset:0;margin:0;padding:0;list-style:none;pointer-events:none;
}
.ap-hero__rays li{position:absolute;right:var(--ap-pad);top:0}
/* before light.js places them (or without JS): a quiet column at the right, above the readout */
.ap-hero__rays li:nth-child(1){top:58%}
.ap-hero__rays li:nth-child(2){top:calc(58% + 34px)}
.ap-hero__rays li:nth-child(3){top:calc(58% + 68px)}
.ap-hero__rays li:nth-child(4){top:calc(58% + 102px)}
.ap-hero__rays li:nth-child(5){top:calc(58% + 136px)}
.ap-hero.is-placed .ap-hero__rays li{right:auto;transform:translateY(-50%)}
.ap-ray{
  --c:var(--ap-s1);
  pointer-events:auto;display:inline-flex;align-items:center;gap:9px;min-height:30px;padding:0 10px 0 0;
  font-family:var(--ap-sans);font-size:.875rem;font-weight:500;line-height:1.2;letter-spacing:.005em;white-space:nowrap;
  color:var(--ap-ink);text-decoration:none;border-radius:var(--ap-r-sm);
  transition:color var(--ap-t-fast) var(--ap-ease);
}
.ap-ray--s2{--c:var(--ap-s2)}
.ap-ray--s3{--c:var(--ap-s3)}
.ap-ray--s4{--c:var(--ap-s4)}
.ap-ray--s5{--c:var(--ap-s5)}
.ap-ray__tick{display:block;width:2px;height:12px;border-radius:1px;background:var(--c);flex:none;box-shadow:0 0 10px var(--c)}
/* no numerals at any width: the colour tick is the index */
.ap-ray__i{display:none}
.ap-ray:hover .ap-ray__n,.ap-ray:focus-visible .ap-ray__n,.ap-ray.is-hot .ap-ray__n{color:var(--ap-ink)}
.ap-hero.is-placed .ap-ray{opacity:var(--ray-o,1)}
.ap-hero.is-placed .ap-ray:focus-visible{opacity:1}
.ap-ray__n{text-shadow:0 1px 14px var(--ap-void)}

/* the room below the headline where the prism is drawn (flexes so the hero always fills the screen) */
.ap-hero__stage{flex:1 1 auto;min-height:0}

/* ---------- hero foot: no readout (the mono corner readout was TACC's and NPG's hero foot). The markup is being
   removed; while it remains, its box is kept empty and unruled so light.js can still measure the floor of the room. */
.ap-hero__ro{position:relative;z-index:3;min-height:var(--hero-ro);border:0}
.ap-hero__ro-in{visibility:hidden}

/* ---------- phone legend: one thin five-segment spectral bar, the five labels as one compact wrapped line ---------- */
.ap-hero__legend{display:none}

/* ---------- Korean ---------- */
html[lang="ko"] .ap-hero__title{font-size:clamp(2rem,1rem + 3.1vw,3.75rem);letter-spacing:-.03em;line-height:1.16;word-break:keep-all;max-width:12em}
html[lang="ko"] .ap-hero__title em{font-weight:400;line-height:inherit}
html[lang="ko"] .ap-hero__lead{word-break:keep-all;line-height:1.7}
html[lang="ko"] .ap-hero__label{letter-spacing:0}
html[lang="ko"] .ap-ray,html[lang="ko"] .ap-hero__legend a{letter-spacing:0}

/* ---------- tablet portrait ---------- */
@media (min-width:700px) and (max-aspect-ratio:4/5){
  .ap-hero__stage{min-height:46vh}
}

/* ---------- phone: the five labels become the legend under the headline; the prism sits lower ---------- */
@media (max-width:699px){
  .ap-hero{--hero-top:calc(14px + 56px + 30px);--hero-ro:24px}
  .ap-hero__grid{background-size:calc(100% / 4) 100%}
  .ap-hero__label{margin-bottom:16px}
  .ap-hero__title{font-size:clamp(2.1rem,9.4vw,2.6rem);max-width:none}
  .ap-hero__lead{font-size:1rem;line-height:1.55;margin-top:16px}
  .ap-hero__ctas{margin-top:22px;gap:10px}
  .ap-hero__btn{min-height:46px;padding:0 18px 0 20px}
  /* the legend (X's markup: ul.ap-hero__legend > li > a[style="--c:…"]) */
  /* 14 Sep 2026 (operator: "the mobile cover pills show in 2 rows, make it 1 row"): one row of five columns, each
     strategy under its own colour bar; a long name wraps inside its column instead of dropping to a second row */
  .ap-hero__legend{
    position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,minmax(min-content,1fr));column-gap:8px;
    width:calc(100% - 2 * var(--ap-pad));margin:26px auto 0;padding:0;list-style:none;
  }
  .ap-hero__legend li{display:flex;min-width:0}
  .ap-hero__legend a{
    --c:var(--ap-slate-2);
    display:flex;flex-direction:column;align-items:flex-start;gap:9px;width:100%;min-height:44px;
    font-family:var(--ap-sans);font-size:.75rem;font-weight:500;line-height:1.25;letter-spacing:-.003em;white-space:normal;word-break:keep-all;
    color:var(--ap-ink-2);text-decoration:none;border-radius:var(--ap-r-sm);transition:color var(--ap-t-fast) var(--ap-ease);
  }
  .ap-hero__legend a::before{content:"";display:block;flex:none;width:100%;height:2px;border-radius:1px;background:var(--c);box-shadow:0 0 10px -2px var(--c)}
  .ap-hero__legend a:hover,.ap-hero__legend a:focus-visible{color:var(--ap-ink)}
  .ap-hero__legend a:focus-visible{outline:2px solid var(--ap-slate-2);outline-offset:2px}
  /* with the legend present the ray labels leave the drawing; without it they fall back to a quiet wrapped row */
  .ap-hero:has(.ap-hero__legend) .ap-hero__rays{display:none}
  .ap-hero__rays{
    position:relative;inset:auto;z-index:3;pointer-events:auto;
    display:flex;flex-wrap:wrap;gap:0 16px;
    width:calc(100% - 2 * var(--ap-pad));margin:22px auto 0;
  }
  .ap-hero__rays li,.ap-hero.is-placed .ap-hero__rays li{position:static;transform:none}
  .ap-ray{min-height:34px;font-size:.8125rem;gap:7px}
  .ap-hero.is-placed .ap-ray{opacity:1}
  .ap-hero__stage{min-height:max(230px,30vh)}
}
@media (max-width:369px){
  .ap-hero__legend{column-gap:6px}
  .ap-hero__legend a{font-size:.6875rem}
  /* the two buttons stay on one row on the smallest phones */
  .ap-hero__ctas{flex-wrap:nowrap;gap:8px}
  .ap-hero__btn{padding:0 14px 0 16px;font-size:.875rem;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .ap-hero__gl,.ap-hero__rays{transition:none}
  .ap-hero__btn,.ap-hero__arrow,.ap-ray,.ap-hero__legend a{transition:none}
  .ap-hero__title em{animation:none}
}