/* style.css -- 1440 Works 公式サイト。
 *
 * 4色しか使わない。アクセント(--accent)は「今動くもの」だけ — リンク、フォーカスリング、
 * 選択中の言語ボタン。区切り線や見出しには使わない(設計書 §5.1)。
 *
 * ダークトーン単一。prefers-color-scheme によるライト対応は意図的にしない。
 * Webフォントは読み込まない(設計書 §5.2 / 成功条件4)。 */

:root {
  --bg: #0B0B0C;
  --fg: #E8E6E1;
  --dim: #8A8781;
  --accent: #FFB000;
  /* 日本語・韓国語のフォールバックまで明示する。外部フォントは読み込まない。 */
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
    "BIZ UDGothic", "Noto Sans Mono CJK JP", "Hiragino Sans",
    "Malgun Gothic", "Apple SD Gothic Neo", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- header ---- */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 68ch;
  margin: 0 auto;
  padding: 24px;
}

.brand { font-size: 13px; letter-spacing: 0.18em; color: var(--fg); }

.lang-switch { display: flex; gap: 8px; }

.lang-switch a {
  padding: 4px 6px;
  font-size: 12px;
  color: var(--dim);
  text-decoration: none;
}

.lang-switch a.active { color: var(--accent); }

/* ---- lang notice ---- */
.lang-notice {
  max-width: 68ch;
  margin: 0 auto;
}

.lang-notice-item {
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid rgba(232, 230, 225, 0.08);
  font-size: 13px;
  color: var(--dim);
}

/* ---- hero ---- */
.hero { max-width: 68ch; margin: 0 auto; padding: 96px 24px 120px; }

.hero-num {
  margin: 0 0 40px;
  font-size: clamp(72px, 22vw, 220px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--fg);
}

.hero-line { margin: 0; font-size: clamp(15px, 2.4vw, 20px); }

.hero-line--last { margin-top: 24px; color: var(--dim); }

/* ---- sections ---- */
.section {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.kicker {
  margin: 0 0 24px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--dim);
}

/* ---- works ---- */
.work-title { margin: 0 0 16px; font-size: 20px; letter-spacing: 0.04em; }

.work-shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 16px;
  border: 1px solid rgba(232, 230, 225, 0.13);
  image-rendering: pixelated;
}

.work-desc { margin: 0 0 16px; }

.work-links { margin: 0; display: flex; flex-wrap: wrap; gap: 24px; }

/* ---- about ---- */
.about-body { margin: 0; }

/* ---- contact ---- */
.contact-intro { margin: 0 0 32px; color: var(--dim); }

.field { margin-bottom: 24px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--dim);
}

.field input,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(232, 230, 225, 0.04);
  border: 1px solid rgba(232, 230, 225, 0.13);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
}

.field textarea { resize: vertical; }

.contact-form button[type="submit"] {
  padding: 12px 32px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.18em;
  cursor: pointer;
}

.contact-form button[type="submit"][disabled] { opacity: 0.5; cursor: default; }

.contact-result { margin: 24px 0 0; font-size: 14px; color: var(--dim); }

.contact-result.is-error { color: var(--fg); }

/* ハニーポット: 画面外へ。display:none だと埋めないボットがいるため、
   描画はさせたまま視界と読み上げから外す。 */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- footer ---- */
.footer {
  max-width: 68ch;
  margin: 0 auto;
  padding: 48px 24px 64px;
  border-top: 1px solid rgba(232, 230, 225, 0.08);
  font-size: 12px;
  color: var(--dim);
}

.footer p { margin: 0 0 8px; }

@media (max-width: 480px) {
  .hero { padding: 64px 20px 80px; }
  .topbar, .section, .footer, .lang-notice-item { padding-left: 20px; padding-right: 20px; }
}