/* Never Too Late — 表紙A/Bテスト用LP 共通デザイン
   発想: ページの右端を一本のチェロが通る。冒頭は指板と弦、次の区画で胴につながる。
   色は紙・黒檀・琥珀(松脂)の3色。表紙案が紺と紫のため、ページ側は色みのない黒檀色にして
   どちらの案にも寄せない。表紙のまわりは無彩色の紙のまま保ち、A/B両案を同じ条件で見せる。 */

:root {
  --paper: #f3f2ee;
  --page: #fdfdfb;
  --mist: #e8e7e3;
  --night: #1f1e1d;
  --ebony: #0f0f0e;
  --amber: #e3a43b;
  --slate: #605f5b;
  --rule: #d3d4d2;
  --on-night: #f3f2ee;
  --on-night-soft: #b6b4ae;
  --rule-night: rgba(243, 242, 238, .17);

  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --latin: "Fraunces", Georgia, "Times New Roman", serif;

  --wrap: 1160px;
  --pad: clamp(20px, 5vw, 60px);
  --edge: max(var(--pad), calc((100% - var(--wrap)) / 2));
  --header-h: 84px;
  --section: clamp(72px, 9.5vw, 136px);

  /* チェロの胴の長さ。指板・弦・胴の寸法はすべてここから決まる。 */
  --L: clamp(640px, 66vw, 860px);
  --strip: calc(var(--L) * .084);
  --string: 1.15px; /* 弦の太さの基準 */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--night);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
::selection { background: var(--amber); color: var(--ebony); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }
.skip-link { position: absolute; top: -80px; left: 12px; z-index: 20; padding: 8px 16px; background: var(--page); }
.skip-link:focus { top: 12px; }

.draft-banner {
  padding: 8px 20px;
  background: var(--mist);
  color: var(--slate);
  font-size: .6875rem;
  line-height: 1.7;
  text-align: center;
}
.draft-banner strong { margin-right: 1em; color: var(--night); }
.cover-label { margin-right: 1em; padding: 1px 8px; border: 1px solid currentColor; border-radius: 2px; color: var(--night); white-space: nowrap; }

.heading {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.6;
  letter-spacing: .06em;
  font-feature-settings: "palt";
}
.heading span { display: block; }
.label {
  display: flex;
  align-items: center;
  gap: .9em;
  white-space: nowrap;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .2em;
}
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: relative;
  z-index: 2;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-right: calc(var(--strip) + clamp(20px, 3vw, 44px));
}
.publisher { white-space: nowrap; font-family: var(--mincho); font-weight: 600; font-size: 1.125rem; letter-spacing: .26em; line-height: 1; }
.site-header nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); font-size: .8125rem; letter-spacing: .08em; }
.site-header nav a { text-decoration: none; padding-block: 6px; white-space: nowrap; }
.site-header nav a:hover { color: var(--slate); }
.site-header .nav-order { border-bottom: 1px solid currentColor; }

/* ---------- 冒頭 ---------- */
.hero { position: relative; padding-block: clamp(8px, 1.6vw, 24px) clamp(64px, 8vw, 112px); }

