/* /portfolio redesign (Oct 2026) */
.pf { --bg:#F6F7F4; --band:#ECEFEA; --head:#2E6F7B; --body:#51656B; --muted:#5A6B6F; --teal:#0B6B70; --line:#E2E6E1; }
.pf .wrap { max-width:1200px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
.pf h1, .pf h2 { color:var(--head); margin:0; font-weight:600; text-wrap:balance; letter-spacing:-.02em; }
.pf .eyebrow { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); margin:0 0 12px; }
.pf .hero { padding-block:64px 40px; }
.pf .hero .wrap { display:flex; flex-wrap:wrap; gap:44px; align-items:center; }
.pf .hero__photo { flex:0 1 340px; position:relative; padding:0 16px 16px 0; margin:0 auto; }
.pf .hero__photo::before { content:""; position:absolute; left:16px; top:16px; right:0; bottom:0; border-radius:26px; background:linear-gradient(135deg,#9FDCC9,#0B6B70); }
.pf .hero__photo img { position:relative; display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; border-radius:26px; }
.pf .hero__copy { flex:999 1 480px; min-width:0; }
.pf .hero h1 { font-size:clamp(36px,5vw,54px); line-height:1.08; }
.pf .hero p.lead { margin:18px 0 0; font-size:18px; line-height:1.6; max-width:600px; }
.pf .stats { margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.pf .stats span { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:14px; }
.pf .stats b { color:var(--teal); font-family:'JetBrains Mono',monospace; margin-right:6px; }
.pf .group { padding-block:40px; }
.pf .group__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.pf .group h2 { font-size:clamp(28px,3.4vw,38px); }
.pf .group__head span { font-size:14px; color:var(--muted); }
.pf .grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:1000px) {
.pf .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px) {
.pf .grid { grid-template-columns:minmax(0,1fr); }
.pf .pc--wide { grid-column:auto !important; }
}
.pf .pc { background:#fff; border:1px solid var(--line); border-radius:24px; padding:22px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--body); transition:transform .2s ease, box-shadow .2s ease; }
.pf .pc:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(11,107,112,.12); }
.pf .pc--wide { grid-column:span 2; background:var(--tint); border-color:transparent; }
.pf .pc__top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; min-height:52px; }
.pf .pc__top img { height:48px; max-width:160px; object-fit:contain; object-position:left center; }
.pf .pc__yrs { align-self:flex-start; margin-top:-4px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal); background:#F0F6F5; padding:5px 9px; border-radius:999px; white-space:nowrap; }
.pf .pc--wide .pc__yrs { align-self:flex-start; margin-top:-4px; background:rgba(255,255,255,.75); }
.pf .pc__role { font-size:17px; font-weight:600; color:var(--head); line-height:1.3; }
.pf .pc--wide .pc__role { font-size:22px; }
.pf .pc p { margin:0; font-size:14px; line-height:1.55; }
.pf .pc--wide p { font-size:16px; }
.pf .pc__chips { display:flex; flex-wrap:wrap; gap:6px; }
.pf .pc__chips span { font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.8); color:#2D4A4F; }
.pf .pc__go { margin-top:auto; padding-top:6px; font-size:14px; font-weight:600; color:var(--teal); }
.pf .vol { background:var(--band); padding-block:56px; margin-top:24px; }
.pf .vol ul { list-style:none; margin:22px 0 0; padding:0; background:#fff; border-radius:24px; overflow:hidden; border:1px solid var(--line); }
.pf .vol li { display:grid; grid-template-columns:170px minmax(0,1fr) minmax(0,1.2fr); gap:16px; padding:16px 22px; border-top:1px solid var(--line); align-items:baseline; font-size:15px; }
.pf .vol li:first-child { border-top:0; }
.pf .vol li span { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); }
.pf .vol li b { color:var(--head); font-weight:600; }
.pf .vol li em { font-style:normal; }
@media (max-width:700px) {
.pf .vol li { grid-template-columns:minmax(0,1fr); gap:2px; }
}

@media (prefers-reduced-motion:reduce) {
.pf .pc { transition:none; }
}

.pf { background:var(--bg); color:var(--body); font-family:"Sora",system-ui,sans-serif; }
.pf *, .pf *::before, .pf *::after { box-sizing:border-box; }
.pf section { padding-left:0; padding-right:0; }

.pf .fl { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pf .fl[hidden] { display: none; }
.pf .fl__label { grid-column: 1 / -1; margin: 10px 0 0; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.pf .fl__card { grid-column: span 1; --tint: #FBF0DC; }
.pf .fl__name { font-size: 15px; font-weight: 700; color: #2D4A4F; }
.pf .fl__st { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #22A06B; background: #E3F5EC; padding: 4px 9px; border-radius: 999px; }
@media (max-width: 700px) { .pf .fl { grid-template-columns: minmax(0, 1fr); } }