/* Press kit page. Builds on /style.css (tokens, nav, section heads, footer). */

.site-nav { justify-content: space-between; gap: 16px; }

.pk-nav {
  display: flex;
  gap: clamp(14px, 3vw, 28px);
}

.pk-nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

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

/* ============ HEAD ============ */
.pk-head {
  padding: clamp(120px, 18vh, 170px) clamp(20px, 5vw, 40px) clamp(40px, 6vh, 64px);
}

.pk-kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--accent-soft);
  margin-bottom: 18px;
}

.pk-wordmark {
  display: block;
  width: min(640px, 100%);
  height: auto;
  margin-left: -1.5%;
}

.pk-oneliner {
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.5;
  max-width: 34em;
  margin-top: 22px;
  text-wrap: pretty;
}

.pk-date {
  color: var(--muted);
  margin-top: 10px;
}

.pk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.03em;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: var(--panel-bg);
  transition: background 0.2s, border-color 0.2s;
}

.btn:hover { border-color: var(--accent); background: rgba(0, 200, 255, 0.08); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #01101C;
  font-weight: 600;
}

.btn-primary:hover { background: #5FDDFF; }
.btn-primary span { font-weight: normal; font-size: 12px; opacity: 0.75; }

.pk-usage {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* ============ LAYOUT ============ */
.pk-sect { padding-top: clamp(44px, 7vh, 72px); padding-bottom: clamp(44px, 7vh, 72px); }

.pk-two {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 64px);
}

@media (max-width: 860px) {
  .pk-two { grid-template-columns: minmax(0, 1fr); }
}

.pk-h3, .copyblock h3 {
  font-family: var(--mono);
  font-weight: normal;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.pk-h3 { margin: 44px 0 14px; }

.pk-body { font-size: 15px; color: rgba(234, 246, 255, 0.85); margin-bottom: 14px; }
.pk-muted { color: var(--muted); font-size: 13px; }

/* ============ FACT SHEET ============ */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  font-size: 14px;
}

.facts dt, .facts dd {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-dim);
}

.facts dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 18px;
  padding-top: 11px;
}

.facts a { text-decoration: none; }
.facts a:hover { text-decoration: underline; }

/* ============ COPY BLOCKS ============ */
.copyblock {
  border: 1px solid var(--line-dim);
  background: var(--panel-bg);
  padding: 16px 18px 6px;
  margin-bottom: 14px;
}

.cb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cb-copy {
  font: 11px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  padding: 4px 10px;
  cursor: pointer;
}

.cb-copy:hover { border-color: var(--accent); }

.copyblock p {
  font-size: 15px;
  color: rgba(234, 246, 255, 0.88);
  margin-bottom: 12px;
  text-wrap: pretty;
}

/* ============ FEATURES + PROMISE ============ */
.pk-list { list-style: none; }

.pk-list li {
  position: relative;
  padding: 0 0 14px 20px;
  font-size: 15px;
  color: rgba(234, 246, 255, 0.85);
}

.pk-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

.pk-list strong { color: var(--fg); }

.promise {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 22px;
}

.promise-lines {
  font-family: var(--disp);
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin-bottom: 16px;
}

.promise p:not(.promise-lines) { color: rgba(234, 246, 255, 0.8); font-size: 15px; }

/* ============ STORY ============ */
.story {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 56px);
  margin-top: 22px;
  align-items: start;
}

@media (max-width: 860px) {
  .story { grid-template-columns: minmax(0, 1fr); }
}

.story-text p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(234, 246, 255, 0.86);
  margin-bottom: 16px;
  text-wrap: pretty;
}

.then {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.then img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-dim);
}

.story-shots figcaption, .art figcaption {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}

.table-wrap { overflow-x: auto; }

.evidence {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.evidence th {
  font: 11px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
}

.evidence td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line-dim);
  vertical-align: top;
  color: rgba(234, 246, 255, 0.85);
}

.evidence td:first-child { width: 48%; }

/* ============ QUOTES ============ */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.quotes blockquote {
  border: 1px solid var(--line-dim);
  background: var(--panel-bg);
  padding: 18px 20px;
}

.quotes blockquote p:first-child {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 8px;
}

.q-en { color: rgba(234, 246, 255, 0.72); font-size: 14px; margin-bottom: 10px; }

.quotes cite {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

/* ============ MEDIA ============ */
.trailer video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-dim);
}

.pk-dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  font-size: 14px;
}

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.shots a { display: block; border: 1px solid var(--line-dim); transition: border-color 0.2s; }
.shots a:hover { border-color: var(--accent); }
.shots img { display: block; width: 100%; height: auto; }

.art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 8px;
}

@media (max-width: 700px) {
  .art { grid-template-columns: minmax(0, 1fr); }
}

.art img { display: block; width: 100%; height: auto; border: 1px solid var(--line-dim); }

.checker {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 8%;
  border: 1px solid var(--line-dim);
  background: repeating-conic-gradient(#1a2330 0% 25%, #0f151e 0% 50%) 50% / 24px 24px;
}

.checker img { border: 0; }

.art-icon img { width: min(256px, 60%); }

@media (max-width: 640px) {
  .pk-nav { display: none; }
}

.chart { display: block; margin-top: 22px; }
.chart img { width: 100%; height: auto; display: block; border: 1px solid var(--line-dim); }
.chart:hover img { border-color: var(--accent); }

/* ============ LANGUAGE SWITCH ============ */
.pk-right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
}

.pk-lang {
  display: flex;
  border: 1px solid var(--line);
}

.pk-lang a {
  font: 12px var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 10px;
}

.pk-lang a:hover { color: var(--accent); }
.pk-lang a[aria-current="page"] { background: rgba(0, 200, 255, 0.14); color: var(--fg); }

/* CJK reads better without the wide tracking the Latin labels use */
.lang-cjk .pk-kicker, .lang-cjk .shead .tag, .lang-cjk .pk-nav a,
.lang-cjk .facts dt, .lang-cjk .copyblock h3, .lang-cjk .pk-h3 { letter-spacing: 0.12em; }
.lang-cjk .sect h2 { letter-spacing: 0.08em; }
.lang-cjk .promise-lines { letter-spacing: 0.12em; }
.lang-cjk .story-text p { line-height: 1.9; }
.lang-cjk .pk-oneliner { max-width: 21em; }
.lang-cjk .sect h2 { font-family: var(--body); font-weight: 600; letter-spacing: 0.06em; }
/* Japanese must not fall through to PingFang TC, or kanji render in Chinese forms */
.lang-ja { font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif; }
.lang-ja .sect h2, .lang-ja .pk-list, .lang-ja .copyblock p, .lang-ja .promise-lines { font-family: inherit; }

.pk-lang a { white-space: nowrap; }

@media (max-width: 480px) {
  .site-nav .brand span { display: none; }
  .pk-lang a { padding: 4px 8px; }
}

/* Korean: its own font first, and break lines between words, not inside them */
.lang-ko { font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
.lang-ko .sect h2, .lang-ko .pk-list, .lang-ko .copyblock p { font-family: inherit; }