/*
Theme Name: AtelierNagisa Shelf
Description: EASELを親テーマとして使う、凪砂いる用の作品棚デザインです。
Author: AtelierNagisa
Template: easel
Version: 1.2.2
Text Domain: atelier-nagisa-shelf
*/

/* =========================================================
   1. 色と基本設定
   色を変えたい場合は、まずここだけを変更します。
========================================================= */
:root {
  --atelier-ink: #243343;
  --atelier-muted: #65707b;
  --atelier-ruri: #315b83;
  --atelier-ruri-deep: #1d405f;
  --atelier-lavender: #aaa7cd;
  --atelier-greige: #f4f1ed;
  --atelier-paper: #fcfbf9;
  --atelier-line: rgba(49, 91, 131, 0.18);
}

body.atelier-shelf-theme {
  margin: 0;
  background: var(--atelier-paper);
  color: var(--atelier-ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.atelier-shelf-theme *,
.atelier-shelf-theme *::before,
.atelier-shelf-theme *::after { box-sizing: border-box; }
.atelier-shelf-theme a { color: inherit; text-decoration: none; }
.atelier-wrap { margin: 0 auto; max-width: 1180px; width: min(84%, 1180px); }
.atelier-label { color: var(--atelier-ruri); font: 600 10px/1.5 Arial, sans-serif; letter-spacing: .28em; }

/* =========================================================
   2. ヘッダーとメニュー
========================================================= */
.atelier-header {
  background: rgba(252, 251, 249, .92);
  border-bottom: 1px solid var(--atelier-line);
  overflow: visible !important;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
}
.atelier-header-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 88px;
  overflow: visible !important;
}
.atelier-brand { display: flex; flex-direction: column; gap: 2px; }
.atelier-brand-name { color: #62658a; font: italic clamp(26px, 3vw, 38px)/1 Georgia, serif; letter-spacing: -.04em; }
.atelier-brand-sub { color: var(--atelier-muted); font: 600 8px/1.4 Arial, sans-serif; letter-spacing: .24em; }
.atelier-custom-logo { height: auto; max-height: 68px; max-width: 300px; width: auto; }
.atelier-nav-desktop { display: block; }
.atelier-menu-details { display: none; margin: 0; }
.atelier-menu-summary { display: none; }
.atelier-menu { display: flex; gap: clamp(18px, 3vw, 42px); list-style: none; margin: 0; padding: 0; }
.atelier-menu a { font: 500 12px/1 Arial, sans-serif; letter-spacing: .1em; }

/* =========================================================
   3. トップの紹介エリア
========================================================= */
.atelier-hero {
  align-items: center;
  display: grid;
  gap: clamp(36px, 8vw, 100px);
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  min-height: 680px;
  overflow: hidden;
  padding: clamp(72px, 9vw, 130px) 0;
  position: relative;
}
.atelier-hero h1 { color: var(--atelier-ruri-deep); font-size: clamp(48px, 5.9vw, 84px); font-weight: 500; letter-spacing: .02em; line-height: 1.18; margin: 24px 0 28px; }
.atelier-hero-lead { color: #51606e; font-size: clamp(15px, 1.6vw, 19px); line-height: 2; white-space: pre-line; }
.atelier-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.atelier-button { align-items: center; border: 1px solid var(--atelier-line); border-radius: 999px; display: inline-flex; font: 600 12px/1 Arial, sans-serif; justify-content: center; min-height: 50px; padding: 0 25px; }
.atelier-button-primary { background: var(--atelier-ruri-deep); box-shadow: 0 12px 30px rgba(29,64,95,.18); color: #fff !important; }
.atelier-water { aspect-ratio: 1; background: radial-gradient(circle at 45% 40%, #fff, rgba(232,230,246,.78) 47%, rgba(175,178,214,.25) 67%, transparent 70%); display: grid; place-items: center; position: relative; }
.atelier-jelly { height: 205px; position: relative; width: 205px; }
.atelier-jelly::before { background: radial-gradient(circle at 37% 28%, #fff, rgba(167,177,216,.74) 54%, rgba(88,110,157,.7)); border-radius: 52% 48% 45% 55% / 58% 58% 42% 42%; box-shadow: inset -14px -16px 30px rgba(56,73,128,.18), 0 24px 46px rgba(91,95,144,.18); content: ""; height: 126px; left: 40px; position: absolute; top: 12px; width: 130px; }
.atelier-jelly i { border-left: 2px solid rgba(100,111,166,.43); border-radius: 50%; bottom: 7px; height: 82px; position: absolute; width: 34px; }
.atelier-jelly i:nth-child(1) { left: 62px; transform: rotate(8deg); }
.atelier-jelly i:nth-child(2) { left: 101px; transform: rotate(-8deg); }
.atelier-jelly i:nth-child(3) { left: 138px; transform: rotate(12deg); }

/* =========================================================
   4. 自己紹介
========================================================= */
.atelier-about { border-top: 1px solid var(--atelier-line); padding: clamp(76px, 10vw, 130px) 0; }
.atelier-about-grid { display: grid; gap: clamp(42px, 8vw, 120px); grid-template-columns: .9fr 1.1fr; margin-top: 34px; }
.atelier-about h2,
.atelier-section-heading h2,
.atelier-contact h2 { color: var(--atelier-ruri-deep); font-size: clamp(34px, 4.5vw, 62px); font-weight: 500; line-height: 1.45; margin: 0; }
.atelier-about-copy { border-left: 1px solid var(--atelier-line); color: #53616e; font-size: 16px; line-height: 2.2; padding-left: clamp(28px, 5vw, 68px); white-space: pre-line; }

/* =========================================================
   5. 作品棚
   本・物語・ことばの3段に分けて表示します。
========================================================= */
.atelier-works { background: var(--atelier-greige); padding: clamp(76px, 10vw, 130px) 0; }
.atelier-section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 62px; }
.atelier-section-heading h2 { margin-top: 12px; }
.atelier-section-heading > p { color: var(--atelier-muted); font-size: 13px; }
.atelier-shelf-list { display: grid; gap: 34px; }
.atelier-shelf { background: rgba(255,255,255,.78); border: 1px solid rgba(49,91,131,.11); display: grid; gap: 36px; grid-template-columns: minmax(210px,.34fr) minmax(0,1fr); padding: clamp(26px,4vw,50px); position: relative; }
.atelier-shelf::after { background: linear-gradient(90deg,var(--atelier-ruri-deep),var(--atelier-lavender)); bottom: -7px; box-shadow: 0 8px 15px rgba(29,64,95,.18); content: ""; height: 7px; left: 18px; position: absolute; right: 18px; }
.atelier-shelf-copy > p { color: var(--atelier-ruri); font: 600 9px/1 Arial,sans-serif; letter-spacing: .25em; margin: 4px 0 13px; }
.atelier-shelf-copy h3 { color: var(--atelier-ruri-deep); font-size: 28px; font-weight: 500; margin: 0 0 18px; }
.atelier-shelf-copy span { color: var(--atelier-muted); font-size: 13px; line-height: 1.9; }
.atelier-books { align-items: stretch; display: grid; gap: 16px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.atelier-book-card { border-radius: 2px 10px 10px 2px; box-shadow: -5px 8px 18px rgba(34,49,67,.12); color: #fff !important; display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; overflow: hidden; padding: 22px; position: relative; transition: transform .25s ease,box-shadow .25s ease; }
.atelier-book-card:hover { box-shadow: -8px 14px 28px rgba(34,49,67,.18); transform: translateY(-5px); }
.atelier-book-card::before { background: rgba(255,255,255,.16); bottom: 0; content: ""; left: 9px; position: absolute; top: 0; width: 1px; }
.atelier-book-card small { display: block; font: 500 9px/1.6 Arial,sans-serif; letter-spacing: .06em; opacity: .75; }
.atelier-book-card h4 { font-size: 17px; font-weight: 500; line-height: 1.6; margin: 16px 0 0; position: relative; }
.atelier-book-arrow { align-self: flex-end; font-family: Arial,sans-serif; opacity: .7; }
.atelier-tone-ruri { background: linear-gradient(145deg,#244e74,#6d86a0); }
.atelier-tone-lavender { background: linear-gradient(145deg,#7679a9,#b2a9c6); }
.atelier-tone-jade { background: linear-gradient(145deg,#376f68,#72a397); }
.atelier-tone-night { background: linear-gradient(145deg,#313852,#6e748f); }
.atelier-tone-rose { background: linear-gradient(145deg,#8b5b67,#c1979d); }
.atelier-tone-sky { background: linear-gradient(145deg,#547a9e,#94b3ca); }
.atelier-tone-garden { background: linear-gradient(145deg,#536c66,#8ea59a); }

/* 作品一覧ページでは、通常のカード型で表示します。 */
.atelier-work-grid { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.atelier-work-card { background: #fff; border: 1px solid rgba(49,91,131,.11); box-shadow: 0 14px 28px rgba(34,49,67,.08); display: flex; flex-direction: column; min-height: 310px; overflow: hidden; position: relative; transition: transform .25s ease; }
.atelier-work-card:hover { transform: translateY(-5px); }
.atelier-work-thumb { aspect-ratio: 16 / 9; background: linear-gradient(145deg, var(--atelier-ruri), var(--atelier-lavender)); overflow: hidden; }
.atelier-work-thumb img { height: 100%; object-fit: cover; width: 100%; }
.atelier-work-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.atelier-work-body small { color: var(--atelier-ruri); font: 600 9px/1.5 Arial, sans-serif; letter-spacing: .12em; }
.atelier-work-body h3 { color: var(--atelier-ruri-deep); font-size: 21px; font-weight: 500; line-height: 1.55; margin: 13px 0; }
.atelier-work-body p { color: var(--atelier-muted); font-size: 13px; line-height: 1.9; }
.atelier-work-more { color: var(--atelier-ruri); font: 600 11px/1 Arial, sans-serif; margin-top: auto; padding-top: 18px; }
.atelier-shelf-line { background: linear-gradient(90deg, var(--atelier-ruri-deep), var(--atelier-lavender)); box-shadow: 0 8px 15px rgba(29,64,95,.17); height: 7px; margin: 12px 12px 0; }

/* =========================================================
   6. ブログ・お知らせ
========================================================= */
.atelier-journal { background: var(--atelier-ruri-deep); color: #fff; padding: clamp(76px, 10vw, 130px) 0; }
.atelier-journal .atelier-label,
.atelier-journal h2 { color: #fff; }
.atelier-journal .atelier-section-heading > p { color: rgba(255,255,255,.65); }
.atelier-post-list { border-top: 1px solid rgba(255,255,255,.2); list-style: none; margin: 42px 0 0; padding: 0; }
.atelier-post-list li { border-bottom: 1px solid rgba(255,255,255,.15); }
.atelier-post-list a { align-items: center; display: grid; gap: 26px; grid-template-columns: 110px 1fr auto; padding: 24px 0; }
.atelier-post-list time { font: 500 11px/1 Arial, sans-serif; opacity: .6; }
.atelier-post-list span { font-size: 16px; }

/* =========================================================
   7. お問い合わせと下層ページ
========================================================= */
.atelier-contact { align-items: center; display: grid; gap: clamp(44px, 10vw, 140px); grid-template-columns: 1fr 1fr; padding: clamp(76px, 10vw, 130px) 0; }
.atelier-contact-copy { border-left: 1px solid var(--atelier-line); color: var(--atelier-muted); font-size: 14px; line-height: 2.1; padding-left: clamp(28px, 5vw, 68px); }
.atelier-content { min-height: 60vh; padding: clamp(64px, 8vw, 110px) 0; }
.atelier-content-header { border-bottom: 1px solid var(--atelier-line); margin-bottom: 46px; padding-bottom: 28px; }
.atelier-content h1 { color: var(--atelier-ruri-deep); font-size: clamp(34px, 5vw, 58px); font-weight: 500; }
.atelier-entry { color: #455563; font-size: 16px; line-height: 2.05; }
.atelier-entry img { height: auto; max-width: 100%; }
.atelier-entry h2 { border-bottom: 1px solid var(--atelier-line); color: var(--atelier-ruri-deep); font-size: 30px; margin-top: 2em; padding-bottom: .35em; }
.atelier-entry h3 { color: var(--atelier-ruri); font-size: 23px; margin-top: 1.8em; }
.atelier-footer { background: #e6e4e8; color: #6f7380; font: 500 10px/1.7 Arial, sans-serif; letter-spacing: .08em; padding: 36px 0; }
.atelier-footer-inner { align-items: center; display: flex; justify-content: space-between; }
.atelier-footer-brand { color: #62658a; font: italic 23px/1 Georgia, serif; }

/* =========================================================
   8. スマートフォン表示
========================================================= */
@media (max-width: 900px) {
  .atelier-hero { grid-template-columns: 1fr; }
  .atelier-water { margin: 0 auto; max-width: 440px; width: 100%; }
  .atelier-about-grid,
  .atelier-contact { grid-template-columns: 1fr; }
  .atelier-about-copy,
  .atelier-contact-copy { border-left: 0; border-top: 1px solid var(--atelier-line); padding-left: 0; padding-top: 30px; }
  .atelier-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atelier-shelf { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .atelier-wrap { width: min(88%, 1180px); }
  .atelier-header-inner { min-height: 72px; }
  .atelier-brand-sub { display: none; }

  /* スマホメニュー：details要素なのでJavaScriptなしでも開閉します。 */
  .atelier-nav-desktop { display: none !important; }
  .atelier-menu-details { display: block; position: static; }
  .atelier-menu-summary {
    background: transparent;
    border: 1px solid var(--atelier-line);
    border-radius: 999px;
    color: var(--atelier-ruri-deep);
    cursor: pointer;
    display: block;
    font: 600 11px/1 Arial, sans-serif;
    list-style: none;
    padding: 10px 14px;
  }
  .atelier-menu-summary::-webkit-details-marker { display: none; }
  .atelier-menu-details[open] .atelier-menu-summary { background: var(--atelier-ruri-deep); color: #fff; }
  .atelier-menu-details > .atelier-nav-mobile {
    background: var(--atelier-paper);
    border-bottom: 1px solid var(--atelier-line);
    box-shadow: 0 16px 30px rgba(29, 64, 95, .12);
    display: none !important;
    height: auto !important;
    left: 0;
    max-height: calc(100vh - 72px);
    opacity: 1 !important;
    overflow-y: auto;
    padding: 22px 6%;
    position: fixed;
    right: 0;
    top: 72px;
    transform: none !important;
    visibility: visible !important;
    width: 100vw;
    z-index: 200;
  }
  .atelier-menu-details:not([open]) > .atelier-nav-mobile { display: none !important; }
  .atelier-menu-details[open] > .atelier-nav-mobile { display: block !important; }
  .atelier-menu-details[open] .atelier-menu {
    align-items: flex-start;
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    visibility: visible !important;
  }
  .atelier-hero { min-height: auto; padding: 70px 0; }
  .atelier-hero h1 { font-size: clamp(42px, 13vw, 58px); }
  .atelier-water { transform: scale(.88); }
  .atelier-section-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .atelier-work-grid { grid-template-columns: 1fr; }
  .atelier-books { grid-template-columns: 1fr; }
  .atelier-book-card { min-height: 158px; }
  .atelier-post-list a { gap: 10px; grid-template-columns: 1fr auto; }
  .atelier-post-list time { grid-column: 1 / -1; }
  .atelier-footer-inner { flex-direction: column; gap: 12px; text-align: center; }
}

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