/* ponkotools — portal
 *
 * A list, and nothing else. The page names what has been built and hands the
 * visitor off to it, so the tools are the only thing on it: one row each, a
 * rule between them, and no hero above them. An earlier version opened with a
 * thesis — every tool named by the thing it removed — and once the family was
 * down to two that hero was reciting the list it sat on top of. What is left is
 * the list, which is what anyone came for.
 *
 * Colour follows from the same reading. The portal is the shelf, not a product,
 * so it has no accent of its own — the canvas is a deliberately cool graphite
 * and the only chroma on the page is borrowed, one value per tool, lifted from
 * that tool's own dark-mode tokens (see "Borrowed accents" below). The family
 * happens to have converged on warm ambers and salmons, which is why the shelf
 * is cool: a borrowed colour has to read as arriving from somewhere else.
 *
 * Type has three roles. Bricolage Grotesque sets the tool names — chosen
 * because its own design premise is bricolage, tinkering, a grotesque that is
 * imperfect on purpose, which is the same joke the brand name makes. IBM Plex
 * Sans sets prose. IBM Plex Mono sets anything a machine would recognise: a
 * hostname, a platform, a status. Japanese has no downloaded face; it falls
 * through to the system stack and takes its personality from weight and
 * spacing.
 *
 * Dark only, on purpose. A front door is a five-second stop and one scheme
 * executed properly beats two executed half-way; the product sites keep their
 * own light modes.
 */

/* ── Faces ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
  /* Cool graphite. Not black, and pointedly not warm — see the header note. */
  --pk-bg: #15181b;
  --pk-bg-2: #1b1f23;
  --pk-bg-3: #22272c;
  --pk-rule: #2c3238;
  --pk-rule-hi: #3d454d;

  --pk-ink: #e9edf0;
  --pk-ink-2: #98a2aa;
  /* Everything set in --pk-ink-3 is small (11-12px mono), so it has to clear
     4.5:1 against both the canvas and the hover surface, not the 3:1 that large
     text gets away with. Measured: 5.21:1 on --pk-bg, 4.85:1 on --pk-bg-2. */
  --pk-ink-3: #838c94;

  /* Cool enough to never be mistaken for a tool's accent. */
  --pk-focus: #7fb2ff;

  /* Tools with no design language of their own yet get this. Declared here
     rather than on .pk-tool because the accent classes below are also
     single-class selectors on that same element — as a sibling rule the
     fallback would win on source order and blank every accent on the page. */
  --pk-unset: #7d878f;
  --accent: var(--pk-unset);

  --pk-jp: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP',
    'Yu Gothic Medium', 'Yu Gothic', Meiryo;
  --pk-font-display: 'Bricolage Grotesque', var(--pk-jp), system-ui, sans-serif;
  --pk-font-body: 'IBM Plex Sans', var(--pk-jp), system-ui, sans-serif;
  --pk-font-mono: 'IBM Plex Mono', var(--pk-jp), ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;

  --pk-gutter: clamp(1.25rem, 5vw, 3rem);
  --pk-measure: 68rem;

  color-scheme: dark;
}

/* ── Borrowed accents ──────────────────────────────────────────────────── */

/* One value per tool, copied from that tool's own dark-mode token so the dot
   beside it is the same colour the visitor is about to land in:
   barepdf  site/.vitepress/theme/custom.css   .dark --vp-c-brand-1
   barevid  site/.vitepress/theme/custom.css   .dark --bv-accent
   Update these here rather than in the markup; nothing else sets --accent. */

.pk-a-barepdf {
  --accent: #f08079;
}

.pk-a-barevid {
  --accent: #f0b54f;
}

/* ── Reset, kept to what this page actually uses ───────────────────────── */

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

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

