/* ===== Dorian PANG — portfolio (light editorial, six061-structured) ===== */
:root{
  --bg:#ffffff; --surface:#f6f7f9; --surface2:#eef1f5;
  --text:#1a1f2b; --muted:#5a6472; --faint:#8b93a3;
  --accent:#E82127; --line:#e4e8ee;
  --maxw:1060px;
  --mono:'JetBrains Mono','SFMono-Regular','SF Mono',ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:'Segoe UI',-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* NAV */
nav{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:30;}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:58px;}
nav .brand{font-weight:700;letter-spacing:.02em;}
nav .links a{margin-left:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
nav .links a:hover{color:var(--accent);}
@media(max-width:700px){nav .links{display:none;}}

/* HERO */
.hero{padding:64px 0 46px;border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:46px;align-items:start;}
.hero .kick{font-family:var(--mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.hero h1{margin-top:16px;line-height:1;}
.hero h1 .name{display:block;font-family:'Segoe UI',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:clamp(38px,7vw,74px);font-weight:900;letter-spacing:-.035em;text-transform:uppercase;color:var(--text);}
.hero h1 .sub{display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(14px,1.9vw,19px);letter-spacing:.02em;color:var(--muted);margin-top:12px;}
.hero .fullname{margin-top:10px;font-size:14px;color:var(--muted);letter-spacing:.02em;}
.hero .tag{margin-top:20px;font-size:17px;color:var(--muted);max-width:620px;line-height:1.65;}
.hero .tag b{color:var(--text);font-weight:600;}
.hero .photo{width:100%;aspect-ratio:5/6;object-fit:cover;border:1px solid var(--line);background:var(--surface);}
.hero .cta{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;}

.btn{display:inline-block;padding:12px 20px;border:1px solid var(--line);background:#fff;color:var(--text);
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:.15s;}
.btn:hover{border-color:var(--text);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{background:#c9191e;border-color:#c9191e;}
@media(max-width:780px){.hero-grid{grid-template-columns:1fr;gap:22px;} .hero .photo{max-width:200px;}}

/* SPEC ROW */
.specrow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);margin-top:30px;}
.specrow .c{padding:16px 18px;border-right:1px solid var(--line);}
.specrow .c:last-child{border-right:none;}
.specrow .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.specrow .v{margin-top:6px;font-size:15px;color:var(--text);font-weight:600;line-height:1.35;}
@media(max-width:640px){.specrow{grid-template-columns:1fr;} .specrow .c{border-right:none;border-bottom:1px solid var(--line);}}

/* SECTION */
section{padding:56px 0;}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
h2.title{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.12;}
h2.title.up{text-transform:uppercase;font-family:var(--mono);letter-spacing:-.01em;}
.sub{margin-top:12px;font-size:15px;color:var(--muted);max-width:660px;}

/* CARDS */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;}
@media(max-width:780px){.cards{grid-template-columns:1fr;}}
.card{display:block;background:#fff;border:1px solid var(--line);transition:border-color .15s,transform .15s,box-shadow .15s;}
.card:hover{border-color:#c9d0da;transform:translateY(-2px);box-shadow:0 14px 34px rgba(16,30,60,.09);}
.card .thumb{aspect-ratio:4/3;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--line);}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.card .thumb.pair{position:relative;}
.card .thumb.pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card .thumb.pair img:nth-child(1){animation:cf1 9s infinite;}
.card .thumb.pair img:nth-child(2){animation:cf2 9s infinite;}
.card .body{padding:16px 18px 18px;}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.card .code{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent);}
.card .status{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);padding:2px 7px;}
.card h3{font-size:17px;font-weight:700;margin-top:10px;letter-spacing:-.01em;}
.card .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:5px;}
.card .one{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.55;}
.card .metrics{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;}
.card .metrics span{font-family:var(--mono);font-size:11px;color:var(--text);}

/* PROJECT PAGE HEAD */
.phead{padding:56px 0 8px;}
.back{font-family:var(--mono);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.back:hover{color:var(--accent);}
.phead .code{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--accent);margin-top:26px;}
.phead h1{font-size:clamp(24px,3.6vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin-top:10px;}
.phead .role{font-size:15px;color:var(--accent);font-weight:600;margin-top:8px;}
.phead .spec{margin-top:12px;font-size:13.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em;}
.tags{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;}
.tag-chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);padding:4px 10px;color:var(--muted);}

