/* Balk Investmentbolag - the website.

   The layout is the August site's sections - hero, the platform, about, the
   results on a navy band, contact and footer centred - on one grid: the
   header, the hero and every section share one width and one left edge, the
   logo's. Running text keeps a readable measure inside it. The look is the platform's own, set for white paper: the
   colours are the ones its annual report and workbooks use
   (data/reports/report_colors.py in the app), titles in ink, gold the one
   accent, the app's two typefaces, and its logo, never redrawn. */

/* ---- Typefaces: the app's own files, stored with the site --------------------
   No request leaves the site's address, so no visitor's details reach a font
   service and the page needs no consent banner. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-v23-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("assets/fonts/ibm-plex-sans-v23-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-v14-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: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-v14-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- The house palette, on white paper --------------------------------------- */

:root {
  --background: #fbfaf8;
  /* Titles and figures in ink, as the app's are. */
  --text: #23262b;
  --text-muted: #5c6169;
  /* Small print. Not lighter: anything paler fails the contrast a reader needs
     at 12 px on this ground. */
  --text-faint: #6b7078;
  --border: #e7e9ed;
  /* Gold is the one accent: --gold for rules, bars and fills, --gold-text for
     gold as words, dark enough to read on white. */
  --gold: #c9a65c;
  --gold-hover: #b8934a;
  --gold-text: #8a6d1d;
  /* The logo's own navy: its bars and lettering, and the results band. */
  --navy: #1f3f77;
  --logo-muted: #7a7f88;

  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Source Serif 4", Georgia, serif;

  /* One width for everything, and a readable measure for running text. */
  --wide: 1160px;
  --measure: 700px;
  /* A paper's page: one centred column, a little wider than a section's text. */
  --paper-width: 780px;
  --side: 48px;

  /* One spacing scale. Each section is padded by half the gap between
     sections, so two in a row are 128 px apart and never twice that; the
     band is padded more because its own edge is part of the break. A
     section's text sits --block-gap above its film, principles or figures. */
  --section-pad: 64px;
  --band-pad: 96px;
  --block-gap: 48px;

  color-scheme: light;
}

/* ---- Base --------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* A short page still ends at the foot of the window: the footer is pushed
   down by the main content, never left floating halfway up. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--gold-text);
  text-decoration: none;
}

a:hover {
  color: var(--text);
}

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

h1,
h2,
h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

/* A section reached from the header lands below it, not under it. */
section[id] {
  scroll-margin-top: 80px;
}

/* ---- The header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 250, 248, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 18px var(--side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The mark and its lettering as the app sets them (ui/css/01_base.css
   .brand*), at the login page's size, coloured as the logo's light files. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-mark {
  width: 30px;
  height: 32px;
  flex-shrink: 0;
}

.brand-bar {
  fill: var(--navy);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-line {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.brand-line-accent {
  margin-top: 3px;
  color: var(--logo-muted);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-nav a {
  color: var(--text-muted);
  font-size: 14.5px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

/* ---- Shared ------------------------------------------------------------------- */

