/* ============================================================
   Mak Fai Kung Fu — makfaikungfu.org  (coming soon)

   Placeholder only — see CLAUDE.md. Tokens, type, and components
   are lifted from the portal (../portal-hybrid/style.css) so this
   reads as the same association from day one, even before the
   real site (curriculum, schedule, instructor bios) exists.
   Single dark band only — no paper band, nothing to alternate with
   yet.
   ============================================================ */
*{box-sizing:border-box}
:root{
  --bg:#0B0708;
  --ink:#F6EFE8;
  --muted:#B3A69E;
  --line:rgba(242,180,65,.16);
  --line-soft:rgba(246,239,232,.09);
  --red:#E63B52;
  --gold:#F2B441;
  --paper:#FAF6EF;
  --ink-l:#221A15;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.24,1);
}
/* Horizontal lock — see root CLAUDE.md gotchas: hidden is the floor
   (works everywhere), clip upgrades it where supported (Safari 16+)
   without turning the root into its own scroll container. */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(22px,4vw,48px)}

/* "opens in a new tab" mark — drawn, never a typed ↗. iOS gives that
   codepoint emoji presentation by default. */
.ext{display:inline-block;width:.58em;height:.58em;margin-left:.3em;
  vertical-align:baseline;position:relative;top:-.1em;opacity:.72}
.ext svg{width:100%;height:100%;display:block}

.glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 85% 50% at 50% -10%,rgba(230,59,82,.13),transparent 62%),
    radial-gradient(ellipse 55% 40% at 10% 68%,rgba(242,180,65,.06),transparent 60%)}

.cta{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:4px 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line-soft);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.cta:hover,.cta:focus-visible{border-bottom-color:currentColor}

/* ============================ HERO ============================ */
/* Shorter than a full 100svh, and the only section on the page — the
   copyright line is a caption inside it (see .hero-copyright) rather
   than a separate solid-black footer band underneath, so the whole
   page reads as one screen: photo, content, and the copyright line all
   together, no second band to scroll to. */
.hero{position:relative;min-height:82svh;display:flex;align-items:center;
  overflow:hidden}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,7,8,.72) 0%,rgba(11,7,8,.55) 38%,
      rgba(11,7,8,.86) 100%),
    radial-gradient(ellipse 70% 60% at 18% 30%,rgba(11,7,8,.4),transparent 60%)}
/* Centred splash, not a left-aligned marketing hero — this is a holding
   page, one screen, nothing to scroll to. Top/bottom padding only (see
   the .wrap-shadowing note that used to sit here): a shorthand third
   value would zero out .wrap's own horizontal padding at equal
   specificity, with this rule winning by source order. */
.hero-in{position:relative;z-index:1;text-align:center;
  margin:0 auto;
  padding-top:clamp(40px,8vw,64px);padding-bottom:clamp(64px,9vw,96px)}

.crest{height:clamp(76px,9vw,116px);width:auto;margin:0 auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.55))}
/* calligraphy.png is white ink on transparency — correct as-is against
   this dark photo ground (see the root CLAUDE.md gotcha: it only needs
   flattening with brightness(0) on a light/paper ground, which this
   page doesn't have). */
.calli{height:clamp(20px,2.6vw,28px);width:auto;margin:16px auto 0;opacity:.92}

.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin:28px 0 22px}
/* the one surviving neon flicker from the shared system — a real sign's
   stutter, two brief dips, never a constant buzz. */
.n-gold{text-shadow:0 0 10px rgba(242,180,65,.7),0 0 34px rgba(242,180,65,.32)}
@keyframes flicker{
  0%,56.8%,58.2%,58.9%,60.4%,100%{opacity:1}
  57.2%{opacity:.55} 57.7%{opacity:.92} 59.6%{opacity:.7}
}
.flick{animation:flicker 9s linear infinite}
@media (prefers-reduced-motion:reduce){.flick{animation:none}}

.disp{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  line-height:.98;letter-spacing:-.01em;margin:0;color:#fff}
.disp-xl{font-size:clamp(44px,8.6vw,104px)}
.disp-rule{display:block;width:44px;height:2px;margin:30px auto 32px;
  background:var(--gold);border-radius:1px}
.lede{color:var(--muted);font-size:clamp(14px,1.35vw,15.5px);
  max-width:44ch;margin:0 auto 28px}

.hero-actions{display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.4vw,28px);flex-wrap:wrap}

/* Copyright as a caption on the photo itself, not a separate footer
   band below it — keeps the whole page to one screen. */
.hero-copyright{margin:clamp(32px,6vw,64px) 0 0;color:rgba(246,239,232,.6);
  font-size:12.5px}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:2px;font-family:var(--sans);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;border:1px solid transparent;
  transition:background .3s var(--ease),transform .25s var(--ease),
             box-shadow .3s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-paper{background:var(--paper);color:var(--ink-l)}
.btn-paper:hover,.btn-paper:focus-visible{background:#fff;transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.4)}
/* arrow that swaps → for ↗ on hover, same trick as the portal's .arr */
.arr{position:relative;width:13px;height:13px;overflow:hidden;flex:none}
.arr svg{position:absolute;inset:0;width:13px;height:13px;
  transition:transform .32s var(--ease),opacity .32s var(--ease)}
.arr .a2{transform:translate(-10px,10px);opacity:0}
.btn:hover .arr .a1,.cta:hover .arr .a1{transform:translate(10px,-10px);opacity:0}
.btn:hover .arr .a2,.cta:hover .arr .a2{transform:none;opacity:1}