.neck {
  position: absolute;
  top: calc(-1 * var(--header-h));
  bottom: 0;
  right: var(--edge);
  width: var(--strip);
  background: var(--ebony);
}
.strings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.strings line, .strings path { fill: none; stroke: #f0e2c2; stroke-linecap: round; }
.strings :nth-child(1) { stroke-width: calc(var(--string) * 2.5); }
.strings :nth-child(2) { stroke-width: calc(var(--string) * 2); }
.strings :nth-child(3) { stroke-width: calc(var(--string) * 1.5); }
.strings :nth-child(4) { stroke-width: calc(var(--string) * 1.1); }

.hero-grid {
  /* 表紙が主役。幅は最大440px、ただし最初の画面に表紙全体が収まる高さまで */
  --cover-w: clamp(260px, min(34vw, calc((100vh - 175px) * var(--cover-ratio, .7))), 440px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cover-w) auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "head cover hook" "action cover hook";
  column-gap: clamp(30px, 4vw, 56px);
  padding-right: calc(var(--strip) + clamp(28px, 4vw, 56px));
}
.hero-grid > * { min-width: 0; }
.hero-head { grid-area: head; }
.hero-action { grid-area: action; align-self: end; padding-top: 40px; }
.cover-area { grid-area: cover; position: relative; }
.hook { grid-area: hook; }

.edition { display: flex; align-items: center; gap: 1em; font-size: .8125rem; letter-spacing: .12em; color: var(--slate); line-height: 1; }
.edition-kind { padding-right: 1em; border-right: 1px solid var(--rule); color: var(--night); font-weight: 700; }

h1 { margin-top: clamp(20px, 2.6vw, 34px); font-weight: inherit; font-size: inherit; }
h1 > span { display: block; }
.title-en {
  font-family: var(--latin);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--slate);
}
.title-ja {
  margin-top: .3em;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.1vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: .03em;
  font-feature-settings: "palt";
}
.title-ja span { display: inline-block; }
.subtitle {
  margin-top: .55em;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.4;
  letter-spacing: .18em;
}
.byline { display: flex; flex-wrap: wrap; gap: .2em 1.6em; margin-top: 1.5em; font-size: .9375rem; letter-spacing: .06em; }

.hook {
  justify-self: end;
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 2.875rem);
  line-height: 1.62;
  letter-spacing: .08em;
  white-space: nowrap;
}
.hook span { display: block; }
.hook span + span { margin-top: 1em; }

.cover-stage { aspect-ratio: 600 / 850; }
.cover-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(15, 15, 14, .1)) drop-shadow(0 10px 18px rgba(15, 15, 14, .13)) drop-shadow(0 34px 44px rgba(15, 15, 14, .12));
}
.cover-note { position: absolute; top: calc(100% + 14px); left: 0; right: 0; font-size: .6875rem; color: var(--slate); text-align: center; line-height: 1.4; }

.lead { max-width: 24em; font-family: var(--mincho); font-size: 1rem; line-height: 2; letter-spacing: .04em; }
.price { margin-top: 1.4em; font-size: .875rem; letter-spacing: .04em; line-height: 1.5; }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100%, 22rem);
  min-height: 62px;
  margin-top: .9rem;
  padding: 0 1.4rem 0 1.75rem;
  border: 0;
  border-radius: 4px;
  background: var(--amber);
  color: var(--ebony);
  font: 700 1rem/1.3 var(--gothic);
  letter-spacing: .1em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.cta span { white-space: nowrap; }
