/* The press kit page (templates/press-kit.php). Two palettes:
   paper, the kit's own warm off-white, applied to the whole page (html.pk-paper) so the frame and the
   back arrow match; and the site theme, which follows the visitor's light or dark preference.
   Everything below is scoped to .pk except the html.pk-paper block. */

html.pk-paper {
  --bg: #fbfaf7 !important;
  --background: #fbfaf7 !important;
  --foreground: #1c1b19 !important;
  --text-heading: #1c1b19 !important;
  --text-copy: #1c1b19 !important;
  --text-secondary: #76726a !important;
  --text-nav: #76726a !important;
  --text-nav-hover: #1c1b19 !important;
  --surface-subtle: #f1efe9 !important;
  --line-subtle: #dedbd3 !important;
  --border: #dedbd3 !important;
  --selection-bg: #e9e5da;
  --selection-text: #1c1b19;
  color-scheme: light;
}

.pk {
  --pk-fg: var(--text-copy);
  --pk-muted: var(--text-secondary);
  --pk-rule: var(--line-subtle);
  --pk-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --c1: #e4b63e; --c2: #3f9ad6; --c3: #e0785b; --c4: #62ad5a; --c5: #9b6fc4;
  --h1: #fbe7b3; --h2: #cfe6f8; --h3: #f9d8cd; --h4: #d6edcf; --h5: #e6d8f3;
  --n1: #9a6f00; --n2: #1b5e8c; --n3: #8f3419; --n4: #2c6b23; --n5: #5a3480;
  --pk-cut: #b0aca3; --pk-cut-line: #c3bfb6; --pk-photo: #e9e6df;
  font-size: 16px; line-height: 1.55; color: var(--pk-fg);
}
/* Site theme in dark mode: tints mixed into the page color, numbers in the full hue. */
@media screen and (prefers-color-scheme: dark) {
  html:not(.pk-paper) .pk {
    --h1: color-mix(in srgb, var(--c1) 26%, var(--bg)); --h2: color-mix(in srgb, var(--c2) 26%, var(--bg));
    --h3: color-mix(in srgb, var(--c3) 26%, var(--bg)); --h4: color-mix(in srgb, var(--c4) 26%, var(--bg));
    --h5: color-mix(in srgb, var(--c5) 26%, var(--bg));
    --n1: #f0c65a; --n2: #7bbcea; --n3: #f09a80; --n4: #8fcf86; --n5: #c3a2e6;
    --pk-cut: #6f757a; --pk-cut-line: #5b6166; --pk-photo: #1a1e21;
  }
}
.pk * { box-sizing: border-box; }
.pk-k { font-family: var(--pk-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pk-muted); }

.pk-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.pk-toggle { font-family: var(--pk-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-muted); background: none; border: 1px solid var(--pk-rule); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: color .2s, border-color .2s; }
.pk-toggle:hover, .pk-toggle:focus-visible { color: var(--pk-fg); border-color: var(--pk-muted); }
.pk-toggle::before { content: "Site theme"; }
html.pk-paper .pk-toggle::before { content: "Site theme"; }
html:not(.pk-paper) .pk-toggle::before { content: "Paper"; }

.pk-who { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--pk-rule); }
.pk-who img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.pk-n { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-heading); }
.pk-t { color: var(--pk-muted); font-size: 14px; margin-top: 2px; }
.pk-r { margin-left: auto; text-align: right; }
a.pk-r { text-decoration: none; color: var(--pk-muted); transition: color .2s; }
a.pk-r:hover, a.pk-r:focus-visible { color: var(--pk-fg); }
.pk-view { display: block; margin-top: 7px; color: var(--pk-fg); text-decoration: underline; text-decoration-color: var(--pk-rule); text-underline-offset: 3px; transition: text-decoration-color .2s; }
a.pk-r:hover .pk-view, a.pk-r:focus-visible .pk-view { text-decoration-color: currentColor; }
.pk-view-where { display: none; }

.pk-copy { font-size: 22px; line-height: 1.6; margin: 36px 0 18px; letter-spacing: -0.005em; }
.pk-s { padding: 2px 4px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pk-s1 { background: var(--h1); } .pk-s2 { background: var(--h2); } .pk-s3 { background: var(--h3); } .pk-s4 { background: var(--h4); } .pk-s5 { background: var(--h5); }
.pk-num { font-family: var(--pk-mono); font-size: 11px; vertical-align: super; line-height: 1; margin-right: 3px; }
.pk-s1 .pk-num { color: var(--n1); } .pk-s2 .pk-num { color: var(--n2); } .pk-s3 .pk-num { color: var(--n3); } .pk-s4 .pk-num { color: var(--n4); } .pk-s5 .pk-num { color: var(--n5); }
.pk-cut { font-family: var(--pk-mono); font-size: 11px; color: var(--pk-cut); vertical-align: top; margin: 0 1px 0 4px; white-space: nowrap; }
.pk-cut i { display: inline-block; width: 0; height: 1.1em; border-left: 1px dashed var(--pk-cut-line); vertical-align: -3px; margin-right: 3px; }
.pk-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--pk-mono); font-size: 12px; color: var(--pk-muted); padding-bottom: 28px; border-bottom: 1px solid var(--pk-rule); }
.pk-meta b { color: var(--pk-fg); font-weight: 500; }

