/*
Theme Name: Celesty
Theme URI: https://celestydesign.com/
Author: CELESTY DESIGN
Description: 軽量・依存なしのオリジナルテーマ（セレスティデザイン用）。クリーンでミニマルなポートフォリオサイト向け。
Version: 0.1.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: celesty
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --bg:        #ffffff;
  --bg-soft:   #eef4f8;      /* 瀬戸内の光を思わせる淡いブルーグレー */
  --fg:        #1b2733;      /* 重すぎない濃紺グレー（黒は使わない） */
  --fg-soft:   #59697a;
  --line:      #e1e9f0;
  --accent:    #1f5fa8;      /* コーポレートブルー */
  --accent-2:  #57b0cf;      /* 瀬戸内アクア（爽やかな差し色） */
  --accent-fg: #ffffff;
  --maxw:      1120px;
  --gap:       clamp(1.25rem, 2.5vw, 2rem);
  --pad:       clamp(1.25rem, 5vw, 2.5rem);
  --radius:    10px;
  --font-sans: "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",
               system-ui,-apple-system,"Segoe UI",Meiryo,sans-serif;
  --font-head: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",var(--font-sans);
}

/* 明るい瀬戸内基調で統一（ダークモード自動切替はしない） */

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.85;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.35; letter-spacing:.01em; }
h2{ font-size:clamp(1.4rem,3.2vw,2rem); margin:0 0 1rem; }
h3{ font-size:1.15rem; margin:0 0 .5rem; }
p{ margin:0 0 1.1em; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(3.5rem,9vw,7rem); }
.section--soft{ background:var(--bg-soft); }
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0 0 .9rem;
}
.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--fg-soft); max-width:60ch; }

/* Accessibility */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--fg); color:var(--bg);
  padding:.6rem 1rem; z-index:100;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* Buttons */
.btn{
  display:inline-block; padding:.8rem 1.6rem; border-radius:999px;
  font-weight:700; font-size:.95rem; letter-spacing:.03em;
  border:1px solid var(--fg); transition:.2s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.btn--ghost{ background:transparent; color:var(--fg); }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:66px; }
.brand{ font-family:var(--font-head); font-weight:700; font-size:1.02rem; letter-spacing:.12em; }
.brand a{ display:inline-flex; align-items:center; gap:.6rem; }
.brand a:hover{ text-decoration:none; }
.brand__mark{ height:34px; width:auto; display:block; }
.brand__text{ color:var(--accent); }
@media (max-width:420px){ .brand__text{ display:none; } }
.nav-menu{ list-style:none; display:flex; gap:clamp(1rem,2.5vw,2rem); margin:0; padding:0; font-size:.92rem; }
.nav-menu a{ color:var(--fg-soft); }
.nav-menu a:hover{ color:var(--fg); text-decoration:none; }
@media (max-width:640px){
  .nav-menu{ gap:1rem; font-size:.85rem; flex-wrap:wrap; justify-content:flex-end; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  padding-block:clamp(4.5rem,13vw,9rem);
  background:
    linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 30%, rgba(255,255,255,.5) 58%, rgba(255,255,255,.10) 100%),
    url("assets/hero-iinoyama.jpg") center 40% / cover no-repeat;
}
.hero .lead{ max-width:36ch; text-shadow:0 1px 0 rgba(255,255,255,.6); }
@media (max-width:760px){
  .hero{
    padding-bottom:48vw;
    background:
      linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.78) 42%, rgba(255,255,255,.28) 100%),
      url("assets/hero-iinoyama.jpg") center 28% / cover no-repeat;
  }
}
.hero h1{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(2rem,6vw,3.6rem); line-height:1.2; margin:0 0 1.2rem;
}
.hero .lead{ font-size:clamp(1.05rem,1.8vw,1.35rem); }
.hero__actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }

/* ============================================================
   Works grid
   ============================================================ */
.works-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--gap); margin-top:2.5rem;
}
.work-card{ display:block; }
.work-card__thumb{
  aspect-ratio:99/70; overflow:hidden; border-radius:var(--radius);
  background:var(--bg-soft); border:1px solid var(--line);
}
.work-card__thumb img{ width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
.work-card:hover .work-card__thumb img{ transform:scale(1.04); }
.work-card:hover{ text-decoration:none; }
.work-card__title{ font-family:var(--font-head); font-weight:700; margin:.9rem 0 .2rem; font-size:1.05rem; }
.work-card__meta{ color:var(--fg-soft); font-size:.85rem; }
.works-note{ margin-top:1.9rem; font-size:.78rem; line-height:1.8; text-align:right; color:var(--fg-soft); }
.works-note a{ color:var(--accent); }

/* ============================================================
   About
   ============================================================ */
.about__grid{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
@media (min-width:820px){ .about__grid{ grid-template-columns:1.3fr .9fr; align-items:start; } }
.facts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.facts li{ display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.facts dt,.facts .k{ color:var(--fg-soft); }
.facts .v{ font-weight:700; text-align:right; }

/* ============================================================
   Contact
   ============================================================ */
.contact__mail{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.3rem,4vw,2.2rem); word-break:break-all;
}
.contact__mail a{ color:var(--accent); }

/* Contact form */
.contact-form{ max-width:600px; margin-top:1.6rem; }
.contact-form .field{ margin-bottom:1.15rem; }
.contact-form label{ display:block; font-size:.85rem; color:var(--fg-soft); margin-bottom:.4rem; }
.contact-form .req{ color:var(--accent-2); margin-left:.15em; }
.contact-form input,
.contact-form textarea{
  width:100%; padding:.8rem .95rem; border:1px solid var(--line); border-radius:8px;
  background:#fff; font:inherit; color:var(--fg); line-height:1.6;
}
.contact-form input:focus,
.contact-form textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.contact-form textarea{ resize:vertical; }
.contact-form button{ margin-top:.3rem; cursor:pointer; }
.contact-form .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form-note{ padding:.9rem 1.15rem; border-radius:8px; font-size:.95rem; }
.form-note--ok{ background:#e7f4ec; color:#1c6b3f; border:1px solid #bfe3cd; }
.form-note--err{ background:#fdecec; color:#a12a2a; border:1px solid #f3c9c9; }

/* ============================================================
   Page content (generic)
   ============================================================ */
.page-content{ max-width:72ch; }
.page-content h2{ margin-top:2em; }
.page-content img{ border-radius:var(--radius); margin-block:1.5em; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:1px solid var(--line); padding-block:2.5rem; color:var(--fg-soft); font-size:.88rem; }
.site-footer__inner{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:center; justify-content:space-between; }
.site-footer a:hover{ color:var(--fg); }

/* Utilities */
.stack > * + *{ margin-top:1.1rem; }
.center{ text-align:center; }
.muted{ color:var(--fg-soft); }