:root{
  --peach:#FFDEC9;
  --brown:#B08076;
  --green:#0FAA40;
  --ink:#333;
  --white:#fff;
  --f-en:"Taviraj", serif;
  --f-jp:"toppan-bunkyu-gothic","Toppan Bunkyu Gothic","Zen Kaku Gothic New", sans-serif;
  --f-mincho:"toppan-bunkyu-mincho","Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-jp);color:var(--ink);background:var(--white);
  line-height:1.9;font-weight:400;font-size:14px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
p,h1,h2,h3{line-break:strict;word-break:normal;overflow-wrap:anywhere;}
a{color:inherit;text-decoration:none;}

/* header */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px;
  background:rgba(255,222,201,.55);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
}
.logo{display:flex;align-items:center;}
.logo img{height:44px;width:auto;display:block;}
.burger{
  background:none;border:none;cursor:pointer;padding:6px;
  display:flex;flex-direction:column;gap:3.5px;z-index:102;position:relative;
}
.burger i{display:block;width:19px;height:2.5px;background:#434343;border-radius:1px;transition:.3s;}

/* drawer (same as home) */
.drawer{
  position:fixed;top:0;right:-78%;width:78%;max-width:320px;height:100dvh;
  background:var(--white);z-index:101;
  padding:60px 0 40px 28px;
  transition:right .42s cubic-bezier(.4,0,.2,1);
  box-shadow:-6px 0 24px rgba(0,0,0,.06);
}
.drawer.open{right:0;}
.drawer .close{
  position:absolute;top:16px;right:18px;
  background:#eee;border:none;width:30px;height:30px;border-radius:4px;
  font-size:17px;cursor:pointer;line-height:1;
}
.drawer ul{list-style:none;display:flex;flex-direction:column;gap:20px;}
.drawer a{
  font-family:var(--f-en);font-weight:600;font-size:17px;letter-spacing:.06em;
  display:flex;align-items:center;gap:12px;
}
.drawer a::before{content:"";width:5px;height:20px;background:#FFE44D;flex:none;}
.mask{
  position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:99;
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.mask.on{opacity:1;pointer-events:auto;}

/* page top */
.page-head{
  padding:120px 22px 50px;
  background:#fff;
  text-align:left;position:relative;
}
.page-head h1{
  font-family:var(--f-en);font-weight:600;color:var(--brown);
  font-size:32px;letter-spacing:0;line-height:1.2;margin-bottom:14px;
}
.page-head .sub{
  color:var(--brown);font-family:var(--f-mincho);
  font-size:13px;font-weight:400;line-height:2;
}

/* gallery grid */
.gallery{padding:30px 22px 90px;}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px 22px;
}
.tile{display:block;position:relative;}
.tile .ph{
  position:relative;
  aspect-ratio:1/1.2;background:#F4F1EC;overflow:hidden;
}
.tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.tile .ph .noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#b7ada2;font-family:var(--f-mincho);letter-spacing:.1em;}
.tile:hover .ph img{transform:scale(1.04);}
.tile .overlay{
  position:absolute;inset:0;
  background:rgba(176,128,118,.9);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  color:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:18px;gap:8px;
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;
}
.tile:hover .overlay,.tile:focus-within .overlay,.tile.open .overlay{opacity:1;}
.tile.open .ph img{transform:scale(1.04);}
.tile .overlay h3{font-family:var(--f-mincho);font-size:14px;font-weight:500;line-height:1.6;color:#fff;letter-spacing:.02em;}
.tile .overlay p{font-family:var(--f-mincho);font-size:11px;line-height:1.7;color:#fff;opacity:.92;margin:0;}
.tile .overlay .client{font-size:11px;opacity:.85;margin-top:2px;}
.tile .overlay .cat{font-size:10.5px;opacity:.75;margin-top:8px;letter-spacing:.05em;}

/* back-to-home CTA */
.back-cta{text-align:center;padding:0 22px 80px;}
.back-cta a{
  display:inline-block;background:var(--green);color:#fff;
  padding:11px 30px;border-radius:10px;font-size:12px;font-weight:400;
  transition:opacity .25s;
}
.back-cta a:hover{opacity:.85;}

/* footer */
footer{padding:36px 22px;text-align:center;font-size:10.5px;color:#888;}
footer .sns{display:flex;justify-content:center;gap:16px;margin-bottom:16px;}
footer .sns a{color:var(--brown);display:block;transition:opacity .25s;}
footer .sns a:hover{opacity:.6;}
footer .sns svg{width:auto;height:21px;display:block;}
footer .fl{display:flex;justify-content:center;align-items:center;margin-bottom:12px;}
footer .fl .logo-footer{height:40px;width:auto;display:block;}

@media(min-width:760px){
  .page-head{padding:150px 8vw 60px;}
  .page-head h1{font-size:36px;}
  .page-head .sub{font-size:14px;}
  .gallery{padding:40px 8vw 110px;}
  .grid{grid-template-columns:1fr 1fr 1fr;gap:40px 30px;}
  .tile .overlay h3{font-size:15.5px;}
  .tile .overlay p{font-size:12px;}
}