/* PFL-01 白页 — designer portfolio, white page and black type */
.tpl-pfl-01{
  --gut:clamp(20px,4.4vw,72px);
  --serif:"Instrument Serif","Noto Serif SC","Songti SC",Georgia,serif;
  --sans:"Inter Tight","Noto Sans SC",system-ui,sans-serif;
  --dock-bg:var(--fg);--dock-fg:var(--bg);
  font-family:var(--sans);font-size:16px;letter-spacing:-.003em;
}
.tpl-pfl-01 main{overflow-x:clip}
.tpl-pfl-01 ::selection{background:var(--accent);color:var(--on-accent)}
.f1-main>section{max-width:1520px;margin:0 auto;padding:clamp(96px,12vw,200px) var(--gut) 0}

/* header */
.f1-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 32px;max-width:1520px;margin:0 auto;padding:14px var(--gut)}
.f1-brand{font-family:var(--serif);font-size:26px;line-height:1;text-decoration:none;min-height:48px;display:flex;align-items:center;letter-spacing:-.01em}
.f1-nav{display:flex;flex-wrap:wrap;gap:0 28px;font-size:14px;color:var(--muted)}
.f1-nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;transition:color .25s}
.f1-nav a:hover{color:var(--fg)}

/* small tags */
.f1-tag,.f1-eyebrow{margin:0;font-size:13px;letter-spacing:.02em;color:var(--muted)}
.f1-tag span{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--accent)}
.f1-eyebrow{display:flex;align-items:center;gap:10px}
.f1-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* hero */
.f1-main>.f1-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);padding-top:clamp(48px,7vw,112px)}
.f1-eyebrow{grid-column:1/-1;margin-bottom:clamp(24px,3vw,44px)}
.f1-hero h1{grid-column:1/span 9;font-family:var(--serif);font-weight:400;font-size:clamp(60px,11.6vw,196px);line-height:.9;letter-spacing:-.035em}
.f1-hero--text h1{grid-column:1/-1}
.f1-hero-copy{grid-column:1/span 5;align-self:end;margin-top:clamp(40px,5vw,80px)}
.f1-sub{max-width:27em;font-size:clamp(16px,1.15vw,18px);line-height:1.85;color:var(--muted)}
.f1-sub p:last-child{margin:0}
.f1-hero-ph{grid-column:8/span 5;grid-row:3/span 2;margin-top:clamp(40px,5vw,80px)}
.f1-hero-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--soft)}
@media (min-width:1101px){
  .f1-hero:not(.f1-hero--text) h1{grid-row:2}
  .f1-hero:not(.f1-hero--text) .f1-hero-ph{grid-column:9/span 4;grid-row:2/span 2;margin-top:clamp(8px,2vw,32px)}
  .f1-hero:not(.f1-hero--text) .f1-hero-copy{grid-row:3}
}
@media (prefers-reduced-motion:no-preference){.f1-hero h1{animation:f1-rise 1.1s cubic-bezier(.2,.7,.2,1) both}.f1-hero-ph img{animation:f1-fade 1.6s .2s ease-out both}}
@keyframes f1-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes f1-fade{from{opacity:0}to{opacity:1}}

/* buttons */
.f1-btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;margin-top:28px;padding:0 26px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-size:15px;font-weight:500;transition:transform .3s,opacity .3s}
.f1-btn:hover{transform:translateY(-2px);opacity:.92}
.f1-btn--big{min-height:60px;padding:0 32px;font-size:16px}

/* index bar */
.f1-index{display:flex;flex-wrap:wrap;gap:12px clamp(24px,4vw,64px);max-width:1520px;margin:clamp(72px,9vw,140px) auto 0;padding:22px var(--gut);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px}
.f1-index li{display:flex;align-items:baseline;gap:10px}
.f1-index span{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:17px}

/* headings */
.tpl-pfl-01 h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.8vw,80px);line-height:1.04;letter-spacing:-.025em}
.f1-sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.f1-sec-head .f1-tag{grid-column:1/span 3;align-self:start;padding-top:12px}
.f1-sec-head h2{grid-column:4/span 6}
.f1-intro{grid-column:10/span 3;color:var(--muted);line-height:1.8;font-size:15px}
.f1-intro p:last-child{margin:0}

/* about */
.f1-main>.f1-about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end}
.f1-about .f1-tag{grid-column:1/span 3;align-self:start;padding-top:12px}
.f1-about-ph{grid-column:4/span 4}
.f1-about-ph img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--soft)}
.f1-about-copy{grid-column:8/span 5}
.f1-about--text .f1-about-copy{grid-column:4/span 7}
.f1-about-copy h2{font-size:clamp(34px,3.4vw,56px);line-height:1.18;margin-bottom:clamp(24px,3vw,40px)}
.f1-body{color:var(--muted);line-height:1.95;max-width:32em}
.f1-body p:last-child{margin:0}

