/* relexes.com 個人網站 — 奶茶色系、左欄固定導覽、少量動畫 */
:root{--bg:#f1e7db;--card:#fbf7f1;--card-2:#f6efe6;--ink:#3a2e26;--ink-2:#5f4f44;--muted:#7d6a5b;--accent:#a4724b;--accent-text:#8a5b35;--accent-2:#c9a27e;--accent-soft:rgba(164,114,75,.12);--line:rgba(58,46,38,.12);--ok:#6f8b5c;--ok-soft:rgba(111,139,92,.14);--warn:#a9822f;--warn-soft:rgba(185,139,58,.14);--serif:"Fraunces","Noto Serif TC",Georgia,serif;--sans:"Noto Sans TC","PingFang TC","Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--ease:cubic-bezier(.22,1,.36,1);--shadow:0 1px 2px rgba(58,46,38,.05),0 12px 32px -18px rgba(58,46,38,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul{margin:0;padding:0;list-style:none}h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:600}p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.bg-blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.bg-blobs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 26s var(--ease) infinite alternate}
.bg-blobs span:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-10vw;background:#e5cdb3}.bg-blobs span:nth-child(2){width:38vw;height:38vw;right:-10vw;top:22vh;background:#f4e3cf;animation-delay:-9s}.bg-blobs span:nth-child(3){width:34vw;height:34vw;left:30vw;bottom:-14vw;background:#dcc5ad;animation-delay:-17s}
@keyframes drift{to{transform:translate3d(6vw,4vh,0) scale(1.08)}}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.js .rise{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.js .rise.in{opacity:1;transform:none}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;border:1px solid var(--line);background:var(--card);transition:transform .25s var(--ease),box-shadow .25s}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* 版面：左欄固定 250px、右欄主內容 */
.layout{max-width:1320px;margin:0;padding:0 40px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px}
.side{position:sticky;top:0;height:100vh;padding:80px 0 48px;display:flex;flex-direction:column}
.side h1{font-size:34px;letter-spacing:-.01em;margin-top:14px}.side h1 small{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;color:var(--accent-text);margin-top:8px;line-height:1.35}
.side .intro{color:var(--ink-2);margin-top:18px;font-size:14.5px}
.side-nav{margin-top:44px;display:grid;gap:4px}.side-nav a{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-2);min-height:36px;transition:color .25s}.side-nav a i{width:28px;height:1px;background:var(--muted);transition:width .35s var(--ease),background .25s}.side-nav a:hover,.side-nav a.on{color:var(--ink)}.side-nav a:hover i,.side-nav a.on i{width:56px;background:var(--ink)}
.side-nav a.ext{margin-top:10px;color:var(--accent-text)}.side-nav a.ext i{background:var(--accent)}
.social{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:12px;color:var(--ink-2)}.social a:hover{color:var(--ink)}
.content{padding:80px 0 60px;min-width:0}
.sec{margin-bottom:88px;scroll-margin-top:24px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 0 14px;margin-bottom:6px}
.sec-head h2{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);font-weight:500}.sec-head h2 b{color:var(--muted);font-weight:400;margin-left:8px}
.sec-lead{color:var(--ink-2);margin:0 0 20px;max-width:46em}