/* MEDIA (no crop: natural ratio) */
figure{margin:0;border:1px solid var(--line);background:var(--surface);}
figure img{width:100%;height:auto;display:block;}
figure video{width:100%;height:auto;display:block;}
figure figcaption{font-family:var(--mono);font-size:12.5px;color:#465061;padding:11px 14px;border-top:1px solid var(--line);letter-spacing:.01em;line-height:1.5;}
.media{margin:30px 0;}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.gallery.g3{grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery figure{display:flex;flex-direction:column;}
.gallery figure img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.gallery figure video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.gallery.fit{align-items:start;}
.gallery.fit figure img{aspect-ratio:auto;object-fit:contain;height:auto;}
.gallery.fit figure video{aspect-ratio:auto;object-fit:contain;height:auto;}
@media(max-width:720px){.gallery{grid-template-columns:1fr;} .gallery.g3{grid-template-columns:1fr 1fr;}}
.media.half{max-width:520px;}
.media.narrow{max-width:520px;margin-left:auto;margin-right:auto;}
.media.tight{max-width:380px;margin-left:auto;margin-right:auto;}
.duo{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin:30px 0;}
.duo figure{margin:0;border:1px solid var(--line);background:var(--surface);}
.duo img{height:400px;width:auto;display:block;}
.masonry{column-count:3;column-gap:14px;}
.masonry figure{break-inside:avoid;margin:0 0 14px;}
@media(max-width:760px){.masonry{column-count:2;}}
@media(max-width:480px){.masonry{column-count:1;}}
figure img{cursor:zoom-in;}
.lightbox{position:fixed;inset:0;background:rgba(12,15,20,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:26px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:96%;max-height:92%;border:1px solid rgba(255,255,255,.25);background:#fff;cursor:zoom-out;}
.lightbox .x{position:absolute;top:14px;right:22px;color:#fff;font-family:var(--mono);font-size:26px;line-height:1;cursor:pointer;opacity:.85;}
.lightbox .x:hover{opacity:1;}

/* carousel */
.carousel{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:var(--surface);overflow:hidden;}
.carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.carousel img:nth-child(1){animation:cf1 8s infinite;}
.carousel img:nth-child(2){animation:cf2 8s infinite;}
@keyframes cf1{0%,45%{opacity:1;}55%,95%{opacity:0;}100%{opacity:1;}}
@keyframes cf2{0%,45%{opacity:0;}55%,95%{opacity:1;}100%{opacity:0;}}
.carousel .cap{position:absolute;left:14px;bottom:12px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.05em;line-height:1.5;
  color:#fff;background:rgba(0,0,0,.62);padding:6px 11px;border-radius:4px;max-width:72%;}

/* 3D viewer */
.viewer-wrap{margin:30px 0;}
.viewer-wrap .vh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.viewer-wrap .vh .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.viewer-wrap .vh .d{font-family:var(--mono);font-size:10.5px;color:var(--faint);}
model-viewer{width:100%;height:440px;border:1px solid var(--line);background:var(--surface);--poster-color:transparent;}
@media(max-width:720px){model-viewer{height:300px;}}

video.slot{width:100%;border:1px solid var(--line);background:var(--surface);display:block;margin:30px 0;}
.video-slot iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--line);margin:30px 0;}

/* project sections */
.psec{padding:30px 0;border-top:1px solid var(--line);}
.psec .kicker{margin-bottom:10px;}
.psec p{font-size:15.5px;color:#333c4d;max-width:780px;}
.psec p + p{margin-top:12px;}
.psec p b{color:var(--text);font-weight:600;}
.psec ul{list-style:none;margin-top:12px;max-width:780px;}
.psec li{font-size:15px;color:#333c4d;padding-left:22px;position:relative;margin-top:9px;}
.psec li::before{content:"—";position:absolute;left:0;color:var(--accent);}

.plinks{margin-top:18px;display:flex;gap:20px;flex-wrap:wrap;}
.plinks a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid transparent;}
.plinks a:hover{border-color:var(--accent);}

/* more-nav */
.more-nav{display:flex;justify-content:space-between;gap:16px;padding:30px 0;border-top:1px solid var(--line);}
.more-nav a{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.more-nav a:hover{color:var(--accent);}

/* EXPERIENCE / SKILLS blocks */
.exp{border-top:1px solid var(--line);padding:22px 0;}
.exp .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.exp h3{font-size:18px;font-weight:700;margin-top:6px;}
.exp .co{font-size:13.5px;color:var(--accent);font-weight:600;margin-top:2px;}
.exp ul{list-style:none;margin-top:12px;}
.exp li{font-size:14.5px;color:#333c4d;padding-left:20px;position:relative;margin-top:7px;}
.exp li::before{content:"—";position:absolute;left:0;color:var(--accent);}

.caps{margin-top:34px;border-top:1px solid var(--line);}
.cap{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);}
.cap .n{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--accent);padding-top:3px;}
.cap .t{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);}
.cap .d{margin-top:9px;font-size:15px;color:var(--muted);max-width:780px;line-height:1.65;}
@media(max-width:560px){.cap{grid-template-columns:44px 1fr;gap:14px;}}

/* FOOTER */
footer{background:var(--surface);border-top:1px solid var(--line);padding:52px 0;margin-top:20px;}
footer .fname{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:.02em;}
footer .frow{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);}
footer .frow a{color:var(--text);} footer .frow a:hover{color:var(--accent);}
footer .small{margin-top:20px;font-size:12px;color:var(--faint);}