/* =========================================================================
   Aliace Uesan — Portfolio  |  shared stylesheet
   全ページ共通のデザインシステム。色は :root 群に集約（data-theme で切替）。
   Astro 移植時はこのファイルをグローバルCSSにそのまま移設できる。
   ========================================================================= */

/* ---------- COLOR THEMES（作品ジャンルに合わせた 明2 / 暗2） ---------- */
:root, [data-theme="gallery-light"] {          /* 明：和装・建築・マクロ向け */
  --bg:#f4f2ec; --ink:#23221e; --ink-soft:#6b6960; --ink-faint:#a8a49a;
  --panel:#dcd8cf; --accent:#8a1f14; --line:#c8c4ba; --ui:#efece4;
}
[data-theme="observatory-dark"] {              /* 暗：星景・光跡向け（金） */
  --bg:#131417; --ink:#e9e6de; --ink-soft:#9a968c; --ink-faint:#63605a;
  --panel:#1e2024; --accent:#c9a24a; --line:#2c2e33; --ui:#1a1b1f;
}
[data-theme="warm-sand"] {                     /* 明：ポートレート・演出向け */
  --bg:#efe7da; --ink:#2a2620; --ink-soft:#756c5d; --ink-faint:#b1a794;
  --panel:#e2d9c7; --accent:#a85a30; --line:#cdc1aa; --ui:#eae0d0;
}
[data-theme="midnight-blue"] {                 /* 暗：都市夜景・ブルーアワー向け（青） */
  --bg:#0f1418; --ink:#e0e5e7; --ink-soft:#8a949a; --ink-faint:#545e64;
  --panel:#172026; --accent:#6fa3b0; --line:#243038; --ui:#131b20;
}

/* ---------- base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink);
  font-family:"Cormorant Garamond","Shippori Mincho",Georgia,serif;
  -webkit-font-smoothing:antialiased; line-height:1.7;
  transition:background .45s ease, color .45s ease;
}
html[lang="ja"] body { font-family:"Shippori Mincho","Cormorant Garamond",Georgia,serif; }
.en { font-family:"Cormorant Garamond",Georgia,serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* i18n visibility（英語デフォルト・トグルで日本語） */
.lx { display:none; }
html[lang="en"] .lx[data-lang="en"], html[lang="ja"] .lx[data-lang="ja"] { display:inline; }
.lx.block { }
html[lang="en"] .lx.block[data-lang="en"], html[lang="ja"] .lx.block[data-lang="ja"] { display:block; }

.wrap { max-width:1180px; margin:0 auto; padding:0 clamp(22px,5vw,56px); }
.wrap-narrow { max-width:820px; margin:0 auto; padding:0 clamp(22px,5vw,56px); }

/* image placeholder */
.ph { background:var(--panel); position:relative; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:background .45s ease; overflow:hidden; }
.ph svg { width:40px; height:40px; opacity:.55; }
.ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph .lab { position:absolute; bottom:12px; left:12px; z-index:2; font-size:11px; letter-spacing:.12em; color:#fff; font-family:"Cormorant Garamond",Georgia,serif; background:rgba(0,0,0,.42); padding:4px 9px; border-radius:3px; backdrop-filter:blur(2px); }

/* ---------- header ---------- */
header.site { position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(22px,5vw,56px);
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .45s ease; }
header.site.scrolled { border-bottom-color:var(--line); }
.logo { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(15px,1.8vw,18px); letter-spacing:.28em; }
.nav-right { display:flex; align-items:center; gap:clamp(14px,2.2vw,26px); }
nav.main ul { list-style:none; display:flex; gap:clamp(14px,2.2vw,26px); }
nav.main a { font-family:"Cormorant Garamond",Georgia,serif; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); transition:color .25s; }
nav.main a:hover, nav.main a.active { color:var(--ink); }
nav.main a.shop { color:var(--ink-faint); }
.lang-btn { background:none; border:1px solid var(--line); color:var(--ink-soft); font-family:"Cormorant Garamond",Georgia,serif; font-size:12px; letter-spacing:.12em; padding:5px 12px; border-radius:999px; cursor:pointer; transition:all .25s; }
.lang-btn:hover { color:var(--ink); border-color:var(--ink); }
.menu-btn { display:none; background:none; border:none; color:var(--ink); font-size:24px; cursor:pointer; line-height:1; }

