/* TATSUYA WADA portfolio — shared styles (scoped under .pf) */
.pf{
  --pf-ink:#17191f; --pf-paper:#f9f8f4; --pf-card:#ffffff;
  --pf-accent:#1f7d68; --pf-accent-d:#17614f; --pf-muted:#5c626d; --pf-line:#e6e2d8;
  --pf-font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;
  color:var(--pf-ink); font-family:var(--pf-font); line-height:1.9;
}
.pf *{box-sizing:border-box}
.pf img{max-width:100%;height:auto;display:block}
.pf a{color:var(--pf-accent);text-decoration:none}
.pf .pf-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--pf-accent);text-transform:uppercase;margin-bottom:12px}
.pf .pf-h{font-size:clamp(24px,3.4vw,34px);font-weight:800;line-height:1.35;letter-spacing:.01em;margin:0 0 8px}
.pf .pf-sub{color:var(--pf-muted);font-size:15px;margin:0 0 8px}
.pf .pf-lead{font-size:clamp(15px,1.7vw,17px);line-height:1.95;margin:0 0 1.2em}
.pf .pf-name{font-size:18px;font-weight:800;margin:20px 0 4px}
.pf .pf-role{color:var(--pf-muted);font-size:14px;margin-bottom:20px}
.pf p{margin:0 0 1.15em}
.pf hr.pf-rule{border:none;border-top:1px solid var(--pf-line);margin:34px 0}

/* meta list (専門/軸/経歴) */
.pf .pf-meta{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--pf-line)}
.pf .pf-meta li{display:flex;gap:16px;padding:14px 2px;border-bottom:1px solid var(--pf-line);font-size:14.5px;flex-wrap:wrap}
.pf .pf-meta li b{flex:0 0 84px;color:var(--pf-ink);font-weight:800}
.pf .pf-meta li span{flex:1;color:#3c3f47;min-width:220px}

/* skill chips */
.pf .pf-skills{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0}
.pf .pf-skills li{background:#fff;border:1px solid var(--pf-line);border-radius:999px;padding:8px 16px;font-size:13.5px;color:#3c3f47}

/* section spacing */
.pf .pf-sec{margin:0 0 44px}

/* work cards */
.pf .pf-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.pf .pf-card{background:var(--pf-card);border:1px solid var(--pf-line);border-radius:16px;padding:26px 24px;transition:transform .18s,box-shadow .18s,border-color .18s}
.pf .pf-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(23,25,31,.08);border-color:#d7d2c6}
.pf .pf-card .pf-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--pf-accent);border:1px solid var(--pf-line);border-radius:999px;padding:4px 11px;margin-bottom:12px}
.pf .pf-card h3{font-size:19px;font-weight:800;margin:0 0 8px}
.pf .pf-card p{font-size:14px;color:var(--pf-muted);margin:0 0 14px;line-height:1.8}
.pf .pf-card .pf-link{font-size:13.5px;font-weight:700;color:var(--pf-accent);display:inline-flex;align-items:center;gap:6px}
.pf .pf-card .pf-tech{font-size:12px;color:#8a8f99;margin:0 0 12px}

/* CTA box */
.pf .pf-cta{background:var(--pf-ink);color:#fff;border-radius:18px;padding:clamp(28px,4vw,44px);text-align:center;margin-top:8px}
.pf .pf-cta h3{font-size:clamp(20px,2.6vw,26px);font-weight:800;margin:0 0 10px;color:#fff}
.pf .pf-cta p{color:#cfd1d6;font-size:15px;margin:0 0 22px}
.pf .pf-btn{display:inline-block;background:var(--pf-accent);color:#fff;font-weight:700;font-size:15px;padding:14px 30px;border-radius:999px;transition:background .15s}
.pf .pf-btn:hover{background:var(--pf-accent-d);color:#fff}
.pf .pf-btn--ghost{background:transparent;border:1.5px solid var(--pf-ink);color:var(--pf-ink)}
.pf .pf-btn--ghost:hover{background:var(--pf-ink);color:#fff}

@media(max-width:768px){
  .pf .pf-cards{grid-template-columns:1fr}
}

/* ===== front page ===== */
.pf-hero{background:linear-gradient(135deg,#1f7d68,#17614f);color:#fff;border-radius:20px;padding:clamp(40px,7vw,80px) clamp(28px,5vw,58px);margin-bottom:44px;position:relative;overflow:hidden}
.pf-hero::after{content:"";position:absolute;right:-70px;bottom:-70px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06)}
.pf-hero>*{position:relative;z-index:1}
.pf-hero .pf-hero-ey{color:rgba(255,255,255,.85);font-size:12px;letter-spacing:.2em;font-weight:700;text-transform:uppercase}
.pf-hero h1{font-size:clamp(30px,5.5vw,52px);font-weight:900;line-height:1.25;margin:14px 0 10px;color:#fff;letter-spacing:.02em}
.pf-hero .pf-hero-name{font-size:16px;font-weight:700;color:#fff;margin:0 0 14px}
.pf-hero .pf-hero-lead{font-size:clamp(14px,1.7vw,17px);color:rgba(255,255,255,.92);max-width:30em;margin:0 0 28px;line-height:1.8}
.pf-hero .pf-hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.pf-hero .pf-btn{background:#fff;color:#17614f}
.pf-hero .pf-btn:hover{background:#efeee8;color:#17614f}
.pf-hero .pf-btn--o{background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff}
.pf-hero .pf-btn--o:hover{background:rgba(255,255,255,.12);color:#fff}
.pf-intro{font-size:clamp(15px,1.8vw,18px);line-height:2;color:#3c3f47;max-width:44em;margin:0 auto 52px;text-align:center}
.pf-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0 52px}
.pf-pillar{background:#fff;border:1px solid #e6e2d8;border-radius:16px;padding:28px 24px;text-align:center}
.pf-pillar .n{width:44px;height:44px;border-radius:12px;background:#e7f3ef;color:#1f7d68;display:grid;place-items:center;margin:0 auto 14px;font-weight:900}
.pf-pillar h3{font-size:17px;font-weight:800;margin:0 0 8px}
.pf-pillar p{font-size:13.5px;color:#5c626d;margin:0;line-height:1.85}
.pf-center{text-align:center;margin:0 0 52px}
.pf-sns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0 0}
.pf-sns span{background:#fff;border:1px solid #e6e2d8;border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:700;color:#3c3f47}
@media(max-width:768px){.pf-pillars{grid-template-columns:1fr}}

/* ===== photo hero & gallery ===== */
.pf-hero--photo{background-color:#14161c;background-size:cover;background-position:center right;min-height:clamp(380px,52vw,560px);display:flex;flex-direction:column;justify-content:center}
.pf-hero--photo::after{display:none}
.pf-hero--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,14,19,.85) 0%,rgba(12,14,19,.55) 44%,rgba(12,14,19,.1) 100%);z-index:0}
.pf-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.pf-gallery a{display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#eee}
.pf-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.pf-gallery a:hover img{transform:scale(1.05)}
@media(max-width:768px){.pf-gallery{grid-template-columns:1fr 1fr}}