/* PHO-01 留白画廊 — quiet fine-art gallery */
.tpl-pho-01{--gut:clamp(20px,5vw,88px);--max:1440px;--pad-x:max(var(--gut),calc((100% - var(--max))/2));--p1-serif:"Cormorant Garamond","Noto Serif SC",Georgia,serif;--p1-sans:"DM Sans","Noto Sans SC",system-ui,sans-serif;font-family:var(--p1-sans);font-size:15.5px;line-height:1.75;font-synthesis-style:none;--dock-bg:var(--fg);--dock-fg:var(--bg)}
.tpl-pho-01 h1,.tpl-pho-01 h2,.tpl-pho-01 h3{font-family:var(--p1-serif);font-weight:300;letter-spacing:-.005em}

/* header: thin and quiet */
.p1-head{display:flex;justify-content:space-between;align-items:center;gap:8px 32px;flex-wrap:wrap;padding:22px var(--pad-x)}
.p1-brand{font-family:var(--p1-serif);font-size:23px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;min-height:44px;display:flex;align-items:center}
.p1-nav{display:flex;flex-wrap:wrap;gap:0 28px}
.p1-nav a{min-height:44px;display:inline-flex;align-items:center;font-size:13px;letter-spacing:.08em;color:var(--muted);text-decoration:none;transition:color .2s}
.p1-nav a:hover{color:var(--fg)}

main>section{padding:clamp(80px,11vw,176px) var(--pad-x) 0}
.p1-label{margin:0 0 20px;font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.tpl-pho-01 h2{font-size:clamp(34px,3.8vw,58px);line-height:1.1}
.p1-intro{color:var(--muted);max-width:28em}
.p1-intro p:last-child{margin:0}

/* hero: slim column of type beside an uncropped photograph */
.p1-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:end;padding-top:clamp(24px,4vw,56px)!important}
.p1-hero-copy{grid-column:1/span 5;padding-bottom:clamp(8px,2vw,32px);max-width:520px}
.p1-hero h1{font-size:clamp(46px,5.6vw,94px);line-height:1;letter-spacing:-.02em;margin-bottom:clamp(22px,2.6vw,36px)}
.p1-dek{font-family:var(--p1-serif);font-style:italic;font-size:clamp(19px,1.6vw,23px);line-height:1.5;color:var(--muted);max-width:22em;margin-bottom:30px}
.p1-dek p:last-child{margin:0}
.p1-hero-img{grid-column:6/-1;justify-self:end;margin:0}
.p1-hero-img img{width:auto;max-width:100%;max-height:calc(100svh - 120px);min-height:min(520px,100%)}
.p1-hero--text{grid-template-columns:minmax(0,880px);justify-content:center;text-align:center;padding-top:clamp(64px,10vw,160px)!important}
.p1-hero--text .p1-hero-copy{grid-column:auto;max-width:none}
.p1-hero--text .p1-dek{margin-inline:auto}
.p1-cta{display:inline-flex;align-items:center;gap:14px;min-height:44px;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.p1-cta::after{content:"";width:56px;height:1px;background:currentColor;transition:width .3s}
.p1-cta:hover::after{width:88px}

/* the hang: asymmetric 12-column grid, natural ratios */
.p1-work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;flex-wrap:wrap;margin-bottom:clamp(48px,7vw,112px)}
.p1-work-head h2{font-style:italic}
.p1-hang{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:clamp(56px,8vw,128px);align-items:start}
.p1-g{margin:0}
.p1-g img{width:100%;height:auto}
.p1-g0{grid-column:1/span 7}
.p1-g1{grid-column:9/span 4;margin-top:clamp(40px,12vw,200px)}
.p1-g2{grid-column:2/span 4;margin-top:clamp(0px,4vw,64px)}
.p1-g3{grid-column:7/span 5}
.p1-hang--one .p1-g{grid-column:1/-1;margin:0}
.p1-g figcaption{display:flex;align-items:baseline;gap:14px;margin-top:14px}
.p1-no{font-size:11px;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums}
.p1-cap{font-family:var(--p1-serif);font-style:italic;font-size:17px;line-height:1.4}

/* about: wide plate + a narrow column of text */
.p1-about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:end}
.p1-about-img{grid-column:1/span 7;margin:0}
.p1-about-img img{width:100%}
.p1-about-copy{grid-column:9/-1}
.p1-about--text .p1-about-copy{grid-column:3/span 8;text-align:center}
.p1-about h2{margin-bottom:28px}
.p1-about-body{font-family:var(--p1-serif);font-size:clamp(19px,1.6vw,22px);line-height:1.6}
.p1-steps{border-top:1px solid var(--line)}
.p1-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.p1-about--text .p1-steps li{text-align:left}
.p1-rn{font-family:var(--p1-serif);font-style:italic;font-size:18px;color:var(--muted)}

