/* KantanWa support + privacy pages (phantruongthanh.dev/kantanwa/…).
   Standalone on purpose: the main styles.css carries the home page's motion and
   layout. These pages borrow its tokens (paper, ink, emerald), its fonts and its
   header so they read as part of the same site. Light only, no JS, no trackers.
   Text colours are --ink / --ink-2 (≥ 7:1 on --paper); links are a darker
   emerald than the home page's --em-600 so small text clears 4.5:1. */

:root {
  --paper: #fdfcf9; --paper-2: #f4f1ea; --paper-3: #ffffff;
  --rule: #e3dfd5;
  --ink: #131c26; --ink-2: #46535f;
  --link: #076a46; --link-hover: #054d33;
  --focus: #0a8a5e;
  --app: #0f766e;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body: "Noto Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 18px; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--ink); margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[lang="ja"] { font-family: "Noto Sans JP", var(--body); }

.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 6px; z-index: 10; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 44rem; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .wrap { padding-inline: 28px; } }

/* header: the home page's brand line */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--rule); }
.brand { font-family: var(--mono); font-size: .8125rem; letter-spacing: .03em; color: var(--ink); text-decoration: none; padding: 12px 0; }
.brand span { color: var(--ink-2); }
.site-head nav { display: flex; gap: 18px; font-size: .875rem; }
.site-head nav a { padding: 12px 0; }
.site-head nav a[aria-current="page"] { color: var(--ink); text-decoration: none; font-weight: 600; }

/* app header */
.app { display: flex; align-items: center; gap: 16px; padding: 40px 0 8px; }
.app img { width: 72px; height: 72px; border-radius: 16px; box-shadow: 0 1px 1px rgba(14,30,24,.05), 0 4px 12px -4px rgba(14,30,24,.25); flex: none; }
.eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
h1 { font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.1; }
.lede { font-size: 1.0625rem; color: var(--ink-2); margin: 16px 0 8px; max-width: 36em; }

section { padding: 28px 0 4px; }
h2 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 12px; }
section > p + p { margin-top: 10px; }
.muted { color: var(--ink-2); }

.card { background: var(--paper-3); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; }
.contact { border-left: 4px solid var(--app); }
.contact .mail { display: inline-block; font-size: 1.125rem; font-weight: 600; padding: 10px 0; word-break: break-all; }

ul.plain { margin: 8px 0 0; padding-left: 1.2em; }
ul.plain li + li { margin-top: 6px; }

/* FAQ: native <details>, keyboard and screen-reader friendly with no JS */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 52px; padding: 12px 2px; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.25rem; color: var(--ink-2); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--link-hover); }
.faq .a { padding: 0 2px 16px; color: var(--ink-2); }
.faq .a p + p { margin-top: 8px; }
.faq .a ol, .faq .a ul { margin: 6px 0 0; padding-left: 1.3em; }
.faq b, .policy b { color: var(--ink); }

/* privacy policy */
.policy h2 { font-size: 1.35rem; margin: 0 0 6px; }
.policy section { padding: 22px 0 0; }
.policy p { color: var(--ink-2); }
.summary { margin-top: 20px; }

.site-foot { margin-top: 48px; padding: 24px 0 40px; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--ink-2); }
.site-foot p + p { margin-top: 6px; }
ul.plain + p, .faq .a ol + p, .faq .a ul + p { margin-top: 10px; }