/* ============================================================
   add color party — style.css
   Design language: editorial / minimal / silk-luxe monochrome
   ============================================================ */

:root{
  --ink:#1c1b19;
  --ink-soft:#4a4844;
  --grey:#8f8c86;
  --line:#e4e1db;
  --paper:#ffffff;
  --paper-2:#f7f6f3;
  --silk:#eceae6;
  --silk-2:#dedbd5;
  --rail-w:96px;
  --serif:"Cormorant Garamond","Noto Serif JP",serif;
  --serif-ja:"Noto Serif JP",serif;
  --sans:"Quicksand","Noto Sans JP",sans-serif;
  --sans-ja:"Noto Sans JP",sans-serif;
  --script:"Pinyon Script",cursive;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans-ja);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:normal}

/* ===== SIDE RAIL ===== */
.rail{
  position:fixed;top:0;left:0;z-index:60;
  width:var(--rail-w);height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:26px 0;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  border-right:1px solid var(--line);
}
.hamburger{
  width:34px;height:26px;position:relative;
  background:none;border:0;cursor:pointer;padding:0;
}
.hamburger span{
  position:absolute;left:4px;right:4px;height:1.4px;background:var(--ink);
  transition:.4s var(--ease);
}
.hamburger span:nth-child(1){top:4px}
.hamburger span:nth-child(2){top:12px}
.hamburger span:nth-child(3){top:20px}
body.nav-open .hamburger span:nth-child(1){top:12px;transform:rotate(45deg)}
body.nav-open .hamburger span:nth-child(2){opacity:0}
body.nav-open .hamburger span:nth-child(3){top:12px;transform:rotate(-45deg)}

.rail-logo{
  margin:auto 0;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  writing-mode:vertical-rl;
}
.rail-logo__mark{
  writing-mode:horizontal-tb;
  font-family:var(--serif);font-size:26px;letter-spacing:.04em;
  width:50px;height:50px;border:1px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
}
.rail-logo__mark em{font-style:italic;color:var(--grey)}
.rail-logo__name{
  writing-mode:vertical-rl;
  font-family:var(--sans);font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-soft);
}
.rail-foot{display:flex;flex-direction:column;align-items:center;gap:12px}
.rail-social{display:flex;flex-direction:column;gap:10px;color:var(--ink-soft)}
.rail-social a{transition:.3s;opacity:.75}
.rail-social a:hover{opacity:1;transform:translateY(-1px)}
.rail-copy{writing-mode:vertical-rl;font-family:var(--sans);font-size:9px;letter-spacing:.24em;color:var(--grey);text-transform:uppercase}

/* ===== DRAWER ===== */
.drawer{
  position:fixed;top:0;left:0;z-index:80;
  width:min(420px,86vw);height:100vh;
  background:var(--paper-2);
  transform:translateX(-102%);
  transition:transform .6s var(--ease);
  display:flex;align-items:center;
  box-shadow:0 0 60px rgba(0,0,0,.06);
}
body.nav-open .drawer{transform:translateX(0)}
.drawer__inner{padding:0 12% ;width:100%}
.drawer__brand{
  font-family:var(--serif);font-size:22px;letter-spacing:.14em;
  color:var(--grey);margin-bottom:38px;text-transform:uppercase;
}
.drawer__list li{border-top:1px solid var(--line)}
.drawer__list li:last-child{border-bottom:1px solid var(--line)}
.drawer__list a{
  display:flex;align-items:baseline;gap:16px;
  padding:17px 4px;transition:.4s var(--ease);
}
.drawer__list a:hover{padding-left:14px;color:var(--grey)}
.drawer__list .en{font-family:var(--sans);font-size:14px;letter-spacing:.24em;min-width:118px}
.drawer__list .ja{font-family:var(--serif-ja);font-size:12px;color:var(--grey);font-weight:300}
.drawer__foot{margin-top:40px;display:flex;gap:22px;flex-wrap:wrap}
.drawer__foot a{font-family:var(--sans);font-size:11px;letter-spacing:.16em;color:var(--ink-soft);border-bottom:1px solid transparent;transition:.3s}
.drawer__foot a:hover{border-color:var(--grey)}

