:root {
  /* 地の色：--t が 0 で墨、1 で生成り。トップページだけ表紙の位置に合わせて scroll.js が動かす */
  --t: 1;
  --tt: 1;
  --paper-day: #f2ece2;
  --paper-night: #11100f;
  --ink-day: #1f1d1a;
  --ink-night: #ece6dc;
  --ink-2-day: rgba(31, 29, 26, 0.58);
  --ink-2-night: rgba(236, 230, 220, 0.6);
  --rule-day: rgba(31, 29, 26, 0.16);
  --rule-night: rgba(236, 230, 220, 0.16);
  --paper: color-mix(in srgb, var(--paper-day) calc(var(--t) * 100%), var(--paper-night));
  --ink: color-mix(in srgb, var(--ink-day) calc(var(--tt) * 100%), var(--ink-night));
  --ink-2: color-mix(in srgb, var(--ink-2-day) calc(var(--tt) * 100%), var(--ink-2-night));
  --rule: color-mix(in srgb, var(--rule-day) calc(var(--tt) * 100%), var(--rule-night));
  --sheet: #faf7f1;
  /* 調整パネル（tools/tune.js）で動かす値。保存するとここが書き換わる */
  --font-en: "JetBrains Mono";
  --font-ja: "Shippori Mincho";
  --font-ja-latin: "IBM Plex Sans";
  --size-body: 16px;
  --line: 1.7;
  --track-en: 0.01em;
  --track-ja: 0.04em;
  --size-h1: 20px;
  --size-sub: 15px;
  --size-label: 15px;
  --track-label: 0.12em;
  --size-small: 12px;
  --wordmark-h: 22px;
  --divider-alpha: 0.32;
  --hero-text: 25%;
  --section-pad: 12;
  --main-start: 4;
  --main-span: 7;
  --u: 8px;
  --mono: var(--font-en), var(--font-ja), monospace;
  --ja: var(--font-ja-latin), var(--font-ja), sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
html.has-hero { --t: 0; --tt: 0; background: var(--paper-night); }   /* 上下に引っぱったときの余白も墨（表紙とフッターに合わせる） */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--size-body);
  line-height: var(--line);
  letter-spacing: var(--track-en);
  word-break: auto-phrase;
}
html[data-lang="ja"] body { font-family: var(--ja); letter-spacing: var(--track-ja); }
html[data-lang="en"] [lang="ja"], html[data-lang="ja"] [lang="en"] { display: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; }

/* 小さな見出し：全ページで同じ見た目＝節の名前 */
.label {
  font-family: var(--mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 calc(var(--u) * 2);
  font-weight: 400;
}
html[data-lang="ja"] .label:lang(ja) { letter-spacing: calc(var(--track-label) + 0.08em); text-transform: none; font-family: var(--ja); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--u) * 3); }

/* 言語の切替 */
.lang {
  position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 3); z-index: 2;
  display: flex; gap: var(--u);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
}
.lang button {
  font: inherit; color: var(--ink-2); background: none; border: 0; padding: var(--u) 2px; cursor: pointer;
}
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* フッターの切替：右上と同じ見た目で、流れの中に置く */
.lang--footer { position: static; margin: 0 0 var(--u) -2px; }
/* 言語を切り替えるときは、文字をふっと消して入れ替え、ふっと戻す（lang.js） */
/* 写真や図はそのまま、言語で入れ替わる文字だけを淡くする（全体を消すとフラッシュのように見えた） */
body [lang] { transition: opacity 0.9s ease-out; }                                   /* 戻るとき：ゆっくり */
html.lang-fading body [lang] { opacity: 0; transition: opacity 0.45s ease-in-out; }   /* 消えるとき */
@media (prefers-reduced-motion: reduce) { body [lang] { transition: none; } }

/* 表紙：Instagram の3枚と同じ図（墨の地に星図、中央に画面）。PC は3枚続き、文字は左の1枚に重ねる */
.hero { position: relative; }
.hero__plate { width: 100%; height: auto; aspect-ratio: 9 / 4; }
.hero__text {
  position: absolute; left: 0; bottom: 0; top: 0;
  width: 33.33%;
  padding: calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 4) max(calc(var(--u) * 4), calc((100vw - 1200px) / 2 + 24px));
  display: flex; flex-direction: column; justify-content: center;
}
/* ロゴは文字の色で塗る（地の色が変わっても追従する） */
.wordmark {
  display: block; height: var(--wordmark-h); aspect-ratio: 725 / 225;
  background: var(--ink);
  -webkit-mask: url(assets/wordmark.png) no-repeat left center / contain;
  mask: url(assets/wordmark.png) no-repeat left center / contain;
}
.hero h1 { font-size: var(--size-h1); font-weight: 400; line-height: 1.6; margin: calc(var(--u) * 4) 0 var(--u); }
.hero .sub { color: var(--ink-2); margin: 0 0 calc(var(--u) * 3); font-size: var(--size-sub); }
.store {
  display: inline-flex; align-items: center; gap: var(--u);
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 6px 16px; font-size: 12px; letter-spacing: 0.04em; text-decoration: none;
  align-self: flex-start;
}
.store[aria-disabled="true"] { color: var(--ink-2); border-color: var(--rule); cursor: default; }
.caption { font-size: var(--size-small); color: var(--ink-2); letter-spacing: 0.04em; }

