/* ============================================================
   簡任佑 Marcus Jian — Full-stack Product Engineer
   Single-page pitch site. No build step, no dependencies.
   ============================================================ */

:root{
  --paper:      #EAEBEF;
  --paper-2:    #F5F6F9;
  --card:       #FFFFFF;
  --ink:        #26263A;
  --ink-deep:   #16162B;
  --ink-2:      #55556A;
  --ink-3:      #64647A;
  --accent:     #0052D4;
  --accent-ink: #0043AD;
  --accent-soft:#D6E3FA;
  --rule:       #D2D5DE;
  --accent-text:#0052D4;

  --f-display: "Zalando Sans SemiExpanded", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --f-body:    "Zalando Sans SemiExpanded", "PingFang TC", "Noto Sans TC", system-ui, -apple-system, sans-serif;

  /* type scale — five steps, nothing else */
  --fs-1: clamp(2rem, 5.5vw, 4.5rem);              /* display, hero only  */
  --fs-2: clamp(1.6rem, 3.2vw, 2.4rem);            /* section headings    */
  --fs-3: clamp(1.15rem, 1.5vw, 1.3rem);           /* element headings    */
  --fs-4: clamp(1rem, .5vw + .9rem, 1.0625rem);    /* body                */
  --fs-5: 14px;                                    /* labels & captions   */
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1120px;
  --gut:  clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ink-deep); }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-4);
  line-height:1.85;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* --- shared section rhythm. Only .s controls block padding. ------------ */
.s{ padding-block:clamp(60px, 9vw, 120px); }
.s--tight{ padding-block:clamp(44px, 6vw, 76px); }
.s--tint{ background:var(--paper-2); }
.nightzone.on{
  --ink:        #EBEDF4;
  --ink-2:      #B4BDD0;
  --ink-3:      #8FA0C4;
  --rule:       #2E3348;
  --accent-text:#6FA8FF;
  color:var(--ink);
}

/* --- type ------------------------------------------------------------- */
.label{
  font-family:var(--f-mono);
  font-size:var(--fs-5);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 clamp(18px,2.4vw,30px);
}
.label--accent{ color:var(--accent); }
.label--on-ink{ color:var(--ink-3); }

h1,h2,h3,h4{ font-weight:900; letter-spacing:-.025em; line-height:1.18; margin:0; }
h1{ font-size:var(--fs-1); line-height:1.22; letter-spacing:-.035em; }
h2{ font-size:var(--fs-2); }
h3{ font-size:var(--fs-3); letter-spacing:-.015em; }

.lead{ font-size:var(--fs-4); color:var(--ink-2); max-width:62ch; }
.lead--intro{ margin:18px 0 clamp(28px,4vw,46px); }
.num{ font-family:var(--f-display); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.en{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; }
mark{ background:linear-gradient(transparent 86%, var(--accent) 86%); color:inherit; padding-bottom:1px; }

/* --- header ----------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rule);
}
.hdr__in{ display:flex; align-items:center; gap:16px; min-height:58px; }
.hdr__name{ font-weight:900; letter-spacing:-.02em; font-size:var(--fs-3); white-space:nowrap; }
.hdr__role{
  font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding-left:16px; border-left:1px solid var(--rule);
}
.hdr__spacer{ flex:1 1 auto; }

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-body); font-weight:700; font-size:var(--fs-4); line-height:1;
  padding:11px 18px; border-radius:2px; text-decoration:none;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{ background:var(--accent-ink); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--lg{ padding:15px 26px; }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}
.nightzone.on :where(a,button):focus-visible{ outline-color:#8FB4FF; }

/* --- hero ------------------------------------------------------------- */
.hero{ padding-block:clamp(52px, 9vw, 116px) clamp(38px, 5vw, 68px); }
.hero__quote{
  font-size:var(--fs-1);
  font-weight:900; line-height:1.14; letter-spacing:-.045em;
  margin:0 0 clamp(22px,3vw,34px);
}
.hero__quote > span,
.hero__quote > em{ display:block; font-style:normal; }
.hero__quote em{ font-style:normal; color:var(--accent); }
.hero__sub{ max-width:52ch; font-size:var(--fs-4); color:var(--ink-2); margin:0 0 clamp(30px,4vw,42px); }
.hero__by{
  display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline;
  padding-top:22px; border-top:1px solid var(--rule);
  font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.02em; color:var(--ink-2);
}
.hero__by b{ font-family:var(--f-body); font-weight:900; letter-spacing:-.01em; font-size:var(--fs-4); color:var(--ink); }

/* orchestrated load-in */
.rise{ opacity:0; transform:translateY(14px); animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards; }
.rise:nth-child(1){ animation-delay:.05s }
.rise:nth-child(2){ animation-delay:.16s }
.rise:nth-child(3){ animation-delay:.27s }
.rise:nth-child(4){ animation-delay:.38s }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ============================================================
   SIGNATURE — the two pipelines
   ============================================================ */
.pipe{ display:grid; gap:clamp(26px,4vw,44px); margin-top:clamp(30px,4vw,48px); }

.track{
  border:1px solid var(--rule); background:var(--card);
  padding:clamp(18px,2.4vw,26px);
}
.track--me{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--card); }

