/* crownless — 紋章と招待状
   白い紙に黒いインク。差し色のワインレッド（封蝋の色）は購入ボタンだけ。
   ルール：docs/site_rules.md（純黒を使わない／動かすのは transform・opacity だけ／AI感の目印を入れない） */

@font-face { font-family: "Zen Old Mincho"; src: url("../fonts/ZenOldMincho-400.subset.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-300.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* 太さを変えられるフォント */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }

:root {
  --paper: #ffffff;
  --ink: #1d1d1b;
  --muted: #6b6b68;
  --rule: rgba(29, 29, 27, 0.32);
  --rule-soft: rgba(29, 29, 27, 0.13);
  --slot: #efefed;
  --seal: #6b2130;          /* 封蝋のワインレッド。購入ボタンだけに使う */
  --seal-deep: #561a26;

  --font-ja: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Cormorant Garamond", "Baskerville", "Times New Roman", serif;

  --fs-body: clamp(15px, 0.88rem + 0.15vw, 16.5px);
  --gutter: clamp(20px, 5vw, 56px);
  --space: clamp(88px, 13vw, 150px);
  --cover-gap: clamp(20px, 2.4vw, 36px);  /* 表紙の枠と画面の端のあいだ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; word-break: auto-phrase; }
p, li, dd { text-wrap: pretty; line-break: strict; }
/* 真ん中寄せの短い文は、文節で折り返して行の長さをそろえる */
.invite p, .word p, .buy-note, .letter-body.is-center p, .cover-ja { word-break: auto-phrase; text-wrap: balance; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.en { font-family: var(--font-en); font-style: italic; font-weight: 300; letter-spacing: 0.01em; }

/* 紋章のひし形（ロゴの王冠の3つのダイヤから） */
.diamond, .section-title::before, .section-title::after, .invite-terms li + li::before, .plain li::before {
  content: ""; display: block; width: 5px; height: 5px; background: var(--ink); transform: rotate(45deg);
}

/* ---------- ヘッダー（固定しない） ---------- */
.site-head { text-align: center; padding: calc(env(safe-area-inset-top) + 22px) var(--gutter) 0; }
.site-crest { display: inline-block; }
.site-crest img { width: 28px; margin: 0 auto 12px; }
.site-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3em 1.7em; }
.site-nav a { display: inline-block; padding: 4px 0; font-size: 13.5px; letter-spacing: 0.14em; color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
/* スマホは5つを1行に詰めず、幅をしぼって「3つ＋2つ」の2段にそろえる */
@media (max-width: 480px) {
  .site-nav ul { max-width: 272px; margin: 0 auto; gap: 0.1em 1.2em; }
  .site-nav a { font-size: 13px; letter-spacing: 0.08em; }
}
.site-nav a[aria-current="page"] { text-decoration: underline; }
/* 下の二重線（招待状の罫） */
.site-head:not(.is-top)::after {
  content: ""; display: block; width: min(100%, 1120px); height: 4px; margin: 18px auto 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-soft);
}
/* トップはヘッダーを表紙の枠の中に置く */
.site-head.is-top { position: absolute; inset: calc(env(safe-area-inset-top) + var(--cover-gap) + 22px) 0 auto 0; z-index: 2; padding-top: 0; }

/* ---------- 表紙 ---------- */
/* 表紙：画面いっぱいの枠。画面の端からの余白（--cover-gap）を少しとって枠を締める */
.cover { padding: var(--cover-gap); min-height: var(--cover-h, 100svh); display: grid; } /* --cover-h は site.js が開いたときの画面の高さで入れる */
.cover-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 120px 24px 96px;
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--rule-soft);
}
.corner { position: absolute; width: 9px; height: 9px; background: var(--ink); transform: rotate(45deg); }
.corner.tl { top: -5px; left: -5px; } .corner.tr { top: -5px; right: -5px; }
.corner.bl { bottom: -5px; left: -5px; } .corner.br { bottom: -5px; right: -5px; }
.cover-logo img { width: clamp(236px, 64vw, 560px); margin: 0 auto; }
.rule-short { display: block; width: 48px; height: 1px; background: var(--ink); margin: clamp(30px, 4vw, 44px) auto clamp(26px, 3.4vw, 38px); }
.cover-line { font-size: clamp(27px, 1rem + 2.3vw, 46px); line-height: 1.25; }
.cover-ja { margin-top: 1.4em; font-size: 14.5px; letter-spacing: 0.24em; color: var(--muted); }

/* ---------- 招待状のカード（1st drop の案内） ---------- */
.invite {
  position: relative;
  width: min(100% - 2 * var(--gutter), 560px);
  margin: var(--space) auto;
  padding: 72px 24px 48px;
  border: 1px solid var(--rule);
  text-align: center;
}
.invite.is-head { margin-top: clamp(72px, 10vw, 110px); }
.invite-crest {
  position: absolute; top: 0; left: 50%;
  width: 52px; box-sizing: content-box; padding: 0 16px;
  background: var(--paper);
  transform: translate(-50%, -50%);
}
.invite-title { font-size: clamp(46px, 1.6rem + 3vw, 68px); line-height: 1; }
.invite-what { margin-top: 18px; font-size: 15px; letter-spacing: 0.2em; }
.invite-terms { list-style: none; padding: 0; margin: 30px 0 36px; font-size: 17px; letter-spacing: 0.14em; line-height: 1.7; }
.invite-terms li + li::before { margin: 14px auto; }
.invite-note { margin-top: 32px; font-size: 14px; line-height: 2.1; color: var(--muted); }
.invite.is-head .invite-terms { margin-bottom: 0; }

/* ---------- 購入ボタン（封蝋の色。1画面に1つ） ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 2.8em;
  background: var(--seal); color: #fff;
  border: 1px solid var(--seal);
  box-shadow: inset 0 0 0 3px var(--seal), inset 0 0 0 4px rgba(255, 255, 255, 0.5);
  font-size: 15px; letter-spacing: 0.22em; text-decoration: none;
  transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.cta[href]:hover { background: var(--seal-deep); box-shadow: inset 0 0 0 3px var(--seal-deep), inset 0 0 0 4px rgba(255, 255, 255, 0.5); }
.cta[href]:active { transform: translateY(1px); }
/* 予約が始まるまでは押せない（枠だけ） */
.cta[aria-disabled="true"] { background: transparent; color: var(--seal); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(107, 33, 48, 0.35); cursor: default; }

.text-link { letter-spacing: 0.14em; }

/* ---------- 写真（額装：細い線の内側に写真） ---------- */
.plate { width: min(100% - 2 * var(--gutter), 1080px); margin: 0 auto; padding: 12px; border: 1px solid var(--rule-soft); }
.photo-slot { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--slot); color: var(--muted); font-size: 13px; letter-spacing: 0.08em; padding: 1em; text-align: center; }
@media (min-width: 960px) { .photo-slot.is-wide { aspect-ratio: 3 / 2; } }