/* catalogue: sticky side heading + hairline list (services, faq, quotes) */
.p1-cat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:start}
.p1-cat-head{grid-column:1/span 4;position:sticky;top:32px}
.p1-cat-head h2{margin-bottom:20px}
.p1-cat>:not(.p1-cat-head){grid-column:6/-1}
.p1-list{border-top:1px solid var(--line)}
.p1-list li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px 20px;align-items:baseline;padding:clamp(22px,2.4vw,34px) 0;border-bottom:1px solid var(--line)}
.p1-list h3{font-size:clamp(25px,2.2vw,32px);line-height:1.2;font-weight:400}
.p1-desc{margin-top:8px;color:var(--muted);max-width:34em}
.p1-desc p{margin:0}
.p1-desc p+p{margin-top:.6em}
.p1-price{margin:10px 0 0;font-family:var(--p1-serif);font-size:19px}
.p1-ask{min-height:44px;display:inline-flex;align-items:center;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .2s}
.p1-ask:hover{color:var(--fg)}
.p1-quote-list{display:grid;gap:48px}
.p1-quote-list blockquote{font-family:var(--p1-serif);font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.45}
.p1-quote-list figcaption{margin-top:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.p1-faq-list{border-top:1px solid var(--line)}
.p1-faq-list details{border-bottom:1px solid var(--line)}
.p1-faq-list summary{font-family:var(--p1-serif);font-size:clamp(20px,1.7vw,24px);line-height:1.4;padding:20px 0;min-height:64px}
.p1-faq-list summary::after{font-family:var(--p1-sans);font-weight:300;font-size:22px;line-height:1.3;color:var(--muted)}
.p1-faq-list details p{margin:0 0 24px;color:var(--muted);max-width:36em}

/* contact: a centred italic invitation */
.p1-contact{text-align:center;padding-bottom:clamp(80px,10vw,160px)!important}
.p1-contact-lead{max-width:860px;margin:0 auto}
.p1-contact h2{font-style:italic;font-size:clamp(42px,6vw,96px);line-height:1.02;margin-bottom:26px}
.p1-contact-intro{color:var(--muted);max-width:30em;margin:0 auto 34px}
.p1-contact-intro p:last-child{margin:0}
.p1-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 34px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:opacity .2s}
.p1-btn:hover{opacity:.85}
.p1-contact-list{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 64px;margin:clamp(48px,6vw,88px) auto 0;padding-top:32px;border-top:1px solid var(--line);max-width:1100px}
.p1-contact-list .bc-k{font-size:11px;letter-spacing:.2em;color:var(--muted);opacity:1;margin-bottom:4px}
.p1-contact-list a{display:inline-flex;align-items:center;min-height:44px}
.p1-social{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px;margin-top:20px}
.p1-social a{min-height:44px;display:inline-flex;align-items:center;font-family:var(--p1-serif);font-style:italic;font-size:18px}

.p1-foot{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap;padding:24px var(--pad-x) 32px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.p1-foot-brand{font-family:var(--p1-serif);font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-right:auto}
.p1-foot a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

@media (max-width:900px){
  .p1-hero-copy{grid-column:1/span 6}
  .p1-hero-img{grid-column:7/-1}
  .p1-about-img{grid-column:1/-1;margin-bottom:40px}
  .p1-about-copy{grid-column:2/-2}
  .p1-cat-head{grid-column:1/-1;position:static;margin-bottom:24px}
  .p1-cat>:not(.p1-cat-head){grid-column:1/-1}
}
@media (max-width:760px){
  .p1-head{justify-content:center;text-align:center;padding-top:14px;padding-bottom:6px}
  .p1-nav{justify-content:center;gap:0 18px}
  .p1-hero{grid-template-columns:1fr;row-gap:32px}
  .p1-hero-img{grid-column:1;order:-1;justify-self:stretch}
  .p1-hero-img img{width:100%;max-height:none;min-height:0}
  .p1-hero-copy{grid-column:1}
  .p1-hang{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:48px}
  .p1-g0,.p1-g3{grid-column:1/-1}
  .p1-g1{grid-column:2/-1;margin-top:0}
  .p1-g2{grid-column:1/span 5;margin-top:0}
  .p1-about{grid-template-columns:1fr}
  .p1-about-copy,.p1-about--text .p1-about-copy{grid-column:1}
  .p1-cat{grid-template-columns:1fr}
  .p1-list li{grid-template-columns:36px minmax(0,1fr)}
  .p1-ask{grid-column:2;justify-self:start;margin-top:-6px}
  .p1-contact-list{flex-direction:column;gap:18px}
}