.kicker {
  margin: 0 0 12px;
  color: var(--gold-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Gold as words on the navy band: the app's gold for text on a dark ground,
   6.2 to 1 against the navy (the rule's gold would be 4.5, too faint). */
.kicker-light {
  color: #e3c681;
}

/* The short gold bar where a section begins - the app's mark of it. */
.rule {
  width: 44px;
  height: 2px;
  margin-bottom: 24px;
  background: var(--gold);
}

.lede {
  max-width: 480px;
  margin: 0 0 36px;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.65;
}

.button {
  display: inline-block;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Solid gold, as the platform's login: the one thing to do here. */
.button-gold {
  background: var(--gold);
  color: var(--text);
}

.button-gold:hover {
  background: var(--gold-hover);
  color: var(--text);
}

/* ---- The hero ----------------------------------------------------------------- */

.hero {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 88px var(--side) var(--section-pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: center;
  gap: 64px;
}

.hero .kicker {
  margin-bottom: 20px;
}

.hero h1 {
  margin-bottom: 24px;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.hero-photo {
  height: 420px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(135deg, #e4e7ee, #cfd6e4);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}

/* ---- Sections ------------------------------------------------------------------ */

.section {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--section-pad) var(--side);
}

.section h2,
.results h2 {
  margin-bottom: 20px;
  font-size: 32px;
  line-height: 1.25;
}

/* Running text: no space after the last paragraph, so what follows sets the
   distance itself. Only plain paragraphs - a label or the build line has a
   class and keeps its own size and spacing. */
.section > p:not([class]) {
  max-width: var(--measure);
  margin: 0;
  font-size: 16.5px;
  line-height: 1.75;
}

.section > p:not([class]) + p:not([class]) {
  margin-top: 16px;
}

/* A row of short named points on a hairline - About's principles and what
   the platform does. The column count is set per row and steps down by
   whole rows, so a row never ends on one stray item. */
.points {
  margin-top: var(--block-gap);
  padding-top: 32px;
  display: grid;
  gap: 32px 48px;
  border-top: 1px solid var(--border);
}

.points-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.points-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.points h3 {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
}

.points p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ---- Research ------------------------------------------------------------------ */

/* The papers, newest first, one row each on a hairline: what kind of paper
   and when, then its title and one line on what it found. */
.papers {
  margin: var(--block-gap) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.paper-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 8px 48px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

.paper-meta {
  margin: 0;
  padding-top: 4px;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.6;
}

.paper-item h3 {
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1.3;
}

.paper-item h3 a {
  color: var(--text);
}

.paper-item h3 a:hover {
  color: var(--gold-text);
}

.paper-item p {
  max-width: 620px;
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
}

.paper-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
}


/* ---- The results band ------------------------------------------------------- */

.results {
  padding: var(--band-pad) var(--side);
  background: var(--navy);
}

.results-inner {
  max-width: calc(var(--wide) - 2 * var(--side));
  margin: 0 auto;
}

.results h2 {
  color: #fff;
}

.results .lede {
  max-width: 640px;
  margin-bottom: var(--block-gap);
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1.7;
}

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

.stat {
  padding-left: 18px;
  border-left: 2px solid var(--gold);
}

.stat-value {
  color: #fff;
  font-family: var(--font-display);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
}

.notice {
  max-width: 640px;
  margin: 32px 0 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ---- The film --------------------------------------------------------------- */

.film {
  margin: var(--block-gap) 0 0;
}

.film-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  /* The film's own ground, the app's, so frame and film are one. */
  background: #0b0f16;
  box-shadow: 0 24px 60px rgba(35, 38, 43, 0.18);
}

.film-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0b0f16;
}

.film-play {
  position: absolute;
  inset: 0;
  width: 76px;
  height: 76px;
  margin: auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}

.film-play:hover {
  background: var(--gold-hover);
  transform: scale(1.04);
}

.film-play[hidden] {
  display: none;
}

.film-play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
  fill: currentColor;
}

.film figcaption {
  margin-top: 14px;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.6;
}

/* ---- Contact ------------------------------------------------------------------ */

.contact {
  text-align: center;
}

.contact .rule {
  margin-left: auto;
  margin-right: auto;
}

.contact > p:not([class]) {
  max-width: 520px;
  margin: 0 auto 32px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* ---- Pages of one column: a paper, privacy, "not found" -------------------------
   One reading column, centred, as an article is read: everything in it shares
   one left edge and the reading measure. The home page keeps the logo's grid,
   where sections run the full width. */

.article {
  max-width: calc(var(--paper-width) + 2 * var(--side));
  margin: 0 auto;
  padding: 48px var(--side) var(--section-pad);
}

.back-link {
  display: inline-block;
  margin-bottom: 48px;
  color: var(--text-muted);
  font-size: 14px;
}

.back-link:hover {
  color: var(--text);
}

.article-header h1 {
  margin-bottom: 14px;
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.paper-subtitle {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.4;
}

.paper-byline {
  margin: 0 0 32px;
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1.6;
}

/* An address is never hyphenated or broken: a reader may copy it. */
.article-section a[href^="mailto:"] {
  white-space: nowrap;
  -webkit-hyphens: none;
  hyphens: none;
}

/* One line under a page's title, for a page that is only that. */
.article-lede {
  margin: 20px 0 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.7;
}

.article-actions {
  margin-top: 32px;
}

.paper-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.paper-download span {
  color: var(--text-faint);
  font-size: 13px;
}

.article-section {
  margin-top: calc(var(--block-gap) + 16px);
}

.article-section h2 {
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 1.3;
}

.article-section > p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.75;
}

.article-section > p + p {
  margin-top: 16px;
}

main {
  flex: 1 0 auto;
  scroll-margin-top: 80px;
}

/* Small links get a larger, invisible area to tap - about 38 px tall - without
   moving anything: a thumb need not hit the words exactly. */
.site-nav a,
.back-link,
.paper-link,
.footer-brand a {
  position: relative;
}

.site-nav a::after,
.back-link::after,
.paper-link::after,
.footer-brand a::after {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

/* For keyboard users: the first thing Tab reaches, shown only then, so the
   header's links need not be passed on every page. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--side);
  z-index: 20;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

/* Running text set justified, as the papers themselves are, and hyphenated
   so the word spacing stays even. On a phone's narrow column it goes back to
   flush left, where justifying would open gaps between words. */
.article-section > p,
.findings li,
.article-note {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Numbered findings on hairlines, the number in the serif's gold. */
.findings {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: finding;
  border-bottom: 1px solid var(--border);
}

.findings li {
  position: relative;
  padding: 18px 0 18px 40px;
  border-top: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.7;
  counter-increment: finding;
}

.findings li::before {
  content: counter(finding);
  position: absolute;
  left: 0;
  top: 17px;
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: 19px;
}

/* A table of figures as the app sets them: hairlines, numbers right-aligned
   in even columns. Wider than a phone, it scrolls inside its own box. */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.data-table .number {
  padding-left: 24px;
  text-align: right;
  white-space: nowrap;
}

.data-table .benchmark td {
  color: var(--text-muted);
}

.data-table .total td {
  font-weight: 600;
}

.data-table caption {
  padding-top: 12px;
  caption-side: bottom;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px 32px;
}

.facts dt {
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1.6;
}

.facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.article-note {
  margin: calc(var(--block-gap) + 16px) 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.65;
}

/* ---- The footer --------------------------------------------------------------- */

.site-footer {
  padding: 48px var(--side) 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-faint);
  font-size: 12.5px;
}

/* The footer's one link, quiet as the small print around it. */
.footer-brand a {
  color: var(--text-muted);
}

.footer-brand a:hover,
.footer-brand a[aria-current="page"] {
  color: var(--text);
}

.footer-brand .brand-mark {
  width: 16px;
  height: 17px;
}

/* As wide as a paper's column, so on its page the small print lines up with
   the text above it, and runs to four lines rather than six. */
.legal {
  max-width: var(--paper-width);
  margin: 0;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.6;
}

/* ---- Smaller screens ---------------------------------------------------------- */

@media (max-width: 900px) {
  .points-four,
  .points-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --side: 24px;
    --section-pad: 48px;
    --band-pad: 72px;
    --block-gap: 32px;
  }

  /* As the app's header below 640 px: the mark alone. */
  .brand-text {
    display: none;
  }

  .site-nav {
    gap: 20px;
  }

  .site-nav a {
    font-size: 14px;
  }

  /* Five links do not fit beside the mark on a phone. Platform gives way:
     the hero's button leads to the film. */
  .site-nav .nav-wide {
    display: none;
  }

  .hero {
    padding-top: 48px;
    gap: 40px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero-photo {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .section h2,
  .results h2 {
    font-size: 27px;
  }

  .points-four,
  .points-three,
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .paper-item {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone each label sits over its value, the pairs set apart. */
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .facts dd + dt {
    margin-top: 14px;
  }

  .article-header h1 {
    font-size: 31px;
  }

  .article-section > p,
  .findings li,
  .article-note {
    text-align: left;
  }

  .paper-subtitle {
    font-size: 18px;
  }

  .film-play {
    width: 60px;
    height: 60px;
  }

  .film-play svg {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 380px) {
  .site-nav {
    gap: 14px;
  }
}