/* 本文の節 */
section { padding: calc(var(--u) * var(--section-pad)) 0; border-top: 1px solid var(--rule); }
/* 「光あふれるカメラ」より後の節の区切り：星図の線（墨1色の型を文字の色で薄く塗る）。目立たせない */
main section + section { border-top: 0; position: relative; }
main section + section::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: min(100% - calc(var(--u) * 6), 1200px - calc(var(--u) * 6));
  aspect-ratio: 2400 / 203;
  background: var(--ink); opacity: var(--divider-alpha);
  -webkit-mask: url(assets/divider-b.png) no-repeat center / 100% 100%;
  mask: url(assets/divider-b.png) no-repeat center / 100% 100%;
  pointer-events: none;
}
.cols { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: calc(var(--u) * 3); }
.cols > .side { grid-column: 1 / span 3; }
.cols > .main { grid-column: var(--main-start) / span var(--main-span); }
.main p { margin: 0 0 calc(var(--u) * 2); max-width: 40em; }

/* 定規の表のあとの段落と、価格の一行（節にせず、フッターの手前に置く） */
.main .after { margin-top: calc(var(--u) * 5); }
.price { padding: calc(var(--u) * 6) calc(var(--u) * 3) calc(var(--u) * 10); }
.price p { margin: 0; }

/* 観測記録：写真は白い台紙に。大きさは重みで変える */
.obs { display: grid; grid-template-columns: repeat(12, 1fr); gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 5); }
.obs figure { margin: 0; }
.obs .big { grid-column: 1 / span 7; grid-row: span 2; }
.obs .small { grid-column: 8 / span 4; }
.print { background: var(--sheet); padding: calc(var(--u) * 2); }
.print img, .pending { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.pending {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--rule); color: var(--ink-2); font-size: 11px; letter-spacing: 0.08em;
}
/* 観測記録の撮影者（写真の並びの下に1行） */
.credit { text-align: right; margin: calc(var(--u) * 4) calc((100% + var(--u) * 3) / 12) 0 0; font-size: var(--size-small); color: var(--ink-2); letter-spacing: 0.06em; }
figcaption { margin-top: var(--u); font-size: var(--size-small); color: var(--ink-2); letter-spacing: 0.06em; }

/* 使い方：左に操作の動画、右に説明と3本の定規の表。動画は表の線と同じ細い枠の角丸（音なし・繰り返し。画面に入ったときだけ再生＝scroll.js） */
.howto .howto__body { grid-column: var(--main-start) / span 8; display: grid; grid-template-columns: 34% 1fr; column-gap: calc(var(--u) * 5); align-items: start; }
.howto__text .rulers { margin-top: calc(var(--u) * 3); }
.demo { margin: 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.demo video { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1398; background: var(--paper-night); }

/* 三本の定規：目録の表 */
.rulers { margin: calc(var(--u) * 4) 0 0; padding: 0; }
.rulers div { display: grid; grid-template-columns: 9em 1fr; padding: calc(var(--u) * 1.5) 0; border-top: 1px solid var(--rule); }
.rulers div:last-child { border-bottom: 1px solid var(--rule); }
.rulers dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.rulers dd { margin: 0; }

/* フッター：表紙と同じ墨の地。上端は表紙と本文の境と同じ1本線 */
footer {
  border-top: 1px solid var(--rule);
  --ink: var(--ink-night); --ink-2: var(--ink-2-night); --rule: var(--rule-night);
  /* 図版の左下（渦と縮尺）を、表紙と同じ墨と生成り・控えめなコントラストで敷く */
  background: var(--paper-night) url(assets/footer-plate.jpg) no-repeat left bottom / cover;
  color: var(--ink);
  min-height: min(36vw, 560px);
  padding: calc(var(--u) * 8) 0 calc(var(--u) * 10); font-size: 12px; }
footer .cols > div { grid-column: span 3; }
footer p { margin: 0 0 var(--u); }
footer .icon { width: 40px; height: 40px; border-radius: 9px; }

/* 文書ページ（プライバシー） */
.doc { padding: calc(var(--u) * 12) 0; }
.doc h1 { font-size: var(--size-h1); font-weight: 400; margin: calc(var(--u) * 5) 0 calc(var(--u) * 4); }
.doc h2 { font-size: 13px; font-weight: 400; margin: calc(var(--u) * 5) 0 var(--u); }
.doc p { margin: 0 0 calc(var(--u) * 2); max-width: 40em; }

/* 図の左の余白に文字が収まらない幅では、文字を図の下へ */
@media (max-width: 1000px) {
  .hero__text { position: static; width: auto; display: flex; flex-direction: column; padding: calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 6); }
}

@media (max-width: 760px) {
  .wrap { padding: 0 calc(var(--u) * 2); }
  .lang { right: calc(var(--u) * 2); }
  /* スマホ：中央の1枚（画面）だけ */
  .hero__plate { aspect-ratio: 3 / 4; }
  .hero__text { padding: calc(var(--u) * 5) calc(var(--u) * 2) calc(var(--u) * 6); }
  section { padding: calc(var(--u) * var(--section-pad) * 0.67) 0; }
  .cols > .side, .cols > .main { grid-column: 1 / -1; }
  .price { padding: calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 8); }
  .obs .big, .obs .small { grid-column: 1 / -1; grid-row: auto; }
  .credit { margin-right: 0; }
  .rulers div { grid-template-columns: 7.5em 1fr; }
  /* スマホ：定規の表 → 動画 の順に縦へ */
  .howto .howto__body { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .howto__body .demo { order: 2; width: 72%; margin: calc(var(--u) * 5) auto 0; }
  footer .cols > div { grid-column: 1 / -1; margin-bottom: calc(var(--u) * 3); }
  footer { background-size: 250% auto; padding-bottom: 84vw; }
}