.drawer-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(28,27,25,.28);
  opacity:0;visibility:hidden;transition:.5s;
}
body.nav-open .drawer-scrim{opacity:1;visibility:visible}

/* ===== STAGE ===== */
.stage{margin-left:var(--rail-w)}

/* ===== HERO ===== */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;padding:0;
}
.hero__canvas{
  position:relative;
  min-height:74vh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(40px,7vw,90px) clamp(24px,7vw,90px);
  background:
    linear-gradient(rgba(250,249,247,.40), rgba(238,237,233,.52)),
    url("img/hero-silver.jpg") center/cover no-repeat,
    var(--silk);
  overflow:hidden;
}
.hero__frame{
  position:relative;z-index:2;
  width:100%;max-width:940px;
  text-align:center;
  padding:clamp(46px,7vw,92px) clamp(28px,6vw,80px);
  border:1px solid var(--ink);
  outline:1px solid rgba(28,27,25,.16);
  outline-offset:9px;
}
.hero__eyebrow{
  display:block;
  font-family:var(--sans);font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:clamp(22px,3vw,34px);
}
.hero__script{
  font-family:var(--script);
  font-size:clamp(38px,6.4vw,88px);
  line-height:1.08;color:var(--ink);
  letter-spacing:.01em;
}
.hero__script span{color:var(--ink-soft)}
.hero__sign{
  font-family:var(--script);
  font-size:clamp(18px,2vw,26px);
  color:var(--grey);margin-top:clamp(20px,3vw,30px);
}
.hero__caption{
  font-family:var(--serif-ja);font-weight:300;
  text-align:center;
  font-size:clamp(13px,1.5vw,16px);
  letter-spacing:.14em;color:var(--ink-soft);
  padding:34px 8% 30px;
}
.hero__caption em{font-family:var(--serif);font-style:italic;letter-spacing:.06em}
.hero__scroll{
  position:absolute;right:26px;bottom:26px;
  writing-mode:vertical-rl;
  font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);
  display:flex;align-items:center;gap:12px;
}
.hero__scroll span{width:1px;height:52px;background:linear-gradient(var(--grey),transparent);animation:scrolldrop 2.2s var(--ease) infinite}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== BLOCK SHARED ===== */
.block{
  padding:clamp(84px,11vw,150px) clamp(28px,8vw,132px);
  position:relative;
}
.block__label{
  font-family:var(--sans);font-size:12px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--grey);
  display:flex;align-items:center;gap:12px;margin-bottom:40px;
}
.block__label span{
  font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink);letter-spacing:0;
}
.block__title{
  font-family:var(--serif-ja);font-weight:400;
  font-size:clamp(24px,3.4vw,40px);letter-spacing:.06em;line-height:1.4;
  margin-bottom:18px;
}
.block__sub{
  font-family:var(--serif-ja);font-weight:300;color:var(--ink-soft);
  font-size:15px;letter-spacing:.06em;margin-bottom:52px;max-width:44em;
}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== CONCEPT ===== */
.concept{background:var(--paper)}
.concept__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.lead{
  font-family:var(--serif-ja);font-weight:300;
  font-size:clamp(22px,2.9vw,34px);line-height:1.7;letter-spacing:.05em;
}
.lead em{font-family:var(--serif);font-style:italic;color:var(--grey)}
.concept__text p{font-family:var(--serif-ja);font-weight:300;color:var(--ink-soft);font-size:15px;margin-bottom:22px;letter-spacing:.05em}

/* ===== SERVICE ===== */
.service{background:var(--paper-2)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.card{background:var(--paper);border:1px solid var(--line);padding:0 0 30px}
.card__ph{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#efeeeb,#dedbd5);
  position:relative;overflow:hidden;
}
/* real images inside placeholders */
.card__ph img,.work__ph img,.about__portrait img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease),filter .6s var(--ease);
}
.card:hover .card__ph img,.work:hover .work__ph img{transform:scale(1.05)}
.card__ph:has(img)::after,.work__ph:has(img)::after,.about__portrait:has(img)::after{display:none}
.card__ph::after{
  content:attr(data-ph);
  position:absolute;left:16px;bottom:12px;
  font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(28,27,25,.28);
}
.card h3{font-family:var(--serif-ja);font-weight:400;font-size:18px;letter-spacing:.05em;margin:26px 26px 12px}
.card p{font-family:var(--serif-ja);font-weight:300;font-size:13.5px;color:var(--ink-soft);margin:0 26px;letter-spacing:.04em;line-height:1.85}
.service__note{margin-top:44px;font-family:var(--sans-ja);font-size:12px;color:var(--grey);letter-spacing:.06em}

