/* ============================================================
   NIJIMI — 図鑑の図版風ポートフォリオテンプレート
   フロントエンドのCSS。全体の色・書体・余白・部品の見た目を決めています。
   ============================================================ */

:root{
  --bg:#f7f3ea;      /* 生成りの紙（背景） */
  --card:#fbf8f2;    /* わずかに明るい紙（カードの下地） */
  --ink:#45403a;     /* 本文の文字色。--bg とのコントラスト比 9.26:1（AA/AAA両方クリア） */
  --sub:#a39c90;     /* 薄いグレージュ。見出し番号や年号などの「ラベル」専用（本文には使いません） */
  --line:#e3dccd;    /* 細い罫線（ヘアライン） */

  /* ------------------------------------------------------------
     ★ 色替えはここだけ！ --wash-a と --wash-b の2行を
     好きなパターンのコメントと入れ替えるだけで、水彩のにじみの色が変わります。
     （にじみは背景の装飾なので、文字のコントラスト基準の対象外です）

     ① 既定：麦わら×桜（淡色）
        --wash-a:#eadfb8;
        --wash-b:#ecd3d3;

     ② 青×緑（淡色）
        --wash-a:#cfe3ea;
        --wash-b:#dbe8d2;

     ③ グレー×藤色（淡色）
        --wash-a:#e2ddd3;
        --wash-b:#e1d5e8;
     ------------------------------------------------------------ */
  --wash-a:#eadfb8;
  --wash-b:#ecd3d3;

  --serif:'Cormorant Garamond',serif;
  --sans:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP',sans-serif;
  --mono:'IBM Plex Mono','Zen Kaku Gothic New',monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;line-height:1.85;
  overflow-x:hidden}
h1,h2,h3,p{text-wrap:pretty}
img{max-width:100%;display:block}
a{color:inherit}
.nb{display:inline-block}
.only-narrow{display:none}
@media (max-width:480px){.only-narrow{display:inline}}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* ---- 控えめなフェードイン（script.js が対象要素に fade-init / fade-in を付け外しする） ---- */
.fade-target.fade-init{opacity:0;transform:translateY(14px)}
.fade-target.fade-in{opacity:1;transform:translateY(0);
  transition:opacity .4s ease, transform .4s ease}

/* ============================================================
   plateバー（ページ最上部の細い帯）
   ============================================================ */
.platebar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:4px 14px;max-width:1040px;margin:0 auto;padding:22px 24px 0;
  font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sub)}

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{position:relative;overflow:hidden;text-align:center;
  padding:64px 24px 68px;
  background:
    radial-gradient(680px 320px at 26% -80px, var(--wash-a) 0%, rgba(247,243,234,0) 68%),
    radial-gradient(680px 320px at 76% -40px, var(--wash-b) 0%, rgba(247,243,234,0) 68%)}
.hero-eyebrow{font-family:var(--mono);font-weight:300;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sub);margin:0 0 26px}
.hero-title{font-family:var(--serif);font-weight:300;font-size:clamp(40px,10vw,96px);
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin:0;line-height:1.15}
.hero-italic{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(14px,2vw,17px);color:var(--ink);letter-spacing:.02em;margin:16px 0 40px}
.hero-heading{font-family:var(--sans);font-weight:500;font-size:clamp(20px,3.4vw,29px);
  margin:0 0 18px;letter-spacing:.02em}
.hero-lead{font-family:var(--sans);font-weight:300;font-size:15px;color:var(--ink);
  max-width:34em;margin:0 auto}

/* ============================================================
   共通レイアウト
   ============================================================ */
.wrap{max-width:1040px;margin:0 auto;padding:0 24px 100px}
.section{margin-top:78px}
.section-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:22px;margin-bottom:34px}
.section-num{font-family:var(--mono);font-weight:300;font-size:11px;letter-spacing:.1em;color:var(--sub)}
.section-titles{display:flex;flex-direction:column;gap:5px}
.section-titles h2{margin:0;font-size:20px;font-weight:500;font-family:var(--sans)}
.section-sublabel{font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sub)}

/* ============================================================
   01 作品 / plates
   ============================================================ */
.plates-grid{display:grid;gap:34px 28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.plate-card{margin:0}
/* 図版の額装：枠の内側に紙色の余白を一周。数字を変えると余白の広さが変わります（0 で余白なし） */
.plate-trigger{display:block;width:100%;padding:3%;margin:0;border:1px solid var(--line);
  border-radius:4px;background:var(--card);cursor:pointer;overflow:hidden}
.plate-trigger img{width:100%;height:auto;aspect-ratio:1280/800}
.plate-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.03em}
.plate-num{color:var(--sub)}
.plate-name{color:var(--ink);font-size:13px;letter-spacing:.01em}
.plate-meta{color:var(--sub)}

/* ============================================================
   02 わたしについて / about
   ============================================================ */
.about{display:grid;gap:44px;grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr)}
.about-text{margin:0;font-size:15px;font-weight:300;line-height:2}
.about-list{list-style:none;margin:0;padding:0}
.about-list li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.about-list li:first-child{border-top:none}
.about-year{font-family:var(--mono);font-weight:300;font-size:12px;color:var(--sub);flex:0 0 auto}
.about-item{font-size:14px;font-weight:400}
@media (max-width:680px){.about{grid-template-columns:1fr}}

/* ============================================================
   03 連絡先 / contact
   ============================================================ */
.contact{display:flex;flex-direction:column;gap:22px}
.contact-mail{margin:0;font-family:var(--serif);font-style:italic;font-size:19px;font-weight:400}
.contact-mail a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.contact-mail a:hover,.contact-mail a:focus-visible{border-bottom-color:var(--ink)}
.contact-sns{list-style:none;display:flex;flex-wrap:wrap;gap:14px 26px;margin:0;padding:0;
  font-family:var(--mono);font-weight:300;font-size:12px;letter-spacing:.06em}
.contact-sns a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.contact-sns a:hover,.contact-sns a:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}

/* ============================================================
   フッター
   ============================================================ */
footer{margin-top:90px}
.ruler{height:8px;margin-bottom:18px;max-width:1040px;margin-left:auto;margin-right:auto;
  padding:0 24px;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 7px);
  background-origin:content-box;box-sizing:content-box}
.foot-row{max-width:1040px;margin:0 auto;padding:0 24px 40px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;
  font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sub)}
.foot-mark{letter-spacing:.32em}

/* ============================================================
   ライトボックス
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:28px;opacity:0;transition:opacity .3s ease}
.lightbox.is-open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(247,243,234,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lightbox-panel{position:relative;max-width:min(920px,92vw);max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  transform:translateY(12px);transition:transform .3s ease}
.lightbox.is-open .lightbox-panel{transform:translateY(0)}
.lightbox-frame{background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:16px;max-height:76vh;display:flex;min-width:0}
.lightbox-img{max-width:100%;max-height:70vh;height:auto;width:auto;min-width:0;display:block;border-radius:2px}
.lightbox-cap{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--sub);text-align:center}
.lightbox-close{position:absolute;top:-18px;right:-18px;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-family:var(--serif);font-size:20px;line-height:1;cursor:pointer}
.lightbox-close:hover{background:var(--bg)}
@media (max-width:520px){.lightbox-close{top:-14px;right:0}}