/* style.css: Chuan Long's personal site. Rebuilt 4 Oct 2026 in Family Leadership's design (CL's call that day:
   "follow FL design"). The colours, type and parts are copied from the FL page's stylesheet
   (familyleadership-site/official/fl.css, Design System v1.18), because this is a separate site: when FL's colours
   change, copy the change here too. Breakpoint: 900px, as on the FL page. */

:root{
  --ink:#1F2B25; --soft:#4A544E; --gold:#C9A15F; --gold-hover:#B8914F; --on-gold:#141C18; --bronze:#9C6B2E;
  --bronze-deep:#7A5320; --page:#FFFFFF; --warm:#F5F2EA; --block:#EDE3CF; --line:#DDD6C6;
  --p-bg:#33423A; --p-fg:#ECE7DB; --p-head:#FFFFFF; --p-accent:#D8B477; --p-label:#E8DDC8;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 18px/1.55 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:600;text-wrap:balance}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* the top bar: the name on the left, the pages on the right */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;max-width:1120px;margin:0 auto;padding:14px 20px}
.brand{font-weight:600;font-size:20px;text-decoration:none;padding:10px 0}
.nav{display:flex;flex-wrap:wrap;gap:0 18px}
.nav a{display:inline-block;padding:12px 0;font-weight:600;font-size:16px;color:var(--soft);text-decoration:none}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:8px}

/* sections and column widths */
.sec{padding:44px 0}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.wide{max-width:1120px;margin:0 auto;padding:0 20px}

/* a label, headings, an opening paragraph, a line under a heading */
.lab{font-weight:600;font-size:15px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
h1{font-size:40px;line-height:1.12;letter-spacing:-.015em}
h2{font-size:28px;line-height:1.2;letter-spacing:-.01em}
h3{font-size:21px;line-height:1.3}
.lede{font-size:20px;line-height:1.55;color:var(--soft);text-wrap:pretty}
.sec-head{display:grid;gap:10px;margin-bottom:26px}
.sec-head .sub{color:var(--soft);text-wrap:pretty}
.center{text-align:center;justify-items:center}

/* the gold button (the one action colour) and the quiet outlined button, as on the FL page */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 30px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-weight:600;font-size:18px;line-height:1.2;text-decoration:none;text-align:center;transition:background-color .15s} /* unslop-ignore: the FL Design System's gold pill */
.cta:hover{background:var(--gold-hover)}
.quiet{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 22px;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);font-weight:600;font-size:17px;line-height:1.2;text-decoration:none;text-align:center;transition:background-color .15s} /* unslop-ignore: the FL Design System's outlined button */
.quiet:hover{background:var(--warm)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.more{display:inline-block;padding:12px 0;font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}

/* the hand-drawn gold underline (the page's one drawn mark) */
.mark{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5c18-5 33-4.5 50-1.6 16 2.7 34 2.4 64-3.4' fill='none' stroke='%23C9A15F' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom/100% .3em no-repeat;padding-bottom:.1em}

/* the warm block, the green panel and the photo frame (a warm block behind each photo) */
.block{background:var(--warm);border-radius:24px;margin:0 10px;padding:36px 0 40px}
.block .lab{color:var(--bronze-deep)}
.panel{background:var(--p-bg);color:var(--p-fg);border-radius:24px;margin:0 10px;padding:32px 20px 36px}
.panel h2,.panel h3{color:var(--p-head)}
.panel .lab{color:var(--p-label)}
.panel .more{color:var(--p-head);text-decoration-color:var(--p-accent)}
.panel a:focus-visible{outline-color:var(--p-head)}
.ph{position:relative;margin:0 auto;width:min(72%,300px)}
.pic{position:relative;display:block}
.pic::before{content:"";position:absolute;inset:0;transform:translate(12px,12px);background:var(--block);border-radius:18px}
.pic img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px}

/* the opening of a page: words and a photo */
.hero{padding:28px 0 44px}
.hero-in{display:grid;gap:36px;align-items:center}
.hero-copy{display:grid;gap:16px}
.mission{font-weight:600;font-size:19px;line-height:1.45;border-left:3px solid var(--gold);padding:2px 0 2px 16px}

/* the views strip */
.reach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:center}
.reach b{display:block;font-weight:600;font-size:30px;line-height:1.1}
.reach span{display:block;font-size:15px;line-height:1.35;color:var(--soft);margin-top:4px}
.reach-note{text-align:center;color:var(--soft);font-size:16px;margin-top:14px}