/* ===== STRENGTH ===== */
.strength{background:var(--ink);color:#f2f1ee}
.strength .block__label{color:#a9a6a0}
.strength .block__label span{color:#f2f1ee}
.strength .block__title{color:#f7f6f3}
.reasons{list-style:none;margin-top:20px;display:grid;gap:0}
.reasons li{
  display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,4vw,60px);
  padding:clamp(30px,4vw,50px) 0;border-top:1px solid rgba(255,255,255,.14);align-items:baseline;
}
.reasons li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.reasons__no{font-family:var(--serif);font-style:italic;font-size:38px;color:#87847e}
.reasons h3{font-family:var(--serif-ja);font-weight:400;font-size:clamp(18px,2vw,23px);letter-spacing:.05em;margin-bottom:14px;color:#faf9f7}
.reasons p{font-family:var(--serif-ja);font-weight:300;font-size:14.5px;color:#c7c4be;letter-spacing:.04em;max-width:40em}

/* ===== WORKS ===== */
.works{background:var(--paper)}
.works__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.work{position:relative}
.work__ph{
  aspect-ratio:3/4;
  background:linear-gradient(150deg,#e9e7e3,#d3d0ca);
  position:relative;transition:.6s var(--ease);
}
.work:hover .work__ph{filter:brightness(1.04)}
.work__ph::after{
  content:attr(data-ph);position:absolute;right:12px;top:10px;
  font-family:var(--sans);font-size:9px;letter-spacing:.2em;color:rgba(28,27,25,.24);text-transform:uppercase;
}
.work figcaption{font-family:var(--serif-ja);font-weight:300;font-size:13.5px;color:var(--ink-soft);padding-top:16px;letter-spacing:.05em}
.work figcaption span{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;color:var(--grey);margin-bottom:5px}
.works__note{margin-top:44px;font-family:var(--serif-ja);font-weight:300;font-size:14px;color:var(--grey);text-align:center;letter-spacing:.06em}

/* clickable affordance */
.work,.card{cursor:pointer}
.work__ph,.card__ph{position:relative}
.work__ph::before,.card__ph::before{
  content:"VIEW";position:absolute;z-index:2;inset:auto 0 0 auto;
  margin:12px;padding:6px 12px;
  font-family:var(--sans);font-size:9px;letter-spacing:.24em;color:#fff;
  background:rgba(28,27,25,.55);opacity:0;transition:.4s var(--ease);
  pointer-events:none;
}
.work:hover .work__ph::before,.card:hover .card__ph::before{opacity:1}
.work[data-count]:not([data-count="1"]) .work__ph::after,
.card[data-count]:not([data-count="1"]) .card__ph::after{
  content:attr(data-count)" PHOTOS";
  position:absolute;left:12px;bottom:12px;z-index:2;
  font-family:var(--sans);font-size:9px;letter-spacing:.2em;color:#fff;
  background:rgba(28,27,25,.5);padding:5px 10px;
}

/* ===== LIGHTBOX ===== */
.lb{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,19,18,.9);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:.4s var(--ease);
}
.lb.open{opacity:1;visibility:visible}
.lb__stage{position:relative;max-width:min(92vw,1100px);max-height:88vh;text-align:center}
.lb__img{
  max-width:100%;max-height:78vh;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.4);background:#111;
}
.lb__cap{margin-top:16px;font-family:var(--serif-ja);font-weight:300;color:#e9e7e3;font-size:14px;letter-spacing:.08em}
.lb__cap span{font-family:var(--sans);font-size:10px;letter-spacing:.24em;color:#a9a6a0;margin-right:12px}
.lb__count{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:#8f8c86;margin-top:6px}
.lb__close{
  position:absolute;top:-46px;right:0;
  width:40px;height:40px;border:0;background:none;cursor:pointer;
}
.lb__close::before,.lb__close::after{
  content:"";position:absolute;left:9px;top:19px;width:22px;height:1.4px;background:#e9e7e3;
}
.lb__close::before{transform:rotate(45deg)}
.lb__close::after{transform:rotate(-45deg)}
.lb__nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:130;
  width:58px;height:58px;border:1px solid rgba(255,255,255,.55);border-radius:50%;
  background:rgba(20,19,18,.55);cursor:pointer;transition:.3s;
}
.lb__nav:hover{background:rgba(255,255,255,.18);border-color:#fff}
.lb__nav::before{content:"";position:absolute;top:21px;width:13px;height:13px;border-top:1.6px solid #fff;border-left:1.6px solid #fff}
.lb__prev{left:24px}.lb__prev::before{left:24px;transform:rotate(-45deg)}
.lb__next{right:24px}.lb__next::before{right:24px;transform:rotate(135deg)}
.lb__nav.hidden{display:none}
.lb__img{cursor:pointer}
@media(max-width:640px){
  .lb__nav{width:46px;height:46px;background:rgba(20,19,18,.6)}
  .lb__prev{left:10px}.lb__next{right:10px}
  .lb__nav::before{top:16px;width:11px;height:11px}
  .lb__prev::before{left:19px}.lb__next::before{right:19px}
  .lb__close{top:-40px}
}

/* ===== FLOW ===== */
.flow{background:var(--paper-2)}
.flow__steps{list-style:none;counter-reset:step}
.flow__steps li{
  display:grid;grid-template-columns:160px 1fr;gap:clamp(20px,4vw,54px);
  padding:34px 0;border-top:1px solid var(--line);position:relative;
}
.flow__steps li:last-child{border-bottom:1px solid var(--line)}
.flow__term{font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:var(--ink);padding-top:2px}
.flow__steps h3{font-family:var(--serif-ja);font-weight:400;font-size:19px;letter-spacing:.05em;margin-bottom:10px}
.flow__steps p{font-family:var(--serif-ja);font-weight:300;font-size:14px;color:var(--ink-soft);letter-spacing:.04em}
.flow__note{margin-top:34px;font-family:var(--sans-ja);font-size:12px;color:var(--grey);letter-spacing:.05em}

/* ===== ABOUT ===== */
.about{background:var(--paper)}
.about__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(34px,6vw,90px);align-items:center;margin-bottom:clamp(50px,7vw,90px)}
.about__portrait{
  aspect-ratio:3/4;
  background:linear-gradient(160deg,#ecebe7,#d1cec8);
  position:relative;
}
.about__portrait::after{content:"PORTRAIT";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--sans);font-size:10px;letter-spacing:.3em;color:rgba(28,27,25,.24)}
.about__role{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.about__name{font-family:var(--serif-ja);font-weight:400;font-size:clamp(26px,3vw,36px);letter-spacing:.08em;margin-bottom:26px}
.about__name span{display:block;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--grey);letter-spacing:.1em;margin-top:8px}
.about__body p{font-family:var(--serif-ja);font-weight:300;font-size:15px;color:var(--ink-soft);margin-bottom:18px;letter-spacing:.05em}
.company{border-top:1px solid var(--line)}
.company div{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.company dt{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.company dd{font-family:var(--serif-ja);font-weight:300;font-size:14.5px;color:var(--ink-soft);letter-spacing:.05em}

/* ===== CONTACT ===== */
.contact{background:var(--paper-2)}
.cform{max-width:760px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.cform label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:26px}
.cform label span{color:#b0736f;font-size:10px;letter-spacing:.1em;margin-left:8px}
.cform input,.cform textarea{
  width:100%;margin-top:11px;
  font-family:var(--sans-ja);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);
  padding:14px 16px;letter-spacing:.02em;
  transition:.3s;
}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--ink)}
.cform textarea{resize:vertical}
.cform__check{display:flex;align-items:center;gap:10px;font-family:var(--sans-ja)!important;font-size:12.5px!important}
.cform__check input{width:auto;margin:0}
.cform__check a{border-bottom:1px solid var(--grey)}
.cform__submit{
  margin-top:8px;
  font-family:var(--sans);font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:#fff;background:var(--ink);border:1px solid var(--ink);
  padding:17px 60px;cursor:pointer;transition:.4s var(--ease);
}
.cform__submit:hover{background:transparent;color:var(--ink)}
.cform__alt{margin-top:30px;font-family:var(--serif-ja);font-weight:300;font-size:13px;color:var(--ink-soft);letter-spacing:.04em}
.cform__alt a{border-bottom:1px solid var(--grey)}

/* ===== FOOTER ===== */
.foot{background:var(--ink);color:#e9e7e3;text-align:center;padding:clamp(70px,9vw,120px) 28px 50px}
.foot__mark{
  font-family:var(--serif);font-size:26px;width:60px;height:60px;margin:0 auto 22px;
  border:1px solid rgba(255,255,255,.4);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.foot__mark em{font-style:italic;color:#9a978f}
.foot__name{font-family:var(--sans);font-size:13px;letter-spacing:.4em;text-transform:uppercase;margin-bottom:36px;color:#f4f2ef}
.foot__nav{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:26px;margin-bottom:30px}
.foot__nav a{font-family:var(--sans);font-size:11px;letter-spacing:.22em;color:#b9b6b0;transition:.3s}
.foot__nav a:hover{color:#fff}
.foot__social{display:flex;justify-content:center;gap:24px;margin-bottom:38px}
.foot__social a{font-family:var(--serif);font-style:italic;font-size:15px;color:#cfccc6;border-bottom:1px solid transparent;transition:.3s}
.foot__social a:hover{border-color:#8f8c86}
.foot__copy{font-family:var(--sans);font-size:10px;letter-spacing:.24em;color:#7d7a74;text-transform:uppercase}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- Tablet (≤1024px) ---- */
@media(max-width:1024px){
  .concept__body{grid-template-columns:1fr;gap:24px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .about__grid{grid-template-columns:1fr;gap:40px}
  .about__portrait{max-width:380px;margin:0 auto}
  .flow__steps li{grid-template-columns:130px 1fr}
  .reasons li{grid-template-columns:90px 1fr}
  .works__grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- Small tablet / large phone (≤768px) ---- */
@media(max-width:768px){
  :root{--rail-w:56px}
  .rail{padding:16px 0}
  .rail-logo__name{font-size:10px;letter-spacing:.26em}
  .rail-social svg{width:14px;height:14px}

  /* block padding tightened for more content width */
  .block{padding:clamp(64px,10vw,110px) clamp(20px,5vw,40px)}

  /* hero: fit content instead of centring in 100vh (removes empty band) */
  .hero{min-height:auto}
  .hero__canvas{min-height:auto;padding:clamp(56px,12vw,80px) clamp(18px,5vw,40px)}
  .hero__frame{padding:clamp(40px,9vw,64px) clamp(22px,6vw,44px)}
  .hero__caption{padding:26px 6vw 24px}
  .hero__scroll{display:none}

  .cards{gap:20px}
  .works__grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cform__row{grid-template-columns:1fr;gap:0}
  .reasons li{grid-template-columns:1fr;gap:8px;padding:28px 0}
  .reasons__no{font-size:30px}
  .flow__steps li{grid-template-columns:1fr;gap:6px}
  .flow__term{font-size:12px;color:var(--grey)}
  .company div{grid-template-columns:1fr;gap:2px;padding:16px 0}
  .foot__nav{gap:14px 18px}
}

/* ---- Phone (≤480px) ---- */
@media(max-width:480px){
  :root{--rail-w:46px}
  .rail{padding:14px 0}
  .rail-logo__name{font-size:9px;letter-spacing:.2em}
  .rail-social{gap:8px}
  .block{padding:clamp(56px,14vw,80px) 18px}
  .block__label{margin-bottom:28px}
  .block__sub{margin-bottom:38px}
  .cards{grid-template-columns:1fr}
  .works__grid{grid-template-columns:1fr;gap:18px}
  .work__ph{aspect-ratio:4/3}
  .about__portrait{max-width:100%}
  .cform__submit{width:100%;padding:16px}
  .foot{padding-left:18px;padding-right:18px}
  .foot__name{letter-spacing:.28em}
}