/* ---------- shared section ---------- */
section.block { padding:clamp(72px,10vw,140px) 0; }
.eyebrow { font-family:"Cormorant Garamond",Georgia,serif; font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint); }
.sec-head { font-size:clamp(23px,2.8vw,32px); font-weight:500; letter-spacing:.008em; margin-top:16px; }
.tinted { background:var(--ui); transition:background .45s ease; }

/* buttons / links */
.btn-ghost { display:inline-block; font-family:"Cormorant Garamond",Georgia,serif; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); padding:12px 26px; transition:all .25s; cursor:pointer; background:none; }
.btn-ghost:hover { color:var(--ink); border-color:var(--ink); }
.btn-solid { display:inline-block; font-family:"Cormorant Garamond",Georgia,serif; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--bg); background:var(--accent); border:1px solid var(--accent); padding:13px 30px; transition:opacity .25s; cursor:pointer; }
.btn-solid:hover { opacity:.85; }
.text-link { font-family:"Cormorant Garamond",Georgia,serif; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:4px; transition:color .25s, border-color .25s; }
.text-link:hover { color:var(--ink); border-color:var(--ink); }

/* breadcrumb */
.crumb { font-family:"Cormorant Garamond",Georgia,serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); padding:clamp(20px,4vw,32px) 0 0; }
.crumb a { color:var(--ink-soft); } .crumb a:hover { color:var(--ink); }

/* ---------- page banner (下層ページ見出し) ---------- */
.page-banner { padding:clamp(48px,8vw,88px) 0 clamp(28px,4vw,44px); }
.page-banner .eyebrow { }
.page-banner h1 { font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:clamp(30px,4.4vw,52px); letter-spacing:.01em; margin-top:14px; }
.page-banner .lead { font-size:clamp(15px,1.6vw,18px); color:var(--ink-soft); margin-top:18px; max-width:60ch; }

