/* MESTÉA — base.css
   トークン・タイポグラフィ・骨格。配色は「白い石灰の地面・琥珀の樹脂・フロストの容器」。
   色は素の :root で全部定義し、ダーク/ライトの切替では同じ名前を再定義するだけにする。 */

:root {
  /* 地面 */
  --ground: #F1F2EC;      /* チョークホワイト：白い石灰の地面 */
  --surface: #F8F8F4;
  --sunken: #E6E7DF;
  /* 文字 */
  --ink: #1A1E16;         /* オリーブ黒 */
  --body: #2F3429;
  --muted: #6B7060;
  --rule: #D5D7CC;
  /* 樹脂 */
  --resin: #A3741F;       /* レジンアンバー */
  --resin-dim: #8A6219;
  --on-resin: #FFFDF6;

  /* 書体 */
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-display: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* 寸法 */
  --measure: 34rem;         /* 本文の行長（和文 ~36 字） */
  --wide: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: clamp(5rem, 14vh, 9rem);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 900ms;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #12150E;
    --surface: #1A1E16;
    --sunken: #0C0E09;
    --ink: #EBEDE3;
    --body: #CFD2C4;
    --muted: #8C9080;
    --rule: #2C3127;
    --resin: #D4A74E;
    --resin-dim: #B08A3C;
    --on-resin: #12150E;
  }
}

:root[data-theme="dark"] {
  --ground: #12150E;
  --surface: #1A1E16;
  --sunken: #0C0E09;
  --ink: #EBEDE3;
  --body: #CFD2C4;
  --muted: #8C9080;
  --rule: #2C3127;
  --resin: #D4A74E;
  --resin-dim: #B08A3C;
  --on-resin: #12150E;
}

/* ---- リセット（最小） ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.9;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--resin); text-underline-offset: .2em; }
a:hover { color: var(--resin-dim); }
:focus-visible { outline: 2px solid var(--resin); outline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---- タイポグラフィ ---- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.25; }
h2 { font-size: clamp(2.6rem, 2rem + 3vw, 5.2rem); line-height: 1.3; letter-spacing: .06em; font-weight: 300; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
p { margin: 0 0 1.4em; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--resin-dim);
  margin: 0 0 var(--space-2);
}
.muted { color: var(--muted); }
small, .small { font-size: .85em; }

/* ---- 骨格 ---- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.measure { max-width: var(--measure); }
.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--ground); padding: .5rem 1rem; z-index: 100;
}
.skip:focus { left: var(--gutter); }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--space-3) var(--gutter);
  color: var(--ink);                    /* 既定＝墨。序幕・夜の幕の上では is-night で白 */
  transition: padding 400ms var(--ease), color 400ms var(--ease);
}
.site-header > a { grid-column: 2; }
.site-header .wordmark { width: clamp(11rem, 22vw, 17rem); height: auto; color: inherit; transition: width 400ms var(--ease); }
.site-header .harvest {
  grid-column: 3; justify-self: end; margin: 0;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; white-space: nowrap;
  opacity: 0; transition: opacity 900ms var(--ease);
}
html { scroll-padding-top: 5.5rem; }
.site-header.is-compact { padding-block: var(--space-2); color: var(--ink); background: var(--ground); }
.site-header.is-compact.is-night { background: transparent; }
.site-header.is-compact .wordmark { width: 9rem; }
.site-header.is-compact .harvest { opacity: .8; }
.site-header.is-night { color: #F1F2EC; }
@media (max-width: 40rem) { .site-header .harvest { display: none; } }

main { min-height: 40vh; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding: var(--space-4) var(--gutter) var(--space-3);
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.8;
}
.site-footer .wrap { display: grid; gap: var(--space-2); }
.site-footer .wordmark { width: 7rem; color: var(--ink); }
.site-footer nav a { margin-right: 1.5em; }
.site-footer p { margin: 0; }

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