/*
Theme Name: Dr. Kyaw Phyo Linn Card
Theme URI: https://www.avidions.com/
Author: Avidions Technologies
Description: Dynamic, editable portfolio & digital business card theme for Dr. Kyaw Phyo Linn.
Version: 1.0.0
Text Domain: kplinn-card
*/

:root{
  --ink:#17202a; --muted:#68727d; --line:#e5e8eb; --paper:#fff;
  --accent:#1d4f73; --soft:#f6f8fa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#f2f4f6;color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.page{max-width:1180px;margin:auto;background:var(--paper);min-height:100vh}
header{
  padding:30px 6vw;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:24px
}
.brand{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--accent)}
.nav{display:flex;gap:24px}.nav a{color:var(--muted);text-decoration:none;font-size:13px}.nav a:hover{color:var(--ink)}
.hero{
  padding:90px 6vw 75px;display:grid;grid-template-columns:1.25fr .75fr;
  gap:70px;align-items:center
}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:18px}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(44px,6vw,76px);line-height:.98;letter-spacing:-.045em;margin:0 0 20px}
.subtitle{font-size:18px;color:var(--muted);line-height:1.65;max-width:650px}
.actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{
  padding:13px 19px;border:1px solid var(--ink);text-decoration:none;color:var(--ink);
  font-size:13px;font-weight:700;letter-spacing:.02em;background:white;cursor:pointer
}
.btn.primary{background:var(--ink);color:white}
.profile-card{border:1px solid var(--line);padding:32px;background:#fff}
.profile-image-container{
  width:100%;height:280px;border:1px solid var(--line);margin-bottom:28px;overflow:hidden;background:#f8fafc;
}
.profile-image-container img{
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
}
.profile-card h2{font-family:Georgia,serif;font-weight:500;font-size:27px;margin:0 0 8px}
.profile-card p{color:var(--muted);line-height:1.6;font-size:14px;margin:0}
.rule{height:1px;background:var(--line);margin:25px 0}
.contact{display:grid;gap:13px}.contact a{color:var(--ink);text-decoration:none;font-size:13px;word-break:break-word}
.contact span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:4px}
section{padding:72px 6vw;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;gap:30px;margin-bottom:36px}
h3{font-family:Georgia,serif;font-size:34px;font-weight:500;margin:0}
.section-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:800}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.item{border:1px solid var(--line);padding:25px;background:#fff}
.item .year{font-size:11px;color:var(--accent);font-weight:800;letter-spacing:.1em}
.item h4{font-size:16px;margin:9px 0 7px}.item p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.publications{display:grid;gap:0}
.pub{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:50px 1fr;gap:20px}
.pub:last-child{border-bottom:0}.num{color:var(--accent);font-weight:800;font-size:12px}.pub p{margin:0;font-size:14px;line-height:1.6}.pub em{font-family:Georgia,serif}
footer{padding:28px 6vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
@media(max-width:760px){
 header{padding:24px}.nav{display:none}.hero{grid-template-columns:1fr;padding:65px 24px 55px;gap:42px}
 section{padding:55px 24px}.grid{grid-template-columns:1fr}.section-head{display:block}.section-label{margin-bottom:10px}
 footer{padding:24px;display:block}.subtitle{font-size:16px}
}
.social-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.social-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.social-btn:hover {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}