/* ---------- HERO (home) — full-bleed ---------- */
.hero { position:relative; min-height:calc(100vh - 76px); display:flex; align-items:flex-end; overflow:hidden; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 42%, rgba(0,0,0,.06) 68%, rgba(0,0,0,0) 100%); }
.hero-cap { position:absolute; z-index:1; top:clamp(90px,12vh,120px); right:clamp(20px,4vw,48px); font-family:"Cormorant Garamond",Georgia,serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#f4f2ec; background:rgba(0,0,0,.38); padding:6px 14px; border-radius:2px; backdrop-filter:blur(2px); transition:background .25s; }
.hero-cap:hover { background:rgba(0,0,0,.58); color:#fff; }
.hero-copy { position:relative; z-index:1; padding:0 clamp(24px,5vw,56px) clamp(48px,7vw,88px); max-width:820px; }
.tagline { font-size:clamp(28px,4vw,48px); line-height:1.4; font-weight:500; color:#f4f2ec; }
html[lang="en"] .tagline { font-family:"Cormorant Garamond",Georgia,serif; letter-spacing:.005em; }
.subline { font-size:clamp(14px,1.5vw,18px); color:#d9d6cc; margin-top:20px; }
.tagline-en { font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:clamp(20px,2.4vw,27px); letter-spacing:.13em; color:#e0b8a8; margin-top:34px; }
.scroll-cue { margin-top:clamp(34px,5vw,54px); font-family:"Cormorant Garamond",Georgia,serif; font-size:12px; letter-spacing:.3em; color:#d9d6cc; text-transform:uppercase; display:flex; align-items:center; gap:12px; }
.scroll-cue::after { content:""; width:44px; height:1px; background:rgba(244,242,236,.4); }

/* ---------- collections grid ---------- */
.col-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,48px); margin-top:clamp(34px,5vw,56px); }
.col-item .ph { aspect-ratio:4/3; transition:background .45s ease, transform .5s ease; }
.col-item:hover .ph { transform:translateY(-6px); }
.col-en { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(19px,2vw,23px); letter-spacing:.04em; margin-top:18px; }
.col-jp { font-size:14px; color:var(--ink-soft); margin-top:4px; }
.col-desc { font-size:13px; color:var(--ink-faint); margin-top:8px; line-height:1.6; }

/* ---------- work grid (コレクション内の作品一覧) ---------- */
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,34px); margin-top:clamp(28px,4vw,48px); }
.work-card .ph { aspect-ratio:1/1; transition:background .45s ease, transform .5s ease; }
.work-card:hover .ph { transform:translateY(-4px); }
.work-card .t { font-family:"Cormorant Garamond",Georgia,serif; font-size:16px; letter-spacing:.03em; margin-top:14px; }
.work-card .m { font-size:12px; color:var(--ink-faint); margin-top:3px; letter-spacing:.04em; }
.work-card .aw { font-size:11px; color:var(--accent); margin-top:5px; letter-spacing:.02em; line-height:1.45; transition:color .45s ease; }
.work-card .aw i { font-size:12px; vertical-align:-1px; margin-right:3px; }

/* ---------- statement / editorial prose ---------- */
.editorial { max-width:720px; margin:0 auto; }
.editorial p { font-size:clamp(16px,1.5vw,18px); line-height:2.0; margin-top:1.5em; }
.editorial p:first-of-type { margin-top:0; }
.editorial .em { color:var(--accent); transition:color .45s ease; }
.statement-center { max-width:760px; margin:0 auto; text-align:center; }
.statement-center .quote { font-size:clamp(19px,2.2vw,26px); line-height:2.0; }
.statement-center .quote .em { color:var(--accent); transition:color .45s ease; }

/* ---------- about / bio ---------- */
.bio-grid { display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:start; }
.bio-portrait { aspect-ratio:4/5; }
.bio-body p { font-size:clamp(15px,1.5vw,17px); line-height:1.95; margin-top:1.3em; color:var(--ink); }
.bio-body p:first-child { margin-top:0; }
.awards-list { border-top:1px solid var(--line); margin-top:14px; }
.awards-row { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; }
.awards-row .yr { color:var(--ink-faint); font-family:"Cormorant Garamond",Georgia,serif; letter-spacing:.06em; white-space:nowrap; }
.marks-row { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(15px,1.8vw,19px); letter-spacing:.22em; color:var(--ink); }

/* ---------- work detail (販売解剖図) ---------- */
.work-detail { display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(28px,4vw,60px); align-items:start; padding-top:clamp(20px,3vw,32px); }
.work-media .ph { aspect-ratio:3/2; }
.work-info { position:sticky; top:90px; }
.work-info .loc { font-family:"Cormorant Garamond",Georgia,serif; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.work-info h1 { font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:clamp(26px,3vw,38px); margin-top:10px; }
.work-info .jp-title { font-size:15px; color:var(--ink-soft); margin-top:6px; }
.work-info .label { font-family:"Cormorant Garamond",Georgia,serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-top:24px; }
.work-info .price { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(20px,2.2vw,26px); margin-top:6px; }
.work-info .price small { font-size:13px; color:var(--ink-soft); letter-spacing:.04em; }
.opt { margin-top:20px; }
.opt .opt-label { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-family:"Cormorant Garamond",Georgia,serif; }
.opt select { width:100%; margin-top:8px; padding:11px 14px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:2px; font-family:inherit; font-size:14px; }
.spec { list-style:none; margin-top:24px; border-top:1px solid var(--line); }
.spec li { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-soft); }
.spec li i { color:var(--accent); font-size:16px; margin-top:2px; }
.swatches { display:flex; gap:8px; margin-top:10px; align-items:center; flex-wrap:wrap; }
.swatches span.sw { width:26px; height:26px; border-radius:50%; border:1px solid var(--line); }
.badges { display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; }
.badge { display:flex; align-items:center; gap:7px; font-size:12px; letter-spacing:.06em; color:var(--ink-soft); font-family:"Cormorant Garamond",Georgia,serif; text-transform:uppercase; }
.badge i { color:var(--accent); font-size:16px; }
.backstory { max-width:720px; margin:clamp(48px,7vw,80px) auto 0; }
.backstory p { font-size:clamp(16px,1.5vw,18px); line-height:2.0; margin-top:1.4em; }
.backstory p:first-of-type { margin-top:0; }

/* ---------- prints / buyer's guide ---------- */
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; margin-top:clamp(40px,6vw,72px); }
.feature-row:first-of-type { margin-top:clamp(28px,4vw,48px); }
.feature-row.rev .fr-media { order:2; }
.feature-row .ph { aspect-ratio:4/3; }
.feature-row h3 { font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:clamp(20px,2.3vw,27px); margin-bottom:14px; }
.feature-row p { font-size:15px; color:var(--ink-soft); line-height:1.9; max-width:48ch; }
.spec-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(34px,5vw,52px); }
.spec-card { border:1px solid var(--line); padding:26px 24px; }
.spec-card i { color:var(--accent); font-size:24px; }
.spec-card h4 { font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:18px; margin:14px 0 8px; }
.spec-card p { font-size:13px; color:var(--ink-soft); line-height:1.7; }

