/* =========================================================
   StudioArte — 下層ページ共通（Works / Detail / Studio / Contact）
   Homeのトークン（style.css）を前提に、ページごとの空気差を作る。
   HOME=未知への入口 / WORKS=Editorial Gallery / STUDIO=Quiet Intellectual /
   CONTACT=Very Quiet
   ========================================================= */

/* ---------- ページ遷移（リッチなサイト標準: フェード＋本文がわずかに浮き上がる） ---------- */
body{ animation:pageFade .7s ease both; }
main{ animation:pageRise .85s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pageFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pageRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
html.pg-leave body{ opacity:0; transition:opacity .3s ease; }
@media (prefers-reduced-motion:reduce){
  body, main{ animation:none; }
  html.pg-leave body{ transition:none; }
}

/* ---------- 下層ページの骨格 ---------- */
.page{ padding-top:clamp(120px,14vh,170px); }
.page__head{ margin-bottom:clamp(40px,5vw,72px); }
.page__title{
  font-family:var(--latin);
  font-size:clamp(30px,3.4vw,52px);
  font-weight:400; letter-spacing:.14em;
  color:var(--structure);
  margin-top:clamp(28px,3.4vw,44px);
}
.page__intro{
  margin-top:clamp(16px,2vw,26px);
  font-size:13.5px; line-height:2.1;
  color:var(--text-soft);
  max-width:38em;
}

/* ---------- WORKS（Editorial Gallery） ---------- */
body[data-page="works"]{ background:#F6F8F8; }

.gallery{ display:grid; gap:clamp(64px,8vw,120px); padding-bottom:clamp(90px,10vw,150px); }
.gWork{ display:grid; gap:clamp(20px,2.6vw,36px); }
.gWork__link{ display:block; position:relative; overflow:hidden; }
.gWork__figure{ margin:0; background:var(--mist); aspect-ratio:16/9; }
.gWork__figure img{
  width:100%; height:100%; object-fit:cover;
  transition:filter .65s ease;
}
.gWork__link:hover .gWork__figure img{ filter:brightness(1.05); }
.gWork__meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 28px;
}
.gWork__title{
  font-family:var(--latin);
  font-size:clamp(20px,2.2vw,30px); font-weight:500; letter-spacing:.12em;
  color:var(--structure);
}
.gWork__cat{
  font-family:var(--latin);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-soft);
}
.gWork__desc{ font-size:13px; line-height:2; color:var(--text-soft); max-width:36em; }
.gWork__links{
  display:flex; gap:28px;
  font-family:var(--latin); font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase;
}
.gWork__links a{
  color:var(--structure); padding-bottom:5px;
  border-bottom:1px solid var(--hairline);
  transition:border-color .4s ease;
}
.gWork__links a:hover{ border-color:var(--cyan); }

/* ---------- WORKS バナー型（2026-08-27 本人指示: 細長い横長・1画面に収まる） ---------- */
.banners{ display:grid; gap:clamp(18px,2.2vw,28px); padding-bottom:clamp(80px,9vw,130px); }
.bWork__link{ position:relative; display:block; overflow:hidden; }
.bWork__figure{ margin:0; background:var(--mist); height:clamp(150px,24vh,230px); }
.bWork__figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .65s ease;
}
.bWork__link:hover .bWork__figure img{ transform:scale(1.02); filter:brightness(1.05); }
.bWork__body{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(22px,3.2vw,44px);
  color:#fff;
  background:linear-gradient(to right, rgba(16,25,30,.55) 0%, rgba(16,25,30,.22) 46%, rgba(16,25,30,0) 72%);
  pointer-events:none;
}
.bWork__title{
  font-family:var(--latin);
  font-size:clamp(17px,1.9vw,26px); font-weight:500; letter-spacing:.12em;
}
.bWork__cat{
  margin-top:7px;
  font-family:var(--latin); font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.bWork__more{
  margin-top:14px;
  font-family:var(--latin); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
}
.bWork__more span{
  display:inline-block; padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .4s ease;
}
.bWork__link:hover .bWork__more span{ border-color:var(--cyan); }
@media (max-width:640px){
  .bWork__figure{ height:clamp(130px,20vh,180px); }
}

/* ---------- Project Detail ---------- */
.pHero{ margin:0; position:relative; overflow:hidden; background:var(--mist); }
.pHero img{ width:100%; height:clamp(300px,52vh,560px); object-fit:cover; display:block; }
.pHead{ padding-block:clamp(36px,4.6vw,64px) 0; }
.pTitle{
  font-family:var(--latin);
  font-size:clamp(26px,3vw,44px); font-weight:500; letter-spacing:.12em;
  color:var(--structure);
}
.pCat{
  margin-top:10px;
  font-family:var(--latin); font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-soft);
}
.pSection{ padding-block:clamp(40px,5vw,72px) 0; }
.pSection:last-of-type{ padding-bottom:clamp(90px,10vw,140px); }
.pText{ margin-top:18px; font-size:14px; line-height:2.2; color:var(--text-soft); max-width:42em; }
.pCols{ margin-top:26px; display:grid; gap:clamp(24px,3vw,44px); }
@media (min-width:820px){ .pCols{ grid-template-columns:repeat(3,1fr); } }
.pCol h3{
  margin:0; font-family:var(--latin);
  font-size:10.5px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--pale);
}
.pCol p{ margin-top:12px; font-size:13px; line-height:2.05; color:var(--text-soft); }
.pBack{
  display:inline-block; margin-top:clamp(40px,5vw,64px);
  font-family:var(--latin); font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--structure);
  padding-bottom:6px; border-bottom:1px solid var(--hairline);
  transition:border-color .4s ease;
}
.pBack:hover{ border-color:var(--cyan); }
.provisional{ color:var(--pale); font-style:italic; }