/* 作品列 */
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{min-height:34px;padding:5px 13px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--ink-2);transition:.2s}.chip:hover{border-color:var(--accent-2)}.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;padding:18px 16px;margin:0 -16px;border-radius:16px;transition:background .25s,transform .3s var(--ease),opacity .3s}.row:hover{background:rgba(251,247,241,.55)}.row.hide{display:none}.row.fade{opacity:0}
.card-img{margin:0;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card-2)}.card-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.row h3{font-size:17px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.row h3 small{font-weight:400;color:var(--muted);font-size:13px;display:block;width:100%}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;padding:2px 9px;border-radius:999px}.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.badge.live{color:var(--ok);background:var(--ok-soft)}.badge.run{color:var(--warn);background:var(--warn-soft)}
.card-cat{display:none}.card-sum{margin:6px 0 10px;color:var(--ink-2);font-size:14.5px}
.tags{display:flex;flex-wrap:wrap;gap:5px}.tags li{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent-text)}
.card-more{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:6px;padding:4px 0;font-size:13.5px;font-weight:500;color:var(--accent-text)}.card-more svg{width:13px;height:13px;transition:transform .3s var(--ease)}.card-more:hover svg{transform:translate(2px,-2px)}
.js .card-detail{display:none}.no-js .card-more{display:none}
.card-detail ul{display:grid;gap:9px;font-size:14.5px;color:var(--ink-2);margin-top:10px}.card-detail li{padding-left:18px;position:relative}.card-detail li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1.5px;background:var(--accent-2)}.card-role{margin-top:14px;font-size:12.5px;color:var(--muted);font-family:var(--mono)}

/* 架構 */
.diagram{padding:22px 24px;border-radius:18px;background:var(--card);border:1px solid var(--line)}.tier{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:10px 0}.tier+.tier{border-top:1px dashed var(--line)}.tier-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.nodes{display:flex;flex-wrap:wrap;gap:7px}.node{padding:6px 11px;border-radius:9px;background:var(--card-2);border:1px solid var(--line);font-size:13px}.node.hl{background:var(--accent-soft);border-color:rgba(164,114,75,.3);color:var(--accent);font-weight:500}.tier-arrow{text-align:center;color:var(--accent-2);font-size:16px;line-height:1;margin:-4px 0}

