/* =========================================================
   mingyeuk.com — 寶哥｜看得見系統的人
   Single stylesheet. Fullscreen panels switched by main.js.
   ========================================================= */
:root{
  --bg:#000;
  --fg:#fff;
  --text:rgba(255,255,255,.88);
  --mute:rgba(255,255,255,.74);
  --dim:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.3);
  --serif:'Noto Serif TC','Songti TC','PMingLiU',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,4vw,56px);
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --top-h:calc(clamp(76px,11vh,112px) + var(--sat));
  --dock-h:calc(118px + var(--sab));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg)}
body{font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow:hidden;line-height:1.7}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ol,ul,dl,dd{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
img{display:block}
:focus-visible{outline:1px solid #fff;outline-offset:4px}
.panel:focus,.panel:focus-visible{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;transition:opacity .7s var(--ease),visibility 0s .7s}
.loader.done{opacity:0;visibility:hidden}
.loader__ring{position:absolute;width:min(52vw,300px);aspect-ratio:1;animation:spin 40s linear infinite}
.loader__ring circle{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.loader__word{position:relative;font-family:var(--serif);font-weight:300;font-size:clamp(28px,5vw,44px);letter-spacing:.5em;padding-left:.5em;line-height:1}
.loader__base{color:rgba(255,255,255,.34)}
.loader__fill{position:absolute;inset:0;padding-left:.5em;color:#fff;clip-path:inset(0 100% 0 0);animation:fill .9s .1s var(--ease) forwards}
.loader__fill::after{content:'';position:absolute;left:0;right:0;bottom:-.15em;height:1px;background:#fff}
@keyframes fill{to{clip-path:inset(0 0 0 0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Top bar ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(clamp(14px,2.6vw,26px) + var(--sat)) var(--gutter) clamp(14px,2.6vw,26px)}
.top::before{content:'';position:absolute;left:0;right:0;top:0;height:170%;background:linear-gradient(to bottom,rgba(0,0,0,.78),transparent);z-index:-1;pointer-events:none}
.brand{font-family:var(--serif);font-size:18px;letter-spacing:.3em;white-space:nowrap}
.brand small{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-left:.5em}
.top__cta{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);transition:color .4s}
.top__cta:hover{color:#fff}

/* ---------- Panels ---------- */
.panels{position:fixed;inset:0;overflow:hidden}
.panel{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;display:flex;flex-direction:column;align-items:center;padding:var(--top-h) var(--gutter) var(--dock-h);scroll-padding:var(--top-h) 0 var(--dock-h);opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 0s 1s}
.panel::-webkit-scrollbar{width:6px}
.panel::-webkit-scrollbar-track{background:transparent}
.panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:3px}
.panel.is-active{opacity:1;visibility:visible;transition:opacity 1s var(--ease)}
.panel__bg{position:fixed;inset:0;z-index:0;background:#000}
.panel__bg img{width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.55) contrast(1.05) brightness(.9);transform:scale(1.1);transition:transform 9s var(--ease),opacity 1.2s ease}
.panel__bg img.is-loaded{opacity:.42}
.panel.is-active .panel__bg img{transform:scale(1)}
.panel__bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.92) 100%)}
.panel__bg--plain{background:radial-gradient(ellipse 70% 55% at 74% 16%,rgba(255,255,255,.08),transparent 70%),radial-gradient(ellipse 55% 45% at 12% 88%,rgba(255,255,255,.05),transparent 70%),#000}
.panel__bg--plain::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(255,255,255,.09)}
.wrap{position:relative;z-index:2;width:min(100%,720px);text-align:center;margin:auto 0;flex:none}
.wrap--wide{width:min(100%,1040px)}

.eyebrow{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--mute);margin-bottom:clamp(14px,2.5vh,26px)}
.display{font-family:var(--serif);font-weight:300;font-size:clamp(24px,4.4vw,54px);letter-spacing:.22em;line-height:1.55;text-wrap:balance}
.display i{font-style:normal;color:var(--dim);margin:0 .1em}
.display--xl{font-size:clamp(48px,10vw,128px);letter-spacing:.18em;line-height:1.2}
.note{font-size:13px;line-height:1.9;letter-spacing:.06em;color:var(--dim);margin-top:14px}
.note a{color:var(--mute);border-bottom:1px dotted var(--line)}
.note a:hover{color:#fff}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.panel.is-active .reveal{opacity:1;transform:none}
.panel.is-active .reveal:nth-child(2){transition-delay:.12s}
.panel.is-active .reveal:nth-child(3){transition-delay:.24s}
.panel.is-active .reveal:nth-child(4){transition-delay:.36s}
.panel.is-active .reveal:nth-child(5){transition-delay:.48s}

/* ---------- Hero ---------- */
.hero__line{position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line);z-index:1;pointer-events:none}
.hero{position:relative;z-index:2;width:100%;margin:auto 0;display:grid;place-items:center;gap:clamp(28px,6vh,64px)}
.hero__stack{width:100%;display:grid;justify-items:center}
.hero__stack .eyebrow{margin-bottom:6px}
.hero__word{font-family:var(--serif);font-weight:300;font-size:clamp(30px,6vw,66px);letter-spacing:.3em;padding:.32em 0 .32em .3em;line-height:1.2;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6);transition:color .4s,letter-spacing .8s var(--ease);position:relative}
.hero__word::after{content:'';position:absolute;left:50%;bottom:.1em;width:0;height:1px;background:#fff;transform:translateX(-50%);transition:width .6s var(--ease)}
.hero__word:hover{letter-spacing:.38em}
.hero__word[aria-expanded="true"]::after{width:calc(100% - .3em)}
.band{width:100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease);background:#000}
.band.open{grid-template-rows:1fr}
.band__inner{overflow:hidden;min-height:0}
.band__inner p{font-size:clamp(16px,1.5vw,19px);letter-spacing:.06em;line-height:2;color:var(--text);text-align:center;max-width:40ch;margin:0 auto;padding:clamp(24px,5vh,56px) var(--gutter)}
.index{display:flex;flex-wrap:wrap;justify-content:center;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.index a{display:flex;align-items:baseline;gap:10px;padding:14px clamp(12px,1.8vw,26px);font-family:var(--serif);font-size:clamp(15px,1.4vw,18px);letter-spacing:.2em;color:rgba(255,255,255,.84);transition:color .4s,background .4s}
.index a+a{border-left:1px dashed var(--line)}
.index a:hover{color:#fff;background:rgba(255,255,255,.05)}
.index em{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--dim)}
.hero__co{font-size:12px;letter-spacing:.2em;color:var(--mute);text-align:center;padding:0 var(--gutter)}
.hero__co a,.addr a{white-space:nowrap}
.hero__co a:hover{color:#fff}
.hint{position:absolute;right:var(--gutter);bottom:calc(var(--dock-h) + 12px);z-index:2;font-size:12px;letter-spacing:.4em;color:var(--dim);writing-mode:vertical-rl;transform:rotate(180deg)}
.hint::before{content:'';display:inline-block;width:1px;height:40px;background:var(--line);margin-bottom:12px}

/* ---------- Identity panels ---------- */
.id{text-align:left}
.id__head{text-align:center;margin-bottom:clamp(14px,2.5vh,24px)}
.id__head .display{font-size:clamp(24px,3.6vw,44px)}
.id__tag{font-family:var(--serif);font-size:clamp(17px,1.7vw,21px);letter-spacing:.12em;color:var(--text);margin-top:clamp(10px,1.8vh,18px)}
.id__grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,4vw,64px);border-top:1px dashed var(--line);padding-top:clamp(14px,2vh,22px)}
.id__label{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.id__col .id__label:not(:first-child){margin-top:clamp(18px,3vh,30px)}
.id__body{font-family:var(--serif);font-size:clamp(16px,1.3vw,18px);line-height:1.9;letter-spacing:.04em;color:var(--text)}

.facts{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.facts li{display:grid;gap:6px}
.facts b{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3vw,34px);letter-spacing:.1em;line-height:1}
.facts span{font-size:13px;letter-spacing:.16em;color:var(--mute)}

.mini{display:grid;gap:6px}
.mini li{font-size:14px;line-height:1.7;letter-spacing:.04em;color:var(--mute);display:grid;grid-template-columns:5.5em 1fr;gap:10px;align-items:baseline}
.mini b{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.12em;color:#fff;white-space:nowrap}

.list{border-top:1px dashed var(--line)}
.list li{border-bottom:1px dashed var(--line)}
.list a,.list__item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0}
.list a{transition:padding .5s var(--ease)}
.list a:hover{padding-left:10px}
.list a>span,.list__item>span{flex:1 1 auto;font-family:var(--serif);font-size:clamp(16px,1.3vw,18px);letter-spacing:.1em}
.list small{flex:0 1 auto;font-size:12px;letter-spacing:.08em;color:var(--mute);text-align:right}

.srv{border-top:1px dashed var(--line)}
.srv li{display:grid;grid-template-columns:2.2em 1fr auto auto;gap:clamp(10px,1.4vw,20px);align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.srv--quote li{grid-template-columns:1fr auto auto}
.srv__n{font-size:12px;letter-spacing:.2em;color:var(--dim)}
.srv__t{font-family:var(--serif);font-size:clamp(16px,1.3vw,18px);letter-spacing:.12em;line-height:1.4;display:grid}
.srv__t small{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--mute);margin-top:2px}
.srv__p{font-family:var(--serif);font-size:clamp(16px,1.25vw,18px);letter-spacing:.06em;text-align:right;display:grid;white-space:nowrap}
.srv__p small{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--mute)}

.pill{display:inline-block;font-size:12px;letter-spacing:.16em;padding:10px 16px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;transition:background .4s,color .4s,border-color .4s}
.pill:hover{background:#fff;color:#000;border-color:#fff}
.pill--ghost{color:var(--dim);border-style:dashed}
.pill--ghost:hover{background:none;color:var(--dim);border-color:var(--line)}

/* ---------- Story / company ---------- */
.story{display:grid;gap:14px;margin-top:clamp(16px,3vh,28px);text-align:left}
.story p{font-family:var(--serif);font-size:clamp(16px,1.35vw,19px);line-height:1.95;letter-spacing:.04em;color:var(--text)}
.company{display:grid;margin-top:clamp(18px,3vh,30px);border-top:1px dashed var(--line);text-align:left}
.company div{display:grid;grid-template-columns:6em 1fr;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line);align-items:baseline}
.company dt{font-size:13px;letter-spacing:.24em;color:var(--mute)}
.company dd{font-family:var(--serif);font-size:clamp(15px,1.2vw,17px);letter-spacing:.06em;color:#fff}
.company dd .en{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--mute);margin-top:4px}
.company a:hover{text-decoration:underline}

/* ---------- Contact ---------- */
.doors{border-top:1px dashed var(--line);margin-top:clamp(16px,3vh,28px);text-align:left}
.doors li{display:grid;grid-template-columns:4em 1fr auto;gap:clamp(12px,2vw,32px);align-items:center;padding:14px 0;border-bottom:1px dashed var(--line)}
.doors em{font-family:var(--serif);font-style:normal;font-size:clamp(18px,1.7vw,24px);letter-spacing:.2em}
.doors span{font-size:15px;letter-spacing:.06em;color:var(--text)}
.contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px clamp(16px,3vw,36px);margin-top:clamp(24px,5vh,48px)}
.contact>a{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);transition:color .4s}
.contact>a:hover{color:#fff}
.addr{font-size:13px;letter-spacing:.12em;line-height:1.9;color:var(--dim);margin-top:clamp(20px,4vh,40px)}
.addr a:hover{color:#fff}
.foot{position:relative;z-index:2;flex:none;text-align:center;font-size:12px;letter-spacing:.16em;color:var(--dim);padding:0 var(--gutter);margin-top:24px}
.foot a{border-bottom:1px dotted var(--line)}
.foot a:hover{color:#fff}

/* ---------- Dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;justify-items:center;gap:2px;padding:0 var(--gutter) calc(clamp(8px,1.6vh,16px) + var(--sab));pointer-events:none}
.dock::before{content:'';position:absolute;left:0;right:0;bottom:0;height:150%;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.6) 45%,transparent);z-index:-1;pointer-events:none}
.dock__bar{display:flex;gap:6px;pointer-events:auto}
.dock__bar li{position:relative}
.dock__bar button{display:block;width:clamp(28px,5vw,64px);height:28px;position:relative}
.dock__bar button::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.4);transition:background .4s,transform .5s var(--ease)}
.dock__bar button::after{content:attr(data-n);position:absolute;left:0;top:-6px;font-size:11px;letter-spacing:.2em;color:var(--dim);opacity:0;transition:opacity .3s}
.dock__bar li.is-on button::before{background:#fff;transform:scaleY(2)}
.dock__bar button:hover::after,.dock__bar button:focus-visible::after,.dock__bar li.is-on button::after{opacity:1}
.dock__menu{pointer-events:auto;font-size:12px;letter-spacing:.45em;text-transform:uppercase;padding:6px 10px 6px calc(10px + .45em);color:rgba(255,255,255,.8);transition:color .3s}
.dock__menu:hover{color:#fff}

/* ---------- Menu ---------- */
.menu{position:fixed;inset:0;z-index:60;background:#000;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;padding:calc(64px + var(--sat)) var(--gutter) calc(28px + var(--sab));clip-path:inset(50% 0 50% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
.menu[hidden]{display:none}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s var(--ease)}
.menu__close{position:fixed;top:calc(clamp(14px,2.6vw,26px) + var(--sat));right:var(--gutter);z-index:1;font-size:12px;letter-spacing:.4em;padding:6px 0 6px .4em;color:var(--mute)}
.menu__close:hover{color:#fff}
.menu__list{margin:auto 0;display:grid;gap:clamp(2px,.8vh,10px);text-align:center}
.menu__list a{display:grid;grid-template-columns:2.5em 1fr;align-items:baseline;gap:16px;font-family:var(--serif);font-weight:300;font-size:clamp(20px,min(4.5vw,4.6vh),44px);letter-spacing:.3em;line-height:1.25;padding:6px 0;color:rgba(255,255,255,.6);transition:color .4s,letter-spacing .6s var(--ease)}
.menu__list a:hover,.menu__list a[aria-current="true"]{color:#fff;letter-spacing:.38em}
.menu__list em{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--dim)}
.menu__list small{display:block;margin-top:4px;font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim)}
.menu__foot{flex:none;margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.menu__foot a:hover{color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .id__grid{grid-template-columns:1fr;gap:clamp(18px,3vh,28px)}
  .index a{padding:12px 14px}
  .doors li{grid-template-columns:4em 1fr;row-gap:8px}
  .doors .pill{grid-column:2;justify-self:start}
  .srv li{grid-template-columns:2.2em 1fr;row-gap:6px}
  .srv--quote li{grid-template-columns:1fr}
  .srv__p{grid-column:2;text-align:left}
  .srv--quote .srv__p{grid-column:1}
  .srv .pill{grid-column:2;justify-self:start}
  .srv--quote .pill{grid-column:1}
}
@media (max-width:640px){
  body{line-height:1.6}
  :root{--top-h:calc(76px + var(--sat))}
  .hint,.top__cta{display:none}
  .display{letter-spacing:.14em}
  .id__head .display{font-size:22px;letter-spacing:.14em}
  .hero__word{font-size:clamp(28px,8.5vw,40px);letter-spacing:.2em;padding-left:.2em}
  .index{width:100%}
  .index a{flex:1 1 33%;justify-content:center;border-left:0!important;border-bottom:1px dashed var(--line);font-size:15px}
  .index a:nth-child(n+4){flex-basis:50%}
  .brand small{letter-spacing:.16em}
  .facts{gap:20px 28px}
  .mini li{font-size:15px;grid-template-columns:5em 1fr}
  .id__body,.story p,.band__inner p{font-size:17px}
  .list a>span,.list__item>span,.srv__t,.srv__p{font-size:17px}
  .list a,.list__item{flex-direction:column;align-items:flex-start;gap:2px}
  .list small{text-align:left}
  .company div{grid-template-columns:5em 1fr}
}
@media (max-height:800px){
  .menu__list small{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important;transition-delay:0s!important}
  .loader__fill{clip-path:inset(0)}
}