/* PFL-05 来信 — freelance consultant, a personal letter in sand and forest green */
.tpl-pfl-05{
  --gut:clamp(20px,5vw,88px);
  --serif:"Gloock","Noto Serif SC","Songti SC",Georgia,serif;
  --sans:"Figtree","Noto Sans SC",system-ui,sans-serif;
  --dock-bg:var(--fg);--dock-fg:var(--bg);
  font-family:var(--sans);font-size:16px;
}
.tpl-pfl-05 main{overflow-x:clip}
.tpl-pfl-05 ::selection{background:var(--accent);color:var(--on-accent)}
.f5-main>section{max-width:1280px;margin:0 auto;padding:clamp(88px,10vw,168px) var(--gut) 0}

/* header */
.f5-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 28px;max-width:1280px;margin:0 auto;padding:16px var(--gut)}
.f5-brand{font-family:var(--serif);font-size:24px;text-decoration:none;min-height:48px;display:flex;align-items:center}
.f5-nav{display:flex;flex-wrap:wrap;gap:0 24px;font-size:15px;color:var(--muted)}
.f5-nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) left 75%/0 1px no-repeat;transition:background-size .3s,color .3s}
.f5-nav a:hover{color:var(--fg);background-size:100% 1px}

/* hero */
.f5-main>.f5-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,7vw,120px);align-items:center;padding-top:clamp(32px,5vw,72px)}
.f5-hero--text{grid-template-columns:minmax(0,1fr)!important;max-width:960px!important}
.f5-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 28px;font-size:14px;font-weight:600;color:var(--accent)}
.f5-eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.f5-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.4vw,96px);line-height:1.16;letter-spacing:-.01em}
.f5-sub{margin-top:28px;max-width:28em;font-size:clamp(16px,1.2vw,18px);line-height:1.95;color:var(--muted)}
.f5-sub p:last-child{margin:0}
.f5-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:36px}
.f5-btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 28px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none;transition:gap .3s,transform .3s}
.f5-btn::after{content:"→"}
.f5-btn:hover{gap:18px}
.f5-link{min-height:44px;display:inline-flex;align-items:center;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
.f5-hero-art{position:relative;padding-bottom:48px}
.f5-portrait{border-radius:200px 200px 20px 20px;overflow:hidden;background:var(--soft);box-shadow:0 30px 60px -36px rgba(30,40,30,.5)}
.f5-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.f5-note{position:absolute;left:clamp(-56px,-4vw,-16px);bottom:0;width:min(250px,64%);padding:22px 20px 18px;background:var(--paper);color:var(--fg);border-radius:4px;box-shadow:0 18px 36px -18px rgba(0,0,0,.35);transform:rotate(-3deg);font-size:14px;line-height:1.7}
.f5-note strong{display:block;margin-bottom:4px;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--accent)}
.f5-note span:last-child{color:var(--muted)}
.f5-pin{position:absolute;top:-8px;left:50%;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:inset -3px -3px 0 rgba(0,0,0,.18)}

/* headings */
.f5-kicker{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--accent)}
.f5-kicker::before{content:"— "}
.tpl-pfl-05 h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.6vw,54px);line-height:1.25}
.f5-sec-head{max-width:680px;margin-bottom:clamp(40px,5vw,72px)}
.f5-intro{margin-top:16px;color:var(--muted);line-height:1.9;font-size:17px}
.f5-intro p:last-child{margin:0}

/* about: path */
.f5-about-head{display:flex;justify-content:space-between;align-items:end;gap:40px}
.f5-about-ph{flex:none;width:clamp(200px,26vw,340px);border-radius:20px;overflow:hidden;transform:rotate(2deg);background:var(--soft)}
.f5-about-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.f5-path{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:32px clamp(20px,3vw,40px);margin-top:clamp(48px,6vw,88px)}
.f5-path::before{content:"";position:absolute;left:0;right:0;top:22px;border-top:2px dotted color-mix(in srgb,var(--accent) 55%,transparent)}
.f5-path li{position:relative}
.f5-stop{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px;box-shadow:0 0 0 8px var(--bg)}
.f5-path p{margin:20px 0 0;font-size:17px;line-height:1.75;max-width:16em}
.f5-body{margin-top:32px;max-width:36em;color:var(--muted);line-height:2;font-size:17px}

/* services */
.f5-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.f5-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;padding:clamp(24px,3vw,40px);border-radius:20px;background:var(--paper);border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.f5-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(0,0,0,.35)}
.f5-card>*{grid-column:2}
.f5-card-n{grid-column:1;grid-row:1/span 4;font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--accent)}
.f5-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.35}
.f5-card-d{margin-top:10px;color:var(--muted);line-height:1.8}
.f5-card-d p:last-child{margin:0}
.f5-price{margin:8px 0 0;font-weight:600}
.f5-ask{justify-self:start;margin-top:14px;min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:15px;color:var(--accent);text-decoration:none}
.f5-ask:hover{text-decoration:underline;text-underline-offset:5px}