.track__top{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  margin-bottom:clamp(16px,2vw,22px);
}
.track__tag{
  font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.track--me .track__tag{ color:var(--accent); }
.track__title{ font-weight:900; font-size:var(--fs-3); letter-spacing:-.02em; }

.track__flow{ display:flex; align-items:stretch; flex-wrap:wrap; gap:8px; }

.node{
  flex:0 1 auto; min-width:92px; max-width:172px;
  border:1px solid var(--rule); background:var(--paper-2);
  padding:10px 12px;
  font-size:var(--fs-4); line-height:1.45;
}
.node b{ display:block; font-weight:900; font-size:var(--fs-4); letter-spacing:-.01em; }
.node span{ color:var(--ink-3); font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.06em; }
.node--boss{ background:var(--card); border-color:var(--ink); }

.arrow{
  display:flex; align-items:center; justify-content:center;
  width:22px; color:var(--ink-3); font-family:var(--f-mono); font-size:var(--fs-4); user-select:none;
}
.track--me .arrow{ color:var(--accent); }

/* the single wide block that replaces four hand-offs */
.node--me{
  flex:1 1 340px; min-width:0; max-width:none;
  background:var(--accent); border-color:var(--accent); color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:14px 16px;
}
.node--me b{ font-size:var(--fs-4); color:#fff; }
.node--me .steps{
  display:flex; flex-wrap:wrap; gap:6px 10px;
  font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.06em; color:#CBDCF7;
}
.node--me .steps i{ font-style:normal; }
.node--me .steps i::after{ content:" →"; opacity:.55; }
.node--me .steps i:last-child::after{ content:""; }

.track__foot{
  display:flex; flex-wrap:wrap; gap:10px clamp(20px,3vw,40px); align-items:baseline;
  margin-top:clamp(16px,2vw,22px); padding-top:14px; border-top:1px solid var(--rule);
}
.stat{ display:flex; align-items:baseline; gap:9px; }
.stat__n{ font-size:var(--fs-2); line-height:1; }
.stat__k{ font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); max-width:19ch; line-height:1.5; }
.track--me .stat__n{ color:var(--accent); }
.say{ margin:0; font-weight:900; font-size:var(--fs-3); letter-spacing:-.02em; color:var(--ink); }

.pipe__note{
  margin:clamp(22px,3vw,32px) 0 0;
  padding-left:16px; border-left:2px solid var(--accent);
  max-width:60ch; color:var(--ink-2); font-size:var(--fs-4);
}

/* scroll reveal for the pipeline — gated on .js so no-JS never hides content */
.js .track{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.is-in .track{ opacity:1; transform:none; }
.is-in .track--me{ transition-delay:.34s; }
.is-in .track--std .node{ animation:pop .5s backwards cubic-bezier(.2,.8,.3,1); }
.is-in .track--std .node:nth-of-type(1){ animation-delay:.10s }
.is-in .track--std .node:nth-of-type(2){ animation-delay:.17s }
.is-in .track--std .node:nth-of-type(3){ animation-delay:.24s }
.is-in .track--std .node:nth-of-type(4){ animation-delay:.31s }
.is-in .track--std .node:nth-of-type(5){ animation-delay:.38s }
.is-in .track--std .node:nth-of-type(6){ animation-delay:.45s }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) } }