/* the three doors on Home: rows, not cards */
.doors{display:grid;gap:0;margin-top:6px}
.door{display:grid;gap:6px;padding:22px 0;border-top:1px solid var(--line);text-decoration:none}
.door:last-child{border-bottom:1px solid var(--line)}
.door h3{display:flex;justify-content:space-between;gap:12px}
.door h3::after{content:"\2192";color:var(--bronze);flex:none}
.door p{color:var(--soft);font-size:17px}
.door:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}

/* video cards: a calm title card that loads the YouTube player only when tapped (video.js) */
.vids{display:grid;gap:22px}
.vid{display:grid;gap:10px;text-decoration:none}
.poster{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:18px;background:var(--p-bg);color:var(--p-fg);padding:20px;overflow:hidden}
.poster .pt{font-weight:600;font-size:22px;line-height:1.25;text-align:center;color:var(--p-head);max-width:20ch;text-wrap:balance}
.poster .play{position:absolute;right:16px;bottom:14px;width:52px;height:52px}
.poster .play circle{fill:none;stroke:var(--p-accent);stroke-width:2.2}
.poster .play path{fill:var(--p-accent)}
.poster .len{position:absolute;left:18px;bottom:16px;font-size:15px;font-weight:600;color:var(--p-label)}
.vid:hover .poster{background:#2B3832}
.vid .vt{font-weight:600;font-size:18px;line-height:1.35}
.vid .vw{color:var(--soft);font-size:16px;line-height:1.45}
.player{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-note{font-size:14px;color:var(--soft);margin-top:10px}

/* quick facts with drawn ticks */
.ticks{display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:18px;line-height:1.45}
.ticks svg{width:22px;height:22px;margin-top:3px;fill:none;stroke:var(--bronze);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* the story in dated chapters */
.chapters{display:grid;gap:34px}
.ch{display:grid;gap:8px}
.ch > p:not(.lab){font-size:18px;line-height:1.6;color:var(--ink)}
.ch .ph{margin:14px 0 6px;width:min(70%,260px)}

/* values */
.values{display:grid;gap:14px}
.values li{background:var(--warm);border-radius:16px;padding:16px 20px;font-size:18px;line-height:1.5}
.values b{font-weight:600}

/* the dated "now" note */
.now li{padding:10px 0;border-top:1px solid var(--line);font-size:18px;line-height:1.5}
.now li:last-child{border-bottom:1px solid var(--line)}
.now b{font-weight:600}
.updated{font-size:15px;color:var(--soft)}

/* skills, contact links, the footer */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chips span{background:var(--warm);border-radius:999px;padding:8px 16px;font-size:16px;font-weight:600;color:var(--bronze-deep)}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.links a{display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;font-size:16px;text-decoration:none}
.links a:hover{border-color:var(--ink)}
.email{display:inline-block;padding:7px 0;font-weight:600;font-size:24px;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px;word-break:break-word}
.foot{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 34px;font-size:15px;color:var(--soft)}
.foot .wide{display:grid;gap:8px}
.foot a{color:var(--ink);font-weight:600;text-decoration:none;display:inline-block;padding:11px 0}
.foot nav{display:flex;flex-wrap:wrap;gap:0 18px}

@media (max-width:899px){
  /* phones and tablets: the photo comes first and smaller, so a visitor sees who's talking before the words */
  .hero-in .ph{order:-1;width:min(58%,240px)}
}
@media (max-width:480px){
  .cta{display:flex;width:100%;padding-left:12px;padding-right:12px}
  .reach b{font-size:24px}
}
@media (min-width:900px){
  .sec{padding:64px 0}
  .top{padding:18px 32px}
  h1{font-size:56px}
  h2{font-size:38px}
  h3{font-size:23px}
  .hero{padding:44px 0 64px}
  .hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px}
  .hero-in.flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .hero-in.flip .ph{order:-1}
  .ph{width:340px}
  .block{max-width:1180px;margin:0 auto;padding:56px 0 60px;border-radius:28px}
  .panel{max-width:1180px;margin:0 auto;padding:56px 72px 60px;border-radius:28px}
  .vids{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reach b{font-size:40px}
}
@media (prefers-reduced-motion:reduce){.cta,.quiet{transition:none}}