/**
 * POKERS Base & Typography Foundation
 *
 * Phase 1 の範囲：リセット、基本タイポグラフィ、ブランドタイポグラフィ、
 * 数字の表示、日本語と英字の調和。
 * 個別コンポーネントのデザインは Phase 2 以降。
 */

/* ---------------------------------------------------------------------------
 * 1. Reset
 * ------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--surface-light);
	color: var(--color-black);
	font-family: var(--font-sans);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--leading-jp);
	letter-spacing: var(--tracking-jp);
	font-feature-settings: "palt" 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

a {
	color: inherit;
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
	transition: color var(--duration-fast) ease;
}

a:hover {
	color: var(--accent);
}

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

::selection {
	background-color: var(--color-red);
	color: var(--surface-raised);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Headings
 *
 * テック系ではなく「スポーツ × エンタメ × エディトリアル」の印象を優先する。
 * ウェイトは 600〜800、トラッキングはタイト、行間はコンパクト。
 * 日本語見出しでは "palt" を有効にして詰まりを作る。
 * ------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-s);
	font-family: var(--font-display);
	font-feature-settings: "palt" 1;
	text-wrap: balance;
}

h1 {
	font-size: var(--text-h1);
	font-weight: var(--weight-black);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tighter);
}

h2 {
	font-size: var(--text-h2);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
}

h3 {
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-tight);
}

h4 {
	font-size: var(--text-h4);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-tight);
}

h5,
h6 {
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* 英字だけの見出しはさらに強く詰める（POKERSの大文字表現）。 */
.u-display,
.is-latin {
	font-family: var(--font-display);
	font-feature-settings: "palt" 0;
	letter-spacing: var(--tracking-display);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 3. Hero / Display type
 * ------------------------------------------------------------------------- */

.hero-copy {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: var(--weight-black);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}

.hero-copy__ja {
	display: block;
	margin-top: var(--space-xs);
	font-family: var(--font-jp);
	font-size: var(--text-lead);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-jp);
	text-transform: none;
}

.section-title {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--weight-black);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tighter);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 4. Brand typography
 *
 * ロゴまわりは本文用の設定と切り離し、display typography として扱う。
 * ------------------------------------------------------------------------- */

.brand-wordmark {
	font-family: var(--font-display);
	font-weight: var(--weight-black);
	letter-spacing: var(--tracking-display);
	line-height: var(--leading-none);
	text-transform: uppercase;
}

/* 「MORE THAN A GAME.」：ブランドを象徴するコピー。本文用Interとは別扱い。 */
.brand-tagline {
	font-family: var(--font-display);
	font-size: var(--text-meta);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-brand);
	line-height: var(--leading-none);
	text-transform: uppercase;
	text-indent: var(--tracking-brand); /* 末尾トラッキング分の見た目の偏りを打ち消す。 */
}

/* 「JAPAN'S POKER ENTERTAINMENT MEDIA」 */
.brand-descriptor {
	font-family: var(--font-display);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-descriptor);
	line-height: var(--leading-snug);
	text-transform: uppercase;
	text-indent: var(--tracking-descriptor);
}

/* 「ポーカーを、カルチャーに。」 */
.brand-tagline-ja {
	font-family: var(--font-jp);
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	letter-spacing: 0.12em;
	line-height: var(--leading-snug);
}

/* ---------------------------------------------------------------------------
 * 5. Navigation / labels
 * ------------------------------------------------------------------------- */

.nav-link {
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-nav);
	line-height: var(--leading-none);
	text-transform: uppercase;
	text-decoration: none;
}

/* セクションバッジ（NEWS / PLAYERS …）、PICK UP などの小ラベル。 */
.label,
.eyebrow {
	font-family: var(--font-display);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	line-height: var(--leading-none);
	text-transform: uppercase;
	text-indent: var(--tracking-label);
}

.meta {
	font-family: var(--font-sans);
	font-size: var(--text-meta);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	line-height: var(--leading-snug);
	color: var(--color-mid-gray);
}

/* ---------------------------------------------------------------------------
 * 6. Numerals
 *
 * 大会結果・スコア・日付・統計で桁が揃うようにする。
 * ------------------------------------------------------------------------- */

.u-tabular,
time,
.meta time,
.stat,
.score,
.result-table td,
.result-table th {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

.stat,
.score {
	font-family: var(--font-display);
	font-size: var(--text-stat);
	font-weight: var(--weight-black);
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-tighter);
}

.stat__unit,
.score__max {
	font-size: 0.4em;
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	color: var(--color-mid-gray);
}

/* ---------------------------------------------------------------------------
 * 7. Body text（日本語と英字の調和）
 *
 * 日本語は Noto Sans JP、英数字は Inter が当たる。
 * 英字だけが浮かないよう、行間・字間は日本語基準に寄せる。
 * ------------------------------------------------------------------------- */

p,
li,
dd,
dt,
figcaption,
blockquote {
	font-family: var(--font-sans);
}

p {
	margin: 0 0 var(--space-s);
	line-height: var(--leading-jp);
	letter-spacing: var(--tracking-jp);
}

.lead {
	font-size: var(--text-lead);
	font-weight: var(--weight-medium);
	line-height: var(--leading-relaxed);
	letter-spacing: var(--tracking-jp);
}

.entry-content {
	max-width: var(--measure-text);
}

.entry-content > * + * {
	margin-top: var(--space-s);
}

blockquote {
	margin: var(--space-m) 0;
	padding-left: var(--space-s);
	border-left: var(--rule-accent) solid var(--accent);
	font-size: var(--text-lead);
	font-weight: var(--weight-medium);
	line-height: var(--leading-relaxed);
}

figcaption {
	font-size: var(--text-meta);
	line-height: var(--leading-normal);
	color: var(--color-mid-gray);
}

small {
	font-size: var(--text-meta);
	line-height: var(--leading-normal);
}

hr {
	height: 0;
	margin: var(--space-l) 0;
	border: 0;
	border-top: var(--rule-hairline) solid var(--color-light-gray);
}

/* ---------------------------------------------------------------------------
 * 8. Tone surfaces
 *
 * Editorial は明るい面、Entertainment は暗い面を基調にする（docs/03 §8）。
 * 実際のレイアウトは Phase 2 以降で組む。
 * ------------------------------------------------------------------------- */

.surface-dark {
	background-color: var(--surface-dark);
	color: var(--color-white);
}

.surface-dark .meta,
.surface-dark figcaption {
	color: var(--color-light-gray);
}

.surface-light {
	background-color: var(--surface-light);
	color: var(--color-black);
}

/* ---------------------------------------------------------------------------
 * 9. Utilities
 * ------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.u-container {
	width: min(100% - (var(--gutter) * 2), var(--wide-size));
	margin-inline: auto;
}

.u-measure {
	max-width: var(--measure-text);
}

.u-accent {
	color: var(--accent);
}