@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/ns-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/ns-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Metric";
  font-style: normal;
  font-weight: 400 700;
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 104%;
  ascent-override: 103%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  --paper: #ffffff;
  --face: #f4f3f0;
  --ink: #111111;
  --soft: #6b6b6b;
  --hl: #0058a3;
  --hl-deep: #003f76;
  --stem: "Noto Sans", "Noto Metric", system-ui, sans-serif;
  --step-cap: 13px;
  --step-body: 16px;
  --step-sub: 20px;
  --step-head: clamp(27px, 3.6vw, 36px);
  --step-disp: clamp(33px, 5.6vw, 51px);
  --gap-1: 8px;
  --gap-2: 16px;
  --gap-3: 24px;
  --gap-6: 48px;
  --gap-10: 80px;
  --gap-15: 120px;
  --curve: 8px;
  --curve-move: 14px;
  --shell: 1280px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--stem);
  font-size: var(--step-body);
  line-height: 1.57;
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3 { font-weight: 700; margin: 0; }
h1 { font-size: var(--step-disp); line-height: 1.02; letter-spacing: -0.029em; }
h2 { font-size: var(--step-head); line-height: 1.08; letter-spacing: -0.027em; }
h3 { font-size: var(--step-sub); line-height: 1.2; letter-spacing: -0.027em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--hl); }

.cm-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.cm-set { padding-block: var(--gap-10); }
.cm-set--lead { padding-block: 40px 72px; }
.cm-set--grid { padding-block: 8px 96px; }
.cm-set--board { padding-block: 64px 72px; background: var(--face); }
.cm-set--reach { padding-block: 88px 40px; }
.cm-set--query { padding-block: 40px 104px; }
.cm-set--page { padding-block: 56px 88px; }

.cm-set__top { max-width: 46em; }
.cm-set__kick {
  font-size: var(--step-cap);
  line-height: 1.4;
  color: var(--soft);
  margin-bottom: var(--gap-2);
}
.cm-set__lede { margin-top: var(--gap-2); color: var(--soft); max-width: 34em; }

.cm-lead { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-3); align-items: stretch; }
.cm-lead__word { max-width: 15em; }
.cm-lead__say { margin-top: var(--gap-3); max-width: 32em; font-size: var(--step-sub); line-height: 1.45; letter-spacing: -0.01em; }
.cm-lead__moves { display: flex; flex-wrap: wrap; gap: var(--gap-3) 28px; margin-top: 36px; }
.cm-lead__panel {
  background: var(--hl);
  color: var(--paper);
  border-radius: var(--curve);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-3);
}
.cm-lead__panel-kick { font-size: var(--step-cap); line-height: 1.4; }
.cm-lead__panel-word { font-size: 27px; line-height: 1.12; letter-spacing: -0.027em; font-weight: 700; margin-top: var(--gap-1); }

.cm-strip { margin-top: var(--gap-6); }
.cm-strip__row { display: flex; flex-wrap: wrap; gap: var(--gap-2); list-style: none; }
.cm-strip__row img { width: 56px; height: 56px; border-radius: var(--curve); }
.cm-strip__note { margin-top: var(--gap-2); font-size: var(--step-cap); line-height: 1.4; color: var(--soft); }

.cm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px var(--gap-3);
  list-style: none;
  margin-top: 40px;
}

.cm-board__hold { overflow-x: auto; margin-top: 32px; }
.cm-board__note { margin-top: var(--gap-3); font-size: var(--step-cap); line-height: 1.5; color: var(--soft); max-width: 46em; }

.cm-foot__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px var(--gap-3); }

.cm-legal { max-width: 44em; }
.cm-legal h2 { margin-top: var(--gap-6); font-size: 26px; }
.cm-legal h3 { margin-top: var(--gap-3); font-size: 18px; }
.cm-legal p, .cm-legal li { margin-top: var(--gap-2); }
.cm-legal ul { padding-left: 22px; }
.cm-legal li { list-style: square; }

@media (max-width: 1000px) {
  .cm-lead { grid-template-columns: 1fr; }
  .cm-lead__panel { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .cm-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-foot__cols { grid-template-columns: 1fr 1fr; }
  .cm-set { padding-block: 64px; }
  .cm-set--board { padding-block: 56px; }
  .cm-set--query { padding-block: 32px 80px; }
}

@media (max-width: 640px) {
  .cm-shell { padding-inline: 20px; }
  .cm-grid { grid-template-columns: 1fr; gap: var(--gap-3); }
  .cm-foot__cols { grid-template-columns: 1fr; gap: 32px; }
  .cm-strip__row img { width: 48px; height: 48px; }
  .cm-lead__moves { gap: var(--gap-2) 24px; }
  .cm-set--lead { padding-block: 24px 56px; }
  .cm-set--grid { padding-block: 0 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}