:root { --portfolio-ink:#201d22; --portfolio-muted:#706873; --portfolio-paper:#fff; --portfolio-dark:#17151a; --portfolio-gold:#c9a76a; --portfolio-line:#e7e0d7; }
body { background:var(--portfolio-paper); color:var(--portfolio-ink); }
.portfolio-hero { background:linear-gradient(115deg,#17151a 0%,#26222a 62%,#40352b 100%); color:#fff; padding:clamp(72px,11vw,148px) max(20px,calc((100% - 1160px)/2)); }
.portfolio-hero-inner { max-width:780px; }
.portfolio-hero .eyebrow { color:#edd6a4; }
.portfolio-hero h1 { margin:0 0 18px; font:600 clamp(42px,7vw,78px)/1.12 "Noto Serif TC",Georgia,serif; }
.portfolio-hero .lead { max-width:620px; margin:0 0 28px; color:rgba(255,255,255,.82); font-size:clamp(17px,2vw,21px); }
.portfolio-actions { display:flex; flex-wrap:wrap; gap:12px; }
.portfolio-main { padding:78px max(20px,calc((100% - 1160px)/2)); }
.section-intro { max-width:680px; margin-bottom:30px; }
.section-intro h2 { margin:0 0 10px; font:600 clamp(30px,4vw,46px)/1.25 "Noto Serif TC",Georgia,serif; }
.section-intro p { color:var(--portfolio-muted); }
.filter-scroller { display:flex; gap:10px; overflow-x:auto; padding:4px 0 18px; scrollbar-width:thin; }
.filter-button { flex:0 0 auto; min-height:44px; padding:0 16px; border:1px solid var(--portfolio-line); border-radius:999px; background:#fff; color:var(--portfolio-muted); font-weight:700; }
.filter-button.is-active,.filter-button:hover { border-color:var(--portfolio-dark); background:var(--portfolio-dark); color:#fff; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.portfolio-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--portfolio-line); background:#fff; box-shadow:0 14px 35px rgba(29,24,31,.06); }
.portfolio-cover { aspect-ratio:16/10; background:#262229; overflow:hidden; }
.portfolio-cover img { width:100%; height:100%; object-fit:cover; }
.portfolio-placeholder { height:100%; display:grid; place-content:center; gap:6px; text-align:center; color:#f2dfb5; background:linear-gradient(135deg,#262229,#4a3b30); }
.portfolio-placeholder span { font:600 22px "Noto Serif TC",Georgia,serif; }.portfolio-placeholder small { color:rgba(255,255,255,.68); }
.portfolio-card-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:22px; }.portfolio-card h3 { margin:0 0 8px; font-size:21px; line-height:1.4; }.portfolio-card p:not(.eyebrow) { margin:0 0 14px; color:var(--portfolio-muted); font-size:14px; }
.tag-list { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }.tag-list span { padding:4px 9px; border:1px solid #ded5c7; border-radius:999px; color:#655744; font-size:12px; }
.text-button { margin-top:auto; padding:8px 0; border:0; border-bottom:1px solid var(--portfolio-gold); background:transparent; color:#6d542d; font-weight:800; }.text-button span { margin-left:6px; }
.portfolio-conversion { display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; margin-top:82px; padding:48px; background:#f6f0e7; }.portfolio-conversion h2 { margin:0 0 12px; font:600 clamp(28px,4vw,42px)/1.25 "Noto Serif TC",Georgia,serif; }.portfolio-conversion p { margin:0; color:var(--portfolio-muted); }
.featured-project { display:grid; grid-template-columns:1fr 1fr; min-height:390px; margin:0 auto; width:min(1160px,calc(100% - 40px)); background:var(--portfolio-dark); color:#fff; overflow:hidden; }.featured-project[hidden] { display:none; }.featured-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,5vw,70px); }.featured-copy .eyebrow { color:#edd6a4; }.featured-copy h2 { margin:0 0 14px; font:600 clamp(30px,4vw,52px)/1.2 "Noto Serif TC",Georgia,serif; }.featured-copy > p:not(.eyebrow) { max-width:480px; margin:0 0 26px; color:rgba(255,255,255,.76); }.featured-cover { min-height:390px; }.featured-cover .portfolio-cover { height:100%; aspect-ratio:auto; }.featured-cover .portfolio-placeholder { background:linear-gradient(135deg,#211d24,#6d5638); }.featured-status { display:inline-block; align-self:flex-start; margin:0; padding:11px 15px; border:1px solid rgba(237,214,164,.55); color:#edd6a4 !important; font-size:14px; }.empty-state { grid-column:1/-1; margin:0; padding:34px 24px; border:1px dashed var(--portfolio-line); color:var(--portfolio-muted); text-align:center; background:#fcfaf7; }
.modal-backdrop { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; background:rgba(16,14,18,.72); }.modal-backdrop[hidden] { display:none; }.modal-card { width:min(700px,100%); max-height:min(85vh,760px); overflow:auto; padding:34px; background:#fff; box-shadow:0 25px 80px rgba(0,0,0,.28); }.modal-close { float:right; width:40px; height:40px; border:1px solid var(--portfolio-line); border-radius:50%; background:#fff; font-size:20px; }.modal-card h2 { clear:both; margin:24px 0 12px; font:600 32px/1.3 "Noto Serif TC",Georgia,serif; }.modal-card p { color:var(--portfolio-muted); }.modal-card video { width:100%; margin-top:16px; }.modal-note { padding:18px; background:#f6f0e7; }
body.modal-open { overflow:hidden; }
.coaching-hero { background:#f6f0e7; padding:78px max(20px,calc((100% - 1160px)/2)); }.coaching-hero h1 { max-width:760px; margin:0 0 14px; font:600 clamp(40px,6vw,68px)/1.15 "Noto Serif TC",Georgia,serif; }.coaching-hero p { max-width:650px; margin:0; color:var(--portfolio-muted); font-size:18px; }
.coaching-main { padding:72px max(20px,calc((100% - 1160px)/2)); }.coaching-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }.learning-scope { margin:40px 0 28px; padding:30px; background:#f8f5ef; }.learning-scope h2 { margin:0 0 8px; font:600 clamp(28px,4vw,42px)/1.25 "Noto Serif TC",Georgia,serif; }.learning-scope > p:not(.eyebrow) { margin:0 0 20px; color:var(--portfolio-muted); }.scope-list { display:flex; flex-wrap:wrap; gap:10px; }.scope-list span { padding:9px 13px; border:1px solid #dfd2bd; background:#fff; color:#5f5039; font-size:14px; }.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0 42px; }.value-grid > div { padding:24px; border-top:2px solid var(--portfolio-gold); background:#fff; box-shadow:0 10px 26px rgba(29,24,31,.05); }.value-grid strong { display:block; margin-bottom:8px; font:600 24px/1.2 "Noto Serif TC",Georgia,serif; }.value-grid p { margin:0; color:var(--portfolio-muted); }.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:28px 0 22px; }.plan-card { position:relative; display:flex; flex-direction:column; padding:28px 24px; border:1px solid var(--portfolio-line); background:#fff; }.plan-card.recommended { border:2px solid var(--portfolio-gold); }.plan-card .plan-note { position:absolute; top:14px; right:14px; color:#86652f; font-size:12px; font-weight:800; }.plan-card h3 { margin:0 0 10px; font-size:21px; }.plan-detail { color:var(--portfolio-muted); }.plan-price { display:block; margin:16px 0 8px; font:600 34px/1 "Noto Serif TC",Georgia,serif; }.plan-fit { min-height:48px; margin:0 0 20px; color:var(--portfolio-muted); font-size:14px; }.plan-fit strong { display:block; margin-bottom:3px; color:var(--portfolio-ink); }.plan-card .button { margin-top:auto; }.schedule-note { padding:20px; background:#f8f5ef; color:var(--portfolio-muted); }.funnel { display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin:54px 0; }.funnel span { position:relative; padding:16px 10px; border:1px solid var(--portfolio-line); background:#fff; text-align:center; font-size:13px; }.funnel span:not(:last-child)::after { content:'→'; position:absolute; right:-9px; top:50%; z-index:1; color:var(--portfolio-gold); transform:translateY(-50%); }
@media(max-width:760px){.portfolio-hero{padding:62px 18px 70px}.portfolio-hero h1{font-size:43px}.portfolio-actions,.coaching-actions{display:grid}.portfolio-actions .button,.coaching-actions .button{width:100%}.portfolio-main,.coaching-main{padding:56px 18px}.featured-project{grid-template-columns:1fr;width:calc(100% - 36px);min-height:0}.featured-copy{padding:32px 24px}.featured-cover{min-height:240px}.portfolio-grid{grid-template-columns:1fr;gap:16px}.portfolio-cover{aspect-ratio:16/10}.portfolio-conversion{grid-template-columns:1fr;margin-top:56px;padding:28px 22px}.learning-scope{padding:24px 20px}.scope-list{gap:8px}.scope-list span{font-size:13px}.value-grid{grid-template-columns:1fr;gap:12px;margin-bottom:34px}.value-grid > div{padding:20px}.plan-grid{grid-template-columns:1fr;gap:14px}.coaching-hero{padding:58px 18px}.coaching-hero h1{font-size:43px}.funnel{grid-template-columns:1fr;gap:8px}.funnel span:not(:last-child)::after{content:'↓';right:50%;top:auto;bottom:-14px;transform:translateX(50%)}.modal-card{padding:24px 18px}.modal-card h2{font-size:27px}}