/* ---------- shop teaser ---------- */
.shop-teaser { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(24px,4vw,56px); }
.shop-teaser .ph { aspect-ratio:4/3; }
.shop-teaser .kicker { font-family:"Cormorant Garamond",Georgia,serif; letter-spacing:.14em; text-transform:uppercase; font-size:13px; color:var(--ink-faint); }
.shop-teaser h3 { font-size:clamp(20px,2.3vw,27px); font-weight:500; margin:14px 0 16px; }
html[lang="en"] .shop-teaser h3 { font-family:"Cormorant Garamond",Georgia,serif; }
.shop-teaser p { font-size:15px; color:var(--ink-soft); max-width:46ch; }
.price-line { margin-top:18px; font-family:"Cormorant Garamond",Georgia,serif; font-size:15px; letter-spacing:.06em; color:var(--ink); }
.price-line b { font-weight:500; }

/* ---------- footer ---------- */
footer.site { border-top:1px solid var(--line); padding:clamp(48px,7vw,72px) 0; }
.foot-grid { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; }
.foot-name { font-family:"Cormorant Garamond",Georgia,serif; font-size:18px; letter-spacing:.22em; }
.foot-loc { font-size:13px; color:var(--ink-soft); margin-top:8px; }
.foot-nav { display:flex; gap:22px; flex-wrap:wrap; }
.foot-nav a, .foot-sns a { font-family:"Cormorant Garamond",Georgia,serif; font-size:13px; letter-spacing:.1em; color:var(--ink-soft); transition:color .25s; text-transform:uppercase; }
.foot-nav a:hover, .foot-sns a:hover { color:var(--ink); }
.foot-sns { display:flex; gap:22px; margin-top:14px; }
.foot-sns a { text-transform:none; }
.foot-copy { width:100%; margin-top:40px; font-size:11px; letter-spacing:.1em; color:var(--ink-faint); font-family:"Cormorant Garamond",Georgia,serif; }

/* ---------- palette switcher ---------- */
.palette { position:fixed; bottom:20px; right:20px; z-index:60; display:flex; align-items:center; gap:10px;
  background:color-mix(in srgb, var(--ui) 92%, transparent); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px; padding:9px 15px; transition:background .45s ease, border-color .45s ease; }
.palette .plabel { font-family:"Cormorant Garamond",Georgia,serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.swatch { width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0; position:relative; border:1px solid var(--line); transition:transform .2s; }
.swatch::after { content:""; position:absolute; inset:5px; border-radius:50%; }
.swatch:hover { transform:scale(1.14); }
.swatch[aria-pressed="true"] { outline:1.5px solid var(--ink); outline-offset:2px; }
.sw-light { background:#f4f2ec; } .sw-light::after { background:#8a1f14; }
.sw-dark  { background:#131417; } .sw-dark::after  { background:#c9a24a; }
.sw-sand  { background:#efe7da; } .sw-sand::after  { background:#a85a30; }
.sw-blue  { background:#0f1418; } .sw-blue::after  { background:#6fa3b0; }

/* reveal on scroll */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:860px) {
  nav.main ul { display:none; }
  .menu-btn { display:block; }
  .hero { min-height:78vh; }
  .hero-copy { padding:0 clamp(22px,7vw,40px) 40px; }
  .scroll-cue { display:none; }
  .col-grid { grid-template-columns:1fr; gap:32px; }
  .work-grid { grid-template-columns:1fr 1fr; }
  .bio-grid { grid-template-columns:1fr; }
  .bio-portrait { max-width:340px; }
  .work-detail { grid-template-columns:1fr; }
  .work-info { position:static; }
  .feature-row, .feature-row.rev .fr-media { grid-template-columns:1fr; order:0; }
  .feature-row { grid-template-columns:1fr; }
  .spec-cards { grid-template-columns:1fr; }
  .shop-teaser { grid-template-columns:1fr; }
  .palette { bottom:14px; right:14px; padding:8px 12px; gap:8px; }
  .palette .plabel { display:none; }
}
@media (max-width:480px) {
  header.site { padding:14px 20px; }
  .tagline-en { font-size:19px; }
  .work-grid { grid-template-columns:1fr 1fr; gap:16px; }
}