.pk-formula { font-family: var(--pk-mono); font-size: 12px; color: var(--pk-muted); margin: 28px 0 8px; line-height: 2.1; }
.pk-formula i { font-style: normal; color: var(--pk-fg); padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.pk-f1 { background: var(--h1); } .pk-f2 { background: var(--h2); } .pk-f3 { background: var(--h3); } .pk-f4 { background: var(--h4); } .pk-f5 { background: var(--h5); }

.pk-notes { margin: 0; padding: 0; list-style: none; }
.pk-note { display: grid; grid-template-columns: 30px 132px minmax(0, 1fr); gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--pk-rule); align-items: baseline; }
.pk-c1 { --nc: var(--c1); } .pk-c2 { --nc: var(--c2); } .pk-c3 { --nc: var(--c3); } .pk-c4 { --nc: var(--c4); } .pk-c5 { --nc: var(--c5); }
.pk-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--nc); position: relative; top: 1px; }
.pk-lab { font-size: 15px; font-weight: 600; color: var(--text-heading); }
.pk-lab small { display: block; font-family: var(--pk-mono); font-size: 11px; font-weight: 400; color: var(--pk-muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.pk-body { font-size: 15.5px; line-height: 1.55; }
.pk-body p { margin: 0 0 6px; }
.pk-body p:last-of-type { margin: 0; }
.pk-body em { font-style: normal; color: var(--pk-muted); }
.pk-for { font-family: var(--pk-mono); font-size: 11.5px; color: var(--pk-muted); letter-spacing: .04em; margin-top: 6px; }

.pk-absent { margin-top: 30px; }
.pk-absent ul { margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; }
.pk-absent li { padding: 6px 0; border-bottom: 1px solid var(--pk-rule); }
.pk-absent li:last-child { border-bottom: 0; }
.pk-assets { margin-top: 36px; }
.pk-links { margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; }
.pk-links li { display: flex; gap: 18px; padding: 6px 0; border-bottom: 1px solid var(--pk-rule); align-items: baseline; }
.pk-links li span { font-family: var(--pk-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-muted); width: 112px; flex: none; white-space: nowrap; }
.pk-links li em { font-family: var(--pk-mono); font-style: normal; font-size: 11px; color: var(--pk-muted); margin-left: auto; white-space: nowrap; }
.pk-links a { color: var(--pk-fg); text-decoration: underline; text-decoration-color: var(--pk-rule); text-underline-offset: 3px; }
.pk-links a:hover { text-decoration-color: currentColor; }
.pk-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.pk-photos figure { margin: 0; }
.pk-photos img { width: 100%; height: auto; display: block; background: var(--pk-photo); border-radius: 2px; }
.pk-photos figcaption { font-family: var(--pk-mono); font-size: 11px; color: var(--pk-muted); line-height: 1.7; margin-top: 8px; letter-spacing: .03em; }
.pk-photos figcaption b { color: var(--pk-fg); font-weight: 500; }
.pk-foot { margin-top: 44px; font-family: var(--pk-mono); font-size: 11px; color: var(--pk-muted); letter-spacing: .04em; line-height: 1.8; }

@media (max-width: 560px) {
  .pk-who { gap: 12px; padding-bottom: 16px; }
  .pk-who img { width: 56px; height: 56px; }
  .pk-copy { font-size: 19px; margin: 26px 0 14px; }
  .pk-note { grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; }
  .pk-body { grid-column: 2; }
  /* The listing's three lines go; the link to it stays, as a row under the name. */
  .pk-who { flex-wrap: wrap; }
  .pk-r { width: 100%; margin: 4px 0 0; text-align: left; }
  .pk-r-lines { display: none; }
  .pk-view { display: inline; margin-top: 0; }
  .pk-view-where { display: inline; }
  .pk-photos { grid-template-columns: 1fr; gap: 16px; }
  .pk-links li { flex-wrap: wrap; gap: 4px 12px; }
  .pk-links li em { margin-left: 0; width: 100%; }
}