.cta svg { flex: none; transition: transform .2s ease; }
a.cta:hover { background: #efb650; }
a.cta:hover svg { transform: translate(2px, -2px); }
a.cta:active { transform: translateY(1px); }
button.cta[disabled] { cursor: default; }
.cta--pending { background: none; border: 1px solid currentColor; font-weight: 500; cursor: default; }
.cta--pending span { white-space: normal; }
.cta-note { margin-top: .8rem; font-size: .75rem; line-height: 1.6; color: var(--slate); }

/* ---------- この本について（チェロの胴） ---------- */
.about {
  position: relative;
  min-height: calc(var(--L) * 1.11 + 88px);
  background: var(--night);
  color: var(--on-night);
  overflow: hidden;
}
.cello {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--edge) + var(--strip) / 2 - var(--L) * .31);
  width: calc(var(--L) * .62);
}
.cello svg { width: 100%; height: calc(var(--L) * 1.11); overflow: visible; }
.cello .body-fill { fill: #2a2928; }
.cello .body-line { fill: none; stroke: var(--amber); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.cello .purfling-a { fill: none; stroke: rgba(227, 164, 59, .5); stroke-width: 30; }
.cello .purfling-b { fill: none; stroke: #2a2928; stroke-width: 26.5; }
.cello .f-stem { fill: none; stroke: var(--amber); stroke-width: 5.5; stroke-linecap: round; }
.cello .f-fill { fill: var(--amber); }
.cello .ebony { fill: var(--ebony); }
.cello .bridge { fill: #2a2928; stroke: var(--amber); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cello .tail-strings { fill: none; stroke: #f0e2c2; stroke-width: calc(var(--string) * 1.4); vector-effect: non-scaling-stroke; }
.cello .tailgut { fill: none; stroke: var(--ebony); stroke-width: 3; }
.endpin { position: absolute; top: calc(var(--L) * 1.11 - 1px); bottom: 0; left: calc(50% - 1px); width: 2px; background: #908e89; }

.neck--body { top: 0; bottom: auto; height: calc(var(--L) * .655); background: none; }

.about-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--section);
  padding-right: calc(var(--L) * .31 + var(--strip) / 2 + clamp(32px, 5vw, 72px));
}
.about .label { color: var(--amber); }
.about .heading { margin-top: 1.1em; }
.about-text { max-width: 35rem; margin-top: clamp(32px, 4vw, 52px); }
.about-paragraphs p {
  font-family: var(--mincho);
  font-size: 1.0625rem;
  line-height: 2.15;
  letter-spacing: .03em;
  color: rgba(243, 242, 238, .92);
}
.about-paragraphs p + p { margin-top: 1.5em; }
.edition-note, .reader-box { margin-top: clamp(40px, 5vw, 60px); padding-top: 28px; border-top: 1px solid var(--rule-night); }
.edition-note p { margin-top: .9em; font-size: .9375rem; line-height: 2.1; color: rgba(243, 242, 238, .86); }
.edition-note h3, .reader-box h3 { font-family: var(--mincho); font-weight: 500; font-size: 1.1875rem; letter-spacing: .08em; }
.reader-list { margin-top: .9em; font-size: .9375rem; line-height: 2.3; color: var(--on-night-soft); }
.reader-list li { display: flex; align-items: center; gap: 1em; }
.reader-list li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--amber); }

/* ---------- 見出し＋本文の2段組（テーマ／著者） ---------- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.split-intro { margin-top: 1.4em; word-break: auto-phrase; font-size: .9375rem; line-height: 2; color: var(--slate); }

.topics { padding-block: var(--section); }
.topic-list li {
  display: grid;
  gap: 8px 28px;
  align-items: baseline;
  padding-block: 1.9rem;
  border-top: 1px solid var(--rule);
}
.topic-list li:last-child { border-bottom: 1px solid var(--rule); }
.topic-list h3 { font-family: var(--mincho); font-weight: 600; font-size: 1.3125rem; line-height: 1.6; letter-spacing: .06em; font-feature-settings: "palt"; }
.topic-list p { font-size: .9375rem; line-height: 2; color: var(--slate); }

/* ---------- 試し読み ---------- */
.sample { padding-block: var(--section); background: var(--mist); }
.sample-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; }
.sample-heading p { font-size: .9375rem; color: var(--slate); }
.sample-placeholder { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(36px, 5vw, 60px); }
.spread { display: grid; grid-template-columns: 1fr 1fr; filter: drop-shadow(0 18px 26px rgba(15, 15, 14, .14)); }
.spread .page { position: relative; aspect-ratio: 600 / 850; background: var(--page); }
.spread .page:first-child { background: linear-gradient(to left, #e9e9e7 0, var(--page) 9%); }
.spread .page:last-child { background: linear-gradient(to right, #e9e9e7 0, var(--page) 9%); }
.spread .page::before { content: ""; position: absolute; inset: 13% 15%; background: repeating-linear-gradient(to left, rgba(31, 30, 29, .2) 0 1px, transparent 1px 6.25%); }
.sample-note strong { display: block; font-family: var(--mincho); font-weight: 500; font-size: 1.375rem; line-height: 1.6; letter-spacing: .06em; }
.sample-note p { margin-top: .9em; font-size: .875rem; line-height: 2; color: var(--slate); }
.sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(36px, 5vw, 60px); }
.sample-grid img { width: 100%; background: var(--page); box-shadow: 0 18px 26px rgba(15, 15, 14, .14); }
.sample-grid figcaption { margin-top: 12px; font-size: .8125rem; color: var(--slate); }

/* ---------- 著者と訳者 ---------- */
.people { padding-block: var(--section); }
.person { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 0 24px; align-items: baseline; padding-block: 1.9rem; border-top: 1px solid var(--rule); }
.person:last-child { border-bottom: 1px solid var(--rule); }
.role { font-size: .8125rem; font-weight: 500; letter-spacing: .2em; color: var(--slate); }
.person h3 { font-family: var(--mincho); font-weight: 600; font-size: 1.5rem; line-height: 1.5; letter-spacing: .08em; }
.name-en { margin-left: .9em; font-family: var(--latin); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 100; font-size: 1.0625rem; letter-spacing: .01em; color: var(--slate); }
.years { margin-left: 1em; font-family: var(--gothic); font-weight: 400; font-size: .8125rem; letter-spacing: .04em; color: var(--slate); white-space: nowrap; }
.person h3 + p { margin-top: .8em; font-size: .9375rem; line-height: 2; color: var(--slate); }

/* ---------- 書籍情報・予約 ---------- */
.book-info { padding-top: var(--section); background: var(--night); color: var(--on-night); }
.closing-en {
  font-family: var(--latin);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: clamp(2.25rem, 11.2vw, 9.25rem);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.info-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 88px); align-items: start; margin-top: clamp(44px, 6vw, 84px); }
.closing .heading { font-size: clamp(1.375rem, 2.4vw, 2rem); white-space: nowrap; }
.closing-title { margin-top: 1.1em; font-size: .9375rem; line-height: 1.8; letter-spacing: .08em; color: var(--on-night-soft); }
.closing .cta { margin-top: 1.9rem; }
.book-info .cta-note { color: var(--on-night-soft); }
.specs-block .label { color: var(--amber); }
.specs { margin-top: 1.1rem; font-size: .9375rem; line-height: 1.8; }
.specs div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 16px; padding-block: .95rem; border-top: 1px solid var(--rule-night); }
.specs div:last-child { border-bottom: 1px solid var(--rule-night); }
.specs dt { color: var(--on-night-soft); letter-spacing: .1em; }
.specs .pending { font-size: .8125rem; color: var(--on-night-soft); }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: var(--section);
  padding-block: 28px;
  border-top: 1px solid var(--rule-night);
  font-size: .75rem;
  color: var(--on-night-soft);
}
.site-footer .publisher { font-size: 1rem; color: var(--on-night); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--on-night); }