/* --- "when to call me" ------------------------------------------------ */
.when{ display:grid; gap:1px; margin-top:clamp(28px,4vw,46px); background:var(--rule); border:1px solid var(--rule); }
@media (min-width:640px){ .when{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .when{ grid-template-columns:repeat(3,1fr); } }
.when__i{
  background:var(--card); padding:clamp(18px,2.2vw,24px);
  display:flex; gap:14px; align-items:flex-start;
}
.when__i:hover{ background:var(--paper-2); }
.when__i:last-child{ grid-column:1 / -1; }
.when__i:last-child > div{ max-width:52ch; }
.when__n{ font-family:var(--f-mono); font-size:var(--fs-5); color:var(--accent); letter-spacing:.08em; padding-top:5px; }
.when__t{ font-weight:900; font-size:var(--fs-3); letter-spacing:-.015em; }
.when__d{ margin:2px 0 0; font-size:var(--fs-4); line-height:1.7; color:var(--ink-2); }

/* --- three circles as three columns ---------------------------------- */
.tri{ display:grid; gap:clamp(24px,3vw,36px); }
@media (min-width:860px){ .tri{ grid-template-columns:repeat(3,1fr); } }
.tri__c{ border-top:1px solid var(--rule); padding-top:18px; }
.tri__k{ font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.tri__h{ margin:6px 0 10px; font-weight:900; font-size:var(--fs-3); letter-spacing:-.02em; }
.tri__p{ margin:0 0 14px; font-size:var(--fs-4); line-height:1.75; color:var(--ink-2); }
.tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.tags li{
  font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.05em;
  border:1px solid var(--rule); padding:4px 8px; color:var(--ink-2); background:var(--card);
}
.tri__mid{
  margin-top:clamp(28px,4vw,44px); padding-top:clamp(22px,3vw,32px); border-top:1px solid var(--rule);
}
.tri__mid .en{ display:block; font-size:var(--fs-2); color:var(--accent); }
.credo__en{
  margin:clamp(12px,1.6vw,18px) 0 0;
  font-family:var(--f-mono); font-size:var(--fs-5); line-height:1.7;
  letter-spacing:.01em; color:var(--accent);
}
.credo__zh{ margin:8px 0 0; font-size:var(--fs-4); line-height:1.8; color:var(--ink-2); }

/* --- cases ------------------------------------------------------------ */
.cases{ display:grid; gap:clamp(14px,2vw,20px); margin-top:clamp(28px,4vw,46px); }
.case{ background:var(--card); border:1px solid var(--rule); padding:clamp(20px,2.6vw,30px); }
.case__top{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; margin-bottom:14px; }
.case__h{ font-weight:900; font-size:var(--fs-3); letter-spacing:-.022em; }
.case__meta{ font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; }
.case__grid{ display:grid; gap:16px 34px; }
@media (min-width:760px){ .case__grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); } }
.case__role{ margin:0 0 12px; font-size:var(--fs-4); color:var(--ink-2); }
.case__role b{ color:var(--ink); font-weight:900; }
.did{ margin:0; padding:0; list-style:none; }
.did li{ position:relative; padding-left:16px; font-size:var(--fs-4); line-height:1.72; color:var(--ink-2); }
.did li::before{ content:""; position:absolute; left:0; top:.78em; width:6px; height:1px; background:var(--accent); }
.spec{ border-top:1px solid var(--rule); }
.spec div{ display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--rule); font-size:var(--fs-4); }
.spec dt{ flex:0 0 5em; font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding-top:3px; }
.spec dd{ margin:0; color:var(--ink-2); line-height:1.6; }
.live{ color:var(--accent); font-weight:900; }

/* --- honest block on dark -------------------------------------------- */
.honest h2{ max-width:26ch; text-wrap:balance; }
.honest p{ color:var(--ink-2); max-width:58ch; font-size:var(--fs-4); }
.honest strong{ color:#fff; }

/* --- how we work ----------------------------------------------------- */
.how{ display:grid; gap:clamp(22px,3vw,34px); }
.how{ max-width:840px; }
@media (min-width:820px){ .how{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,56px); } }
.how__i h3{ margin-bottom:8px; }
.how__i p{ margin:0; font-size:var(--fs-4); line-height:1.75; color:var(--ink-2); }
.how__i p strong{ color:var(--ink); font-weight:900; }
.pipe__note strong{ color:var(--ink); font-weight:900; }
.how__k{ font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.13em; text-transform:uppercase; color:var(--accent-text); }