/* ---------- ひとこと ---------- */
.word { width: min(100% - 2 * var(--gutter), 34em); margin: var(--space) auto 0; text-align: center; }
.word p { line-height: 2.2; }
.word p + p { margin-top: 1.4em; }
.word .word-more { margin-top: 2.2em; }

/* ---------- 見出し（左右にひし形） ---------- */
.section-title { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 36px; font-size: clamp(18px, 1rem + 0.5vw, 22px); letter-spacing: 0.24em; }
.page-title { font-size: clamp(20px, 1rem + 0.8vw, 26px); letter-spacing: 0.26em; text-align: center; }
/* 見出しの広い字間は和文用。英字（crownless）は間延びするので詰める */
.section-title .latin, .page-title .latin { letter-spacing: 0.04em; }

/* ---------- 商品 ---------- */
.item { width: min(100% - 2 * var(--gutter), 1120px); margin: var(--space) auto 0; display: grid; gap: 36px; }
.item-photo { padding: 10px; border: 1px solid var(--rule-soft); }
.item-kind { text-align: center; font-size: 14px; letter-spacing: 0.18em; color: var(--muted); }
.item-name { margin-top: 6px; text-align: center; font-size: clamp(22px, 1rem + 1vw, 28px); letter-spacing: 0.16em; line-height: 1.6; }
.item-price { margin-top: 8px; text-align: center; font-size: 17px; letter-spacing: 0.08em; }
.item-price small { font-size: 13px; color: var(--muted); }
.buy { display: grid; gap: 14px; margin: 30px 0 36px; }
.buy .cta { width: 100%; }
.buy-size { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.buy-size span { font-size: 14px; letter-spacing: 0.14em; color: var(--muted); }
.buy-size select {
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; letter-spacing: 0.1em;
  padding: 12px 26px 12px 0; text-align: right; text-align-last: right; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 9px) 54%, calc(100% - 4px) 54%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.buy-note { font-size: 13.5px; line-height: 1.9; color: var(--muted); text-align: center; }

@media (min-width: 960px) {
  .item { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .item.is-reverse .item-photo { grid-column: 2; grid-row: 1; }
  .item.is-reverse .item-info { grid-column: 1; grid-row: 1; }
  .item-info { position: sticky; top: 32px; padding-top: 24px; }
}

/* 開閉（詳細・サイズ・配送と返品・よくある質問） */
details { border-top: 1px solid var(--rule-soft); }
details:last-of-type { border-bottom: 1px solid var(--rule-soft); }
summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 16px 0; cursor: pointer; letter-spacing: 0.12em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-en); font-weight: 300; font-size: 24px; line-height: 1; color: var(--muted); }
details[open] summary::after { content: "\2212"; }
details > :not(summary) { margin-bottom: 20px; }
details p { font-size: 15px; }