/* ---------- 冒頭の演出（読み込み時に一度だけ） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hook span { animation: brush 1.15s cubic-bezier(.65, 0, .25, 1) both; }
  .hook span:nth-child(1) { animation-delay: .2s; }
  .hook span:nth-child(2) { animation-delay: .95s; }
  @keyframes brush {
    from { clip-path: inset(-6% -6% 106% -6%); }
    to { clip-path: inset(-6%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (min-width: 1100px) {
  .topic-list li { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .topic-list h3 { white-space: nowrap; }
}

/* ---------- 縦積みの冒頭（タブレット縦・スマートフォン） ---------- */
@media (max-width: 859px) {
  .hero { padding-top: 12px; }
  .hero-grid {
    --cover-w: clamp(130px, 58vw, 400px);
    grid-template-columns: var(--cover-w) auto;
    grid-template-rows: auto;
    grid-template-areas: "cover hook" "head head" "action action";
    justify-content: start;
    column-gap: clamp(12px, 3.6vw, 32px);
    padding-right: calc(var(--strip) + clamp(16px, 3vw, 32px));
  }
  /* 表紙を大きく取るため、縦書きコピーは1行にして表紙の横に添える */
  .hook { justify-self: start; font-size: clamp(1rem, 5.2vw, 1.75rem); letter-spacing: .04em; }
  .hook span { display: inline-block; }
  .hook span + span { margin-top: 0; }
  .hero-head { margin-top: clamp(46px, 8vw, 68px); }
  .cover-note { top: calc(100% + 10px); }
  .hero-action { padding-top: 28px; }
  .cover-note { text-align: left; }
}