/* work: loose row */
.f5-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.f5-tile:nth-child(4n+1){transform:rotate(-1.5deg)}
.f5-tile:nth-child(4n+2){margin-top:48px;transform:rotate(1deg)}
.f5-tile:nth-child(4n+3){margin-top:16px;transform:rotate(-.6deg)}
.f5-tile:nth-child(4n+4){margin-top:64px;transform:rotate(1.4deg)}
.f5-tile-ph{padding:10px 10px 0;background:var(--paper);border-radius:6px;box-shadow:0 16px 32px -24px rgba(0,0,0,.4);overflow:hidden}
.f5-tile-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.f5-tile figcaption{margin-top:14px;font-family:var(--serif);font-size:16px;text-align:center;color:var(--muted)}

/* testimonials */
.f5-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.f5-quote-list figure{padding:32px;border-radius:20px;background:var(--paper)}
.f5-quote-list blockquote{font-family:var(--serif);font-size:20px;line-height:1.7}
.f5-quote-list figcaption{margin-top:14px;font-size:14px;color:var(--muted)}

/* faq */
.f5-main>.f5-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.f5-faq .f5-sec-head{margin:0}
.f5-faq-list details{border-bottom:1px solid var(--line)}
.f5-faq-list details:first-child{border-top:1px solid var(--line)}
.f5-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:18px 0;font-weight:600;font-size:17px}
.f5-faq-list summary::after{float:none;flex:none;font-size:22px;font-weight:400;color:var(--accent)}
.f5-faq-list details p{margin:0 0 22px;color:var(--muted);line-height:1.85}

/* letter */
.f5-main>.f5-contact{padding-bottom:clamp(80px,9vw,140px)}
.f5-letter{position:relative;max-width:820px;margin:0 auto;padding:clamp(40px,6vw,88px);background:var(--paper);border-radius:6px;box-shadow:0 30px 60px -40px rgba(0,0,0,.4);background-image:repeating-linear-gradient(transparent 0 39px,color-mix(in srgb,var(--line) 55%,transparent) 39px 40px);background-position:0 clamp(40px,6vw,88px)}
.f5-letter::before{content:"";position:absolute;top:-14px;right:clamp(28px,6vw,72px);width:64px;height:76px;border:2px dashed color-mix(in srgb,var(--accent) 60%,transparent);border-radius:4px;transform:rotate(4deg);background:var(--bg)}
.f5-letter h2{font-size:clamp(32px,4vw,56px);max-width:12em}
.f5-letter-body{margin-top:24px;max-width:30em;font-size:18px;line-height:2.2}
.f5-letter-body p:last-child{margin:0}
.f5-sign{margin:28px 0 32px;font-family:var(--serif);font-size:26px;color:var(--accent)}
.f5-sign::before{content:"— "}
.f5-contact-info{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.f5-contact-list{display:flex;flex-wrap:wrap;gap:16px 40px}
.f5-contact-list .bc-k{color:var(--muted);opacity:1}
.f5-contact-list a{min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:18px}
.f5-social{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:12px}
.f5-social a{min-height:44px;display:inline-flex;align-items:center;font-weight:600}

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

@media (max-width:900px){
  .f5-main>.f5-hero{grid-template-columns:minmax(0,1fr)}
  .f5-hero-art{max-width:460px;width:100%;margin:0 auto}
  .f5-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f5-main>.f5-faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .f5-head{gap:0 16px;padding-top:8px;padding-bottom:4px}
  .f5-nav{gap:0 16px;font-size:14px}
  .f5-hero h1{font-size:clamp(40px,11vw,52px)}
  .f5-note{left:-4px}
  .f5-about-head{flex-direction:column;align-items:flex-start}
  .f5-about-ph{width:72%;align-self:flex-end}
  .f5-path::before{left:21px;right:auto;top:0;bottom:0;border-top:0;border-left:2px dotted color-mix(in srgb,var(--accent) 55%,transparent)}
  .f5-path li{display:flex;gap:20px;align-items:flex-start}
  .f5-stop{flex:none}
  .f5-path p{margin-top:10px}
  .f5-cards{grid-template-columns:minmax(0,1fr)}
  .f5-card{column-gap:16px}
  .f5-tile:nth-child(n){margin-top:0}
  .f5-tile:nth-child(even){margin-top:32px}
  .f5-letter{padding:36px 24px}
  .f5-letter::before{width:48px;height:58px}
}