/* --- close / contact ------------------------------------------------- */
.close h2{ font-size:var(--fs-2); line-height:1.24; letter-spacing:-.032em; }
.close h2 > span{ display:block; }
.close__q{ color:#fff; }
.close__cta{ margin-top:clamp(30px,4vw,44px); }
.close__cta{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; }
.close .btn--ghost{ color:#EBEDF4; border-color:#4C5A78; }
.close .btn--ghost:hover{ background:#EBEDF4; color:var(--ink); border-color:#EDECF4; }
.mailto{ font-family:var(--f-mono); font-size:var(--fs-5); color:#93A4C8; text-decoration:none; border-bottom:1px solid #33405E; }
.mailto:hover{ color:#fff; border-color:#fff; }

.foot{ border-top:1px solid var(--rule); }
.foot__in{ display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; padding-block:26px; font-family:var(--f-mono); font-size:var(--fs-5); letter-spacing:.06em; color:var(--ink-3); }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:8px; top:8px; z-index:99; background:var(--ink); color:#fff; padding:10px 14px; }

/* --- narrow screens: pipelines read vertically ------------------------ */
@media (max-width:700px){
  .track__flow{ flex-direction:column; align-items:stretch; }
  .node,.node--me{ flex:0 0 auto; min-width:0; }
  .arrow{ width:auto; height:16px; transform:rotate(90deg); }
  .stat__k{ max-width:22ch; }
  .hdr__role{ display:none; }
}
@media (max-width:420px){
  .track__foot{ gap:14px; }
  .hero__by{ line-height:1.7; }
}
.how--gap{ margin-top:clamp(28px,4vw,44px); }
.honest__first{ margin-top:20px; }

/* --- three capability rings ------------------------------------------ */
.rings{ margin:clamp(32px,4.5vw,54px) 0 clamp(30px,4vw,48px); }
.rings svg{ width:100%; height:auto; }
.rings__h{ display:block; }
.rings circle{
  fill:none; stroke:var(--ink); stroke-opacity:.45; stroke-width:1.25;
  vector-effect:non-scaling-stroke;
}
.rings .cn{ font-family:var(--f-body); font-weight:900; font-size:16px; letter-spacing:-.02em; fill:var(--ink); }
.rings .en{ font-family:var(--f-mono); font-size:11px; letter-spacing:.11em; fill:var(--ink-3); }
.rings__v{ display:none; margin-inline:auto; max-width:340px; }
@media (max-width:700px){
  .rings__h{ display:none; }
  .rings__v{ display:block; }
}

/* ============================================================
   Scroll-triggered night mode
   A fixed full-viewport sheet fades in behind the content, so the whole
   screen goes dark at once with no visible edge anywhere on the page.
   JS only toggles .on — every colour below rides the inverted tokens.
   ============================================================ */
.nightzone{ position:relative; }
.nightzone__bg{
  position:fixed; inset:0;
  background:var(--ink-deep);
  opacity:0; z-index:0; pointer-events:none;
  transition:opacity .7s ease;
}
.nightzone.on .nightzone__bg{ opacity:1; }
.nightzone > section{ position:relative; z-index:1; }
.nightzone *{ transition:color .3s ease-out, border-color .3s ease-out; }

/* the sticky bar and the footer live outside the zone, so they follow the root flag */
.hdr, .hdr__name, .hdr__role, .foot, .foot__in{
  transition:background-color .35s ease, color .5s ease, border-color .6s ease;
}
html.is-night .hdr{
  background:color-mix(in srgb, var(--ink-deep) 82%, transparent);
  border-bottom-color:#2E3348;
}
html.is-night .hdr__name{ color:#EBEDF4; }
html.is-night .hdr__role{ color:#8FA0C4; border-left-color:#2E3348; }
html.is-night .foot{ border-top-color:#2E3348; }
html.is-night .foot__in{ color:#8FA0C4; }