/* services: project index */
.f1-rows{border-top:1px solid var(--fg)}
.f1-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:baseline;padding:clamp(24px,2.6vw,40px) 0;border-bottom:1px solid var(--line);transition:background .3s}
.f1-row-n{grid-column:1/span 3;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--muted)}
.f1-row h3{grid-column:4/span 4;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,42px);line-height:1.15;letter-spacing:-.015em}
.f1-row-d{grid-column:8/span 4;color:var(--muted);line-height:1.8;font-size:15px}
.f1-row-d p:last-child{margin:0}
.f1-price{margin-top:6px!important;color:var(--fg)}
.f1-ask{grid-column:12;justify-self:end;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;text-decoration:none;font-size:18px;transition:background .3s,color .3s,border-color .3s}
.f1-row:hover .f1-ask,.f1-ask:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* work: asymmetric case hang */
.f1-hang{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(56px,7vw,120px) clamp(16px,2vw,32px);align-items:start}
.f1-tile:nth-child(4n+1){grid-column:1/span 7}
.f1-tile:nth-child(4n+2){grid-column:9/span 4;margin-top:clamp(64px,10vw,180px)}
.f1-tile:nth-child(4n+3){grid-column:2/span 4}
.f1-tile:nth-child(4n+4){grid-column:7/span 6;margin-top:clamp(40px,6vw,100px)}
.f1-tile-ph{overflow:hidden;background:var(--soft)}
.f1-tile-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.f1-tile:nth-child(4n+2) img,.f1-tile:nth-child(4n+3) img{aspect-ratio:4/5}
.f1-tile:hover img{transform:scale(1.03)}
.f1-tile figcaption{display:flex;gap:14px;align-items:baseline;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px}
.f1-tile figcaption span{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:16px}

/* testimonials */
.f1-quote-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px clamp(24px,4vw,64px);margin-left:25%}
.f1-quote-list blockquote{font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.35}
.f1-quote-list figcaption{margin-top:14px;font-size:13px;color:var(--muted)}

/* faq */
.f1-faq-list{margin-left:25%;border-top:1px solid var(--fg)}
.f1-faq-list details{border-bottom:1px solid var(--line)}
.f1-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:76px;padding:20px 0;font-size:clamp(17px,1.4vw,20px);font-weight:500}
.f1-faq-list summary::after{float:none;flex:none;font-family:var(--serif);font-size:28px;font-weight:400;color:var(--accent)}
.f1-faq-list details p{margin:0 0 26px;max-width:38em;color:var(--muted);line-height:1.85}

/* contact */
.f1-main>.f1-contact{padding-bottom:clamp(96px,10vw,160px)}
.f1-contact h2{margin:clamp(24px,3vw,40px) 0 clamp(40px,5vw,72px);font-size:clamp(56px,9vw,160px);line-height:.92;letter-spacing:-.035em;font-style:italic}
.f1-contact-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);padding-top:28px;border-top:1px solid var(--line)}
.f1-contact-row>div:first-child{grid-column:1/span 5}
.f1-contact-row .f1-intro{max-width:26em}
.f1-contact-info{grid-column:8/span 5}
.f1-contact-list{display:grid;gap:18px}
.f1-contact-list .bc-k{font-size:11px;letter-spacing:.16em;margin-bottom:2px;color:var(--muted);opacity:1}
.f1-contact-list a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-size:24px;text-decoration:none}
.f1-contact-list a:hover{text-decoration:underline}
.f1-social{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:16px;font-size:14px}
.f1-social a{min-height:44px;display:inline-flex;align-items:center}

/* footer */
.f1-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:1520px;margin:0 auto;padding:22px var(--gut) 32px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.f1-foot-brand{font-family:var(--serif);font-size:18px;color:var(--fg)}

@media (max-width:1100px){
  .f1-hero h1{grid-column:1/-1}
  .f1-hero-copy{grid-column:1/span 6}
  .f1-hero-ph{grid-column:8/span 5;grid-row:3}
  .f1-sec-head .f1-tag{grid-column:1/-1;margin-bottom:20px}
  .f1-sec-head h2{grid-column:1/span 8}
  .f1-intro{grid-column:9/span 4}
  .f1-about .f1-tag{grid-column:1/-1;margin-bottom:24px}
  .f1-about-ph{grid-column:1/span 5}
  .f1-about-copy{grid-column:7/span 6}
  .f1-row-n{grid-column:1/span 1}
  .f1-row h3{grid-column:2/span 5}
  .f1-row-d{grid-column:7/span 5}
  .f1-quote-list,.f1-faq-list{margin-left:0}
}
@media (max-width:760px){
  .f1-head{padding-top:8px;padding-bottom:4px;gap:0 16px}
  .f1-nav{gap:0 16px;font-size:13px}
  .f1-hero h1{font-size:clamp(52px,16vw,84px)}
  .f1-hero-copy,.f1-hero-ph{grid-column:1/-1;grid-row:auto}
  .f1-hero-ph{margin-top:48px;width:82%;justify-self:end}
  .f1-index{flex-direction:column;gap:6px}
  .f1-sec-head{display:block}
  .f1-sec-head h2{margin-bottom:16px}
  .f1-main>.f1-about{display:block}
  .f1-about-ph{width:72%;margin-bottom:40px}
  .f1-row{grid-template-columns:40px minmax(0,1fr) 48px;row-gap:10px}
  .f1-row-n{grid-column:1;grid-row:1}
  .f1-row h3{grid-column:2;grid-row:1}
  .f1-row-d{grid-column:2/-1;grid-row:2}
  .f1-ask{grid-column:3;grid-row:1}
  .f1-hang{grid-template-columns:minmax(0,1fr);gap:48px}
  .f1-tile:nth-child(n){grid-column:auto;margin-top:0}
  .f1-tile:nth-child(4n+2),.f1-tile:nth-child(4n+3){width:80%}
  .f1-tile:nth-child(4n+2){margin-left:auto}
  .f1-quote-list{grid-template-columns:minmax(0,1fr)}
  .f1-contact-row{display:block}
  .f1-contact-info{margin-top:40px}
}