@media (max-width: 859px) {
  :root { --L: 430px; --header-h: 56px; --string: .62px; }
  .site-header { gap: 12px; }
  h1 { margin-top: 16px; }
  .byline { margin-top: 1.1em; font-size: .875rem; }
  /* 予約ボタンを最初の画面に収めるため、紹介文はボタンの後ろへ回す */
  .hero-action { display: flex; flex-direction: column; padding-top: 20px; }
  .lead { order: 1; margin-top: 1.6em; font-size: .9375rem; line-height: 1.9; }
  .price { margin-top: 0; }
  .split-intro { font-size: .875rem; }
  .site-header { padding-right: calc(var(--strip) + 16px); }
  .site-header .nav-sub { display: none; }
  .publisher { font-size: 1rem; }
  .title-ja { font-size: clamp(1.25rem, 6.1vw, 2.5rem); letter-spacing: .01em; }
  .cta { width: 100%; max-width: 26rem; }

  .about { min-height: 0; }
  .cello { bottom: auto; }
  .endpin { bottom: auto; height: calc(var(--L) * .1); }
  .about-inner { padding-block: 52px 72px; padding-right: 0; }
  .about-head {
    display: flex;
    flex-direction: column;
    min-height: calc(var(--L) * 1.21 - 52px);
    padding-right: calc(var(--L) * .29 + var(--strip) / 2 + 12px);
  }
  .about .heading { writing-mode: vertical-rl; margin-top: 32px; font-size: 1.625rem; line-height: 1.75; letter-spacing: .12em; white-space: nowrap; }
  .about .heading span + span { margin-top: 1em; }
  .about-text { margin-top: 44px; }
  .about-paragraphs p { font-size: 1rem; line-height: 2.1; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split .heading br { display: none; }
  .split-intro { max-width: none; margin-top: .9em; }
  .topic-list li { grid-template-columns: 1fr; padding-block: 1.5rem; }
  .person { grid-template-columns: 3.6em minmax(0, 1fr); gap: 0 16px; padding-block: 1.5rem; }
  .name-en { display: block; margin: 0; }

  .sample-placeholder { grid-template-columns: 1fr; }
  .info-layout { grid-template-columns: 1fr; }
  .specs div { grid-template-columns: 5.5em minmax(0, 1fr); }
  .site-footer { flex-wrap: wrap; }
  .site-footer small { width: 100%; }
}

@media (min-width: 600px) and (max-width: 859px) {
  :root { --L: 540px; --string: .8px; }
}
@media (min-width: 860px) and (max-width: 1039px) {
  .cta { gap: 1rem; padding: 0 1.1rem 0 1.25rem; font-size: .9375rem; letter-spacing: .06em; }
}
@media (max-width: 359px) {
  :root { --L: 380px; }
  .heading, .closing .heading { font-size: 1.3rem; }
  .label { letter-spacing: .12em; }
  .label::before { width: 16px; }
  .sample-note strong { font-size: 1.2rem; }
  .cta { gap: 1rem; padding: 0 1.1rem 0 1.25rem; font-size: .9375rem; letter-spacing: .06em; }
  .publisher { font-size: .9375rem; letter-spacing: .2em; }
  .site-header nav { font-size: .75rem; letter-spacing: .04em; }
}