/* ---------- STUDIO（Quiet / Intellectual） ---------- */
body[data-page="studio"]{ background:#F4F7F7; }
.sSection{ padding-block:clamp(48px,6vw,84px) 0; }
.sSection:last-of-type{ padding-bottom:clamp(90px,10vw,140px); }
.sLead{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(28px,3.2vw,48px);
  line-height:1.6; letter-spacing:.04em;
  color:var(--structure);
  margin-top:clamp(24px,3vw,40px);
}
.sText{ margin-top:20px; font-size:14px; line-height:2.25; color:var(--text-soft); max-width:40em; }
.sGrid{ margin-top:clamp(28px,3.6vw,48px); display:grid; gap:clamp(36px,5vw,72px); align-items:center; }
@media (min-width:900px){ .sGrid{ grid-template-columns:minmax(0,46fr) minmax(0,54fr); } }
.sVisual{ margin:0; overflow:hidden; background:var(--mist); aspect-ratio:16/10; position:relative; }
.sVisual img{ width:100%; height:100%; object-fit:cover; }

.sList{ margin-top:26px; display:grid; gap:0; }
.sRow{
  display:grid; grid-template-columns:minmax(150px,220px) 1fr;
  gap:20px; padding:18px 2px;
  border-bottom:1px solid rgba(37,61,75,.10);
  align-items:baseline;
}
.sRow:first-child{ border-top:1px solid rgba(37,61,75,.10); }
.sRow b{
  font-family:var(--latin); font-weight:500;
  font-size:11.5px; letter-spacing:.16em;
  color:var(--structure);
}
.sRow span{ font-size:12.5px; line-height:1.95; color:var(--text-soft); }
@media (max-width:640px){ .sRow{ grid-template-columns:1fr; gap:6px; } }

/* ---------- CONTACT（Very Quiet） ---------- */
body[data-page="contact"]{ background:#F4F7F7; }
.cMain{
  min-height:62vh;
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
  padding-bottom:clamp(80px,9vw,130px);
  position:relative;
}
.cLead{
  font-family:var(--serif); font-weight:200;
  font-size:clamp(22px,2.7vw,40px);
  line-height:1.85; letter-spacing:.12em;
  color:var(--structure);
  margin-top:clamp(28px,3.6vw,48px);
}
.cSub{
  margin-top:clamp(14px,1.8vw,22px);
  font-family:var(--latin); font-size:11px;
  letter-spacing:.22em; color:var(--text-soft);
}
.cWays{
  margin-top:clamp(40px,5vw,64px);
  display:flex; justify-content:center; gap:clamp(28px,4vw,56px);
  flex-wrap:wrap;
  font-family:var(--latin); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
}
.cWays span, .cWays a{ color:var(--text-soft); padding-bottom:5px; }
.cWays a{ color:var(--structure); border-bottom:1px solid var(--hairline); }
.cNote{ margin-top:clamp(28px,3.4vw,40px); font-size:11.5px; color:var(--pale); letter-spacing:.06em; }

/* ---------- 粒子（訪問・Discovery → Archiveへ飛ぶ光） ---------- */
.fp{
  position:fixed; z-index:90; pointer-events:none;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(190,235,252,.95) 0%, rgba(57,189,235,.55) 45%, rgba(57,189,235,0) 75%);
}
/* Discovery用: 星形パーティクル（大小・明暗に強弱、JSが物理で動かす） */
.fp--star{
  position:fixed; left:0; top:0; z-index:90;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C13.2 8.4 15.6 10.8 24 12 C15.6 13.2 13.2 15.6 12 24 C10.8 15.6 8.4 13.2 0 12 C8.4 10.8 10.8 8.4 12 0 Z' fill='%23FFF0BE'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(255,240,190,.95)) drop-shadow(0 0 11px rgba(255,228,158,.55));
  will-change:transform,opacity;
  opacity:0;
}
.arch-chip.pulse{ color:var(--structure); }
.arch-chip.pulse b{ text-shadow:0 0 14px rgba(57,189,235,.9); color:var(--cyan); }

/* ---------- 下層ページのContactポイント等の座標ホスト ---------- */
.dp-host{ position:relative; }

/* 下層ページ: ヘッダーは常時solid（heroが無いため） */
body:not([data-page="home"]) .head{
  background:rgba(247,250,250,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--hairline);
}