/* 技能、經歷、關於 */
.krow{display:grid;grid-template-columns:130px 1fr;gap:22px;padding:14px 0;border-top:1px solid var(--line);font-size:14.5px}.krow:last-child{border-bottom:1px solid var(--line)}.krow b{font-weight:500;color:var(--muted);font-family:var(--mono);font-size:12px;padding-top:4px}.krow .tags li{background:var(--card);border:1px solid var(--line);color:var(--ink-2);font-family:var(--sans);font-size:13px}
.job{display:grid;grid-template-columns:130px 1fr;gap:22px;padding:18px 16px;margin:0 -16px;border-radius:16px;transition:background .25s}.job:hover{background:rgba(251,247,241,.55)}.job .when{font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:5px}.job h3{font-size:16.5px}.job h3 span{font-weight:400;color:var(--muted);font-size:13.5px}.job p{margin-top:6px;color:var(--ink-2);font-size:14.5px;max-width:52em}
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.about .prose{display:grid;gap:12px;color:var(--ink-2)}.facts{display:grid;gap:8px;align-content:start}.fact{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:14px}.fact b{font-weight:500;color:var(--muted);font-size:12.5px}
.contact{padding:40px 36px;border-radius:24px;background:var(--ink);color:var(--bg);position:relative;overflow:hidden}.contact::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,126,.35),transparent 65%);right:-120px;top:-140px;pointer-events:none}.contact h2{font-size:26px}.contact p{margin-top:10px;opacity:.8;max-width:34em}.contact .rowb{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative}.contact .btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--bg)}.contact .btn.primary{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.foot{margin-top:40px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* Modal */
.modal{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}.modal::backdrop{background:rgba(58,46,38,.45);backdrop-filter:blur(6px)}.modal[open]{display:grid;place-items:center;padding:20px}
.modal-card{position:relative;width:min(720px,100%);max-height:min(86vh,900px);overflow:auto;background:var(--card);color:var(--ink);border-radius:24px;border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(58,46,38,.6);padding:28px 30px 30px;animation:modal-in .35s var(--ease)}@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.modal-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1;color:var(--muted);background:var(--card-2)}
.modal-body .card-img{margin:0 0 18px;aspect-ratio:16/8}.modal-body h3{font-size:24px}.modal-body h3 small{font-size:14px}.modal-body .card-sum{margin:14px 0 4px;font-size:15.5px}.modal-body .card-detail{display:block}.modal-body .tags{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.modal-body .card-more{display:none}
body.modal-open{overflow:hidden}

@media(max-width:900px){.layout{grid-template-columns:1fr;gap:0;padding:0 20px}.side{position:static;height:auto;padding:56px 0 8px}.side-nav{display:flex;gap:0 18px;margin-top:24px;overflow-x:auto;padding-bottom:6px}.side-nav a{white-space:nowrap}.side-nav a i{display:none}.side-nav a.on{text-decoration:underline;text-underline-offset:6px}.side-nav a.ext{margin-top:0}.social{margin-top:14px}.content{padding-top:24px}.row{grid-template-columns:1fr;gap:12px}.about{grid-template-columns:1fr}.job,.krow{grid-template-columns:1fr;gap:6px}.modal[open]{padding:12px}.modal-card{padding:22px 18px 24px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bg-blobs span{animation:none}.js .rise{opacity:1;transform:none;transition:none}}

/* ===== 履歷頁專用：頂部導覽與版面 ===== */
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
/* 導覽列 */
.nav {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(241, 231, 219, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.nav.scrolled { border-color: var(--line); background: rgba(241, 231, 219, 0.9); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: 0.01em; display: flex; align-items: center; gap: 10px; }
.brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px;
  font-size: 14px; color: var(--ink-2); transition: background 0.2s, color 0.2s;
}
.nav-links a:hover, .nav-links a.active { background: var(--accent-soft); color: var(--ink); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; border: 1px solid var(--line); background: var(--card);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent-2); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { background: #2a2019; }
.btn svg { width: 16px; height: 16px; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; transition: transform 0.3s, opacity 0.3s; }

/* 履歷頁 */
.resume { max-width: 860px; margin: 48px auto 80px; padding: 56px 60px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; }
.resume header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.resume header h1 { font-size: 32px; letter-spacing: -0.01em; }
.resume header h1 small { display: block; font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.resume header .role { margin-top: 10px; color: var(--ink-2); }
.resume .contact-list { font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; text-align: right; }
.resume .contact-list a { color: var(--accent); }
.resume section { padding-top: 26px; }
.resume h2 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.resume .summary { color: var(--ink-2); }
.resume .entry { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 12px 0; }
.resume .entry + .entry { border-top: 1px dashed var(--line); }
.resume .entry .when { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 3px; }
.resume .entry h3 { font-size: 15.5px; }
.resume .entry h3 small { font-weight: 400; color: var(--muted); font-size: 13px; }
.resume .entry ul { margin-top: 6px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.resume .entry li { padding-left: 14px; position: relative; }
.resume .entry li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 1.5px; background: var(--accent-2); }
.resume .skill-rows { display: grid; gap: 6px; font-size: 14px; }
.resume .skill-rows div { display: grid; grid-template-columns: 130px 1fr; gap: 18px; }
.resume .skill-rows b { font-weight: 500; color: var(--muted); font-family: var(--mono); font-size: 12px; padding-top: 3px; }
.resume-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.resume-bar p { font-size: 13.5px; color: var(--muted); }

@media print {
  .bg-blobs, .nav, .resume-bar, .footer { display: none !important; }
  body { background: #fff; color: #222; font-size: 12.5px; }
  .resume { margin: 0; padding: 0; border: 0; border-radius: 0; max-width: none; background: #fff; }
  .resume section { padding-top: 16px; }
  .resume h2 { break-after: avoid; }
  .resume .entry { break-inside: avoid; padding: 8px 0; }
  a[href]::after { content: none; }
  @page { margin: 16mm 14mm; }
}

@media (max-width: 640px) {
  .nav-links { display: none; position: absolute; left: 16px; right: 16px; top: 68px; flex-direction: column; padding: 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .nav .btn { display: none; }
  .resume { padding: 32px 22px; margin-top: 16px; }
  .resume .entry, .resume .skill-rows div { grid-template-columns: 1fr; gap: 4px; }
  .resume .contact-list { text-align: left; }
}