body {
  margin: 0;
  background: var(--pk-bg);
  color: var(--pk-ink);
  font-family: var(--pk-font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--pk-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.pk-skip {
  position: absolute;
  left: var(--pk-gutter);
  top: 0;
  z-index: 10;
  padding: 0.6rem 1rem;
  transform: translateY(-140%);
  background: var(--pk-bg-3);
  border: 1px solid var(--pk-rule-hi);
  border-radius: 0 0 6px 6px;
  font-family: var(--pk-font-mono);
  font-size: 0.8125rem;
  text-decoration: none;
}

.pk-skip:focus-visible {
  transform: translateY(0);
}

.pk-shell {
  width: 100%;
  max-width: var(--pk-measure);
  margin-inline: auto;
  padding-inline: var(--pk-gutter);
}

/* Small type that names a machine-checkable fact, or labels a block. */
.pk-eyebrow {
  font-family: var(--pk-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pk-ink-3);
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

.pk-masthead {
  border-bottom: 1px solid var(--pk-rule);
}

.pk-masthead .pk-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.75rem;
}

.pk-wordmark {
  font-family: var(--pk-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  font-stretch: 84%;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.pk-langs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--pk-font-mono);
  font-size: 0.75rem;
  color: var(--pk-ink-3);
}

.pk-langs a {
  color: var(--pk-ink-2);
  text-decoration: none;
  transition: color 140ms ease;
}

.pk-langs a:hover {
  color: var(--pk-ink);
}

.pk-langs [aria-current='true'] {
  color: var(--pk-ink);
}

/* ── Japanese ──────────────────────────────────────────────────────────── */

html[lang='ja'] .pk-eyebrow {
  /* 0.2em was set for capitals. On kana it opens the word up too far. */
  letter-spacing: 0.12em;
}

/* Japanese has no spaces, so the browser will break mid-phrase unless told to
   look for one. Chrome and Safari honour this; everywhere else falls back to
   the same break it would have made anyway. */
html[lang='ja'] .pk-tool__desc,
html[lang='ja'] .pk-also__desc {
  word-break: auto-phrase;
}

/* ── Tools ─────────────────────────────────────────────────────────────── */

/* The list starts the page now, so the space the hero used to hold open above
   it is set here. */
.pk-tools {
  padding-block: clamp(3rem, 9vh, 4.5rem) clamp(3rem, 9vh, 5rem);
}

.pk-tools__label {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pk-rule);
}

.pk-tool {
  border-bottom: 1px solid var(--pk-rule);
}

.pk-tool__body {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 2.1fr) minmax(9rem, auto);
  align-items: start;
  gap: 1rem 2rem;
  padding: clamp(1.5rem, 3.5vh, 2.25rem) 1rem;
  margin-inline: -1rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background-color 160ms ease;
}

/* Only rows that go somewhere light up. */
a.pk-tool__body:hover,
a.pk-tool__body:focus-visible {
  background: var(--pk-bg-2);
}

.pk-tool__name {
  font-family: var(--pk-font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.2;
  letter-spacing: -0.015em;
  transition: color 160ms ease;
}

a.pk-tool__body:hover .pk-tool__name,
a.pk-tool__body:focus-visible .pk-tool__name {
  color: var(--accent);
}

.pk-tool__kind {
  margin-top: 0.4rem;
  font-family: var(--pk-font-mono);
  font-size: 0.75rem;
  color: var(--pk-ink-3);
}

.pk-tool__desc {
  color: var(--pk-ink-2);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.pk-tool__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--pk-font-mono);
  font-size: 0.75rem;
}

.pk-tool__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pk-ink-2);
}

/* The dot is the tool's own accent. A tool with no design language of its own
   yet gets --pk-unset, which is a fact about the tool rather than a signal —
   the status next to it says in words whether you can use it. */
.pk-tool__status::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.pk-tool__where {
  color: var(--pk-ink-3);
  transition: color 160ms ease;
}

a.pk-tool__body:hover .pk-tool__where,
a.pk-tool__body:focus-visible .pk-tool__where {
  color: var(--pk-ink);
}

.pk-tool__where::after {
  content: ' →';
}

/* ── Also ──────────────────────────────────────────────────────────────── */

.pk-also {
  padding-bottom: clamp(3rem, 8vh, 4.5rem);
}

.pk-also__label {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pk-rule);
}

.pk-also__row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 2.1fr) minmax(9rem, auto);
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding: 1.5rem 1rem;
  margin-inline: -1rem;
  border-radius: 10px;
  border-bottom: 1px solid var(--pk-rule);
  text-decoration: none;
  color: inherit;
  transition: background-color 160ms ease;
}

.pk-also__row:hover,
.pk-also__row:focus-visible {
  background: var(--pk-bg-2);
}

.pk-also__name {
  font-size: 1rem;
  font-weight: 500;
}

.pk-also__desc {
  color: var(--pk-ink-2);
  font-size: 0.9375rem;
}

.pk-also__where {
  font-family: var(--pk-font-mono);
  font-size: 0.75rem;
  color: var(--pk-ink-3);
  transition: color 160ms ease;
}

.pk-also__row:hover .pk-also__where,
.pk-also__row:focus-visible .pk-also__where {
  color: var(--pk-ink);
}

.pk-also__where::after {
  content: ' →';
}

/* ── Colophon ──────────────────────────────────────────────────────────── */

.pk-colophon {
  padding-block: 2rem 3.5rem;
  color: var(--pk-ink-3);
  font-family: var(--pk-font-mono);
  font-size: 0.75rem;
}

.pk-colophon .pk-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.pk-colophon a {
  color: var(--pk-ink-2);
  text-decoration-color: var(--pk-rule-hi);
  text-underline-offset: 3px;
}

.pk-colophon a:hover {
  color: var(--pk-ink);
}

/* ── Narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 46rem) {
  .pk-tool__body,
  .pk-also__row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .pk-tool__meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

/* Nothing on this page animates in any more; only the hover transitions are
   left, and they are what this cuts. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
  }
}