/* ================================================================================================ */
/*  Press kit stylesheet. Loaded only by press_kit.html, which shares nothing with website.css.      */
/*                                                                                                  */
/*  This page is also rendered to presskit/press_kit.pdf by wkhtmltopdf 0.12.6, which is Qt WebKit.  */
/*  That engine has no CSS custom properties, no grid and no clamp(), so this sheet uses literal     */
/*  colours and a display:table two-column layout on purpose. Do not "tidy" them into var().         */
/*  The chores run passes --print-media-type, so the @media print block at the bottom is what the    */
/*  PDF actually gets.                                                                              */
/* ================================================================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  background: #f4ece0;
  color: #2b1c12;
  font-family: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.62;
}

a { color: #8a4b1f; text-decoration: none; }
a:hover { color: #b6641f; text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------------------------- */
/*  Header                                                                                          */
/* ---------------------------------------------------------------------------------------------- */

.pk-header {
  background: #2e1e14;
  color: #f7e9d2;
  border-bottom: 3px solid #f3c77a;
  padding: 2.2rem 1.5rem 1.8rem;
}

.pk-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: table;
  width: 100%;
}

.pk-header-main, .pk-header-meta { display: table-cell; vertical-align: bottom; }
.pk-header-meta { text-align: right; font-size: 0.88rem; color: #b39d84; white-space: nowrap; }
.pk-header-meta p { margin: 0.1rem 0; }
.pk-header-meta a { color: #f3c77a; }

.pk-logo { width: 300px; max-width: 62%; margin-bottom: 1rem; }

.pk-header h1 {
  margin: 0 0 0.3rem;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  color: #fdf6ea;
}

.pk-tagline {
  margin: 0;
  font-family: 'Roboto Mono', ui-monospace, Consolas, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3c77a;
}

/* ---------------------------------------------------------------------------------------------- */
/*  Layout                                                                                          */
/* ---------------------------------------------------------------------------------------------- */

.pk-main { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.pk-section { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid #dccbb5; }
.pk-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.pk-section h2 {
  margin: 0 0 1rem;
  font-family: 'Roboto Mono', ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a1836a;
}

.pk-section h3 {
  margin: 1.6rem 0 0.5rem;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: #2b1c12;
}
.pk-section h3:first-child { margin-top: 0; }

.pk-section p { margin: 0 0 0.9rem; }
.pk-section ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.pk-section li { margin-bottom: 0.25rem; }

/* The headline sentence under a section title. */
.pk-lead { font-size: 1.12rem; line-height: 1.6; color: #5f4a37; }

/* ---------------------------------------------------------------------------------------------- */
/*  Two columns. display:table so Qt WebKit lays it out the same way a browser does.                 */
/* ---------------------------------------------------------------------------------------------- */

.pk-two-col { display: table; width: 100%; border-spacing: 0; }
.pk-two-col > div { display: table-cell; vertical-align: top; }
.pk-two-col > .pk-body { padding-right: 2.2rem; }

.pk-aside {
  width: 300px;
  background: #fbf6ee;
  border: 1px solid #e2d3bf;
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  font-size: 0.9rem;
}
.pk-aside h3 {
  margin: 1.3rem 0 0.4rem;
  font-family: 'Roboto Mono', ui-monospace, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a1836a;
}
.pk-aside h3:first-child { margin-top: 0; }
.pk-aside ul { list-style: none; padding-left: 0; margin: 0 0 0.4rem; }
.pk-aside li { margin-bottom: 0.15rem; }

/* ---------------------------------------------------------------------------------------------- */
/*  Numbers strip                                                                                   */
/* ---------------------------------------------------------------------------------------------- */

.pk-numbers { display: table; width: 100%; border-spacing: 0; margin: 0.5rem 0 0; }
.pk-numbers > div { display: table-cell; vertical-align: top; width: 25%; padding-right: 1.4rem; }
.pk-numbers b {
  display: block;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1;
  color: #8a4b1f;
}
.pk-numbers span { display: block; font-size: 0.85rem; color: #5f4a37; margin-top: 0.3rem; }

/* ---------------------------------------------------------------------------------------------- */
/*  Buttons and downloads                                                                           */
/* ---------------------------------------------------------------------------------------------- */

.pk-button {
  display: inline-block;
  margin: 0 0.5rem 0.6rem 0;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: 1px solid #2e1e14;
  background: #2e1e14;
  color: #f7e9d2;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.pk-button:hover { background: #48301e; border-color: #48301e; color: #f7e9d2; text-decoration: none; }

.pk-button-secondary { background: transparent; color: #5f4a37; border-color: #c1ab90; }
.pk-button-secondary:hover { background: transparent; color: #8a4b1f; border-color: #8a4b1f; }

.pk-download-all { margin-top: 1rem; }

/* ---------------------------------------------------------------------------------------------- */
/*  Media                                                                                           */
/* ---------------------------------------------------------------------------------------------- */

.pk-media-embed { margin: 0.8rem 0 1.6rem; max-width: 800px; }
.pk-media-embed video {
  width: 100%;
  display: block;
  border-radius: 8px;
  border: 1px solid #dccbb5;
  background: #000;
}

/* Galleries are embedded as iframes of the generated gallery_*.html pages. */
.pk-gallery-frame {
  width: 100%;
  border: 1px solid #dccbb5;
  border-radius: 10px;
  background: #f4ece0;
}

.pk-note { font-size: 0.9rem; color: #5f4a37; }

.thumbnail-border {
  display: block;
  margin: 1.6rem auto;
  border: 1px solid #dccbb5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(60, 38, 20, 0.14);
}

/* ---------------------------------------------------------------------------------------------- */
/*  Footer                                                                                          */
/* ---------------------------------------------------------------------------------------------- */

.pk-footer {
  background: #241610;
  color: #a89178;
  text-align: center;
  font-size: 0.85rem;
  padding: 1.4rem 1.5rem;
}

/* ---------------------------------------------------------------------------------------------- */
/*  Narrow screens                                                                                  */
/* ---------------------------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .pk-header-inner, .pk-header-main, .pk-header-meta { display: block; width: auto; }
  .pk-header-meta { text-align: left; margin-top: 1rem; white-space: normal; }
  .pk-two-col, .pk-two-col > div { display: block; width: auto; }
  .pk-two-col > .pk-body { padding-right: 0; }
  .pk-aside { margin-top: 1.6rem; }
  .pk-numbers, .pk-numbers > div { display: block; width: auto; padding-right: 0; margin-bottom: 1rem; }
}

/* ---------------------------------------------------------------------------------------------- */
/*  Print, which is also what presskit/press_kit.pdf gets                                           */
/*                                                                                                  */
/*  Videos and gallery iframes cannot render on paper, so they are dropped rather than left as       */
/*  empty boxes. The page says in its own words where to find them.                                  */
/* ---------------------------------------------------------------------------------------------- */

@media print {
  html, body { background: #fff; font-size: 11pt; }

  .pk-header { background: #fff; color: #2b1c12; border-bottom: 2px solid #8a4b1f; padding: 0 0 1rem; }
  .pk-header h1 { color: #2b1c12; }
  .pk-tagline { color: #8a4b1f; }
  .pk-header-meta { color: #5f4a37; }
  .pk-header-meta a { color: #8a4b1f; }

  .pk-main { padding: 1rem 0 0; max-width: none; }
  .pk-section { page-break-inside: auto; }
  .pk-section h2, .pk-section h3 { page-break-after: avoid; }

  .pk-media-embed, .pk-gallery-frame, .pk-screen-only { display: none; }
  .pk-print-only { display: block; }

  .pk-footer { background: #fff; color: #5f4a37; border-top: 1px solid #dccbb5; }
  .thumbnail-border { box-shadow: none; }
}

/* Shown on paper only; the screen version has the real thing instead. */
.pk-print-only { display: none; }