.spec div, .rows div { display: grid; grid-template-columns: 7.5em 1fr; gap: 1em; padding: 9px 0; border-top: 1px solid var(--rule-soft); }
.spec div:first-child { border-top: 0; }
.spec dt, .rows dt { font-size: 14px; color: var(--muted); letter-spacing: 0.08em; }
.spec dd, .rows dd { font-size: 14.5px; }

.table-wrap { overflow-x: auto; }
.size-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.size-table caption { caption-side: top; text-align: right; font-size: 12.5px; color: var(--muted); padding-bottom: 4px; }
.size-table th, .size-table td { padding: 10px 4px; text-align: center; border-bottom: 1px solid var(--rule-soft); font-weight: 400; }
.size-table thead th { font-size: 13px; color: var(--muted); border-bottom-color: var(--rule); }
.size-table tbody th { font-family: var(--font-en); font-size: 17px; }
.fine { margin-top: 10px; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* ---------- 素材と作り方 ---------- */
.making { width: min(100% - 2 * var(--gutter), 640px); margin: var(--space) auto 0; }
.making h3 { margin: 40px 0 10px; font-size: 14px; letter-spacing: 0.22em; color: var(--muted); }
.making h3:first-child { margin-top: 0; }
.making p + p { margin-top: 1em; }

/* ---------- 手紙のページ（名前の由来・アーカイブ） ---------- */
.letter { width: min(100% - 2 * var(--gutter), 600px); margin: clamp(64px, 10vw, 120px) auto 0; }
.letter-head { text-align: center; }
.letter-en { margin-top: 32px; font-size: clamp(28px, 1.1rem + 2.2vw, 44px); line-height: 1.25; }
.letter-body { margin-top: 56px; line-height: 2.15; }
.letter-body p + p { margin-top: 1.5em; }
.letter-body.is-center { text-align: center; }
.letter.is-short .letter-body { margin-top: 40px; }

/* ---------- 文書のページ（ガイド・特商法・プライバシー） ---------- */
.doc { width: min(100% - 2 * var(--gutter), 720px); margin: clamp(64px, 10vw, 120px) auto 0; }
.doc-head { text-align: center; }
.doc-toc ul { list-style: none; padding: 0; margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4em 1.5em; }
.doc-toc a { font-size: 14px; color: var(--muted); letter-spacing: 0.1em; text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.doc-toc a:hover { color: var(--ink); }
.doc section { margin-top: clamp(64px, 10vw, 104px); scroll-margin-top: 24px; }
.doc section > p + p, .doc section > p + .table-wrap, .doc .table-wrap + .fine + p { margin-top: 1em; }
.doc .rows { margin-top: 1em; border-bottom: 1px solid var(--rule-soft); }
.doc-head + .rows { margin-top: 48px; }
.rows.is-legal div { grid-template-columns: 10em 1fr; }
@media (max-width: 599px) {
  .rows div, .rows.is-legal div { grid-template-columns: 1fr; gap: 0; }
}
.plain { list-style: none; padding: 0; }
.plain li { position: relative; padding-left: 1.4em; }
.plain li + li { margin-top: 0.7em; }
.plain li::before { position: absolute; left: 2px; top: 0.85em; width: 4px; height: 4px; }

/* ---------- フッター ---------- */
.site-foot { margin-top: var(--space); padding: 0 var(--gutter) calc(env(safe-area-inset-bottom) + 40px); text-align: center; }
.site-foot::before {
  content: ""; display: block; width: min(100%, 1120px); height: 4px; margin: 0 auto 56px;
  border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule);
}
.foot-logo { display: inline-block; }
.foot-logo img { width: 128px; }
.foot-links { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3em 1.6em; }
.foot-links a { font-size: 13.5px; color: var(--muted); text-decoration: none; letter-spacing: 0.08em; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-credit { margin-top: 30px; font-family: var(--font-en); font-weight: 400; font-size: 15px; letter-spacing: 0.06em; color: var(--muted); }
.foot-copy { margin-top: 2px; font-family: var(--font-en); font-size: 13px; color: var(--muted); }

/* ---------- 動き（表紙を開くときだけ） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cover-logo, .cover-line, .cover-ja { animation: rise 1100ms var(--ease-out) both; }
  .cover-line { animation-delay: 220ms; }
  .cover-ja { animation-delay: 360ms; }
  .rule-short { animation: draw 900ms var(--ease-out) 120ms both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes draw { from { transform: scaleX(0); } }
}