/* frankschmid.com: the one stylesheet of every page (change 25, README "Approved changes").
   It reproduces the look the site had on Squarespace (template settings of 2026: sizes,
   spacing, colours, the phone menu) without any Squarespace code. The one deliberate
   difference is the typeface: the system font instead of Poppins (house rule: published
   pages use the system font stack).

   How sizes work (as on Squarespace):
   - --step grows the headings with the window: 1.2% of the window height (at most 900px)
     on phones, 1.2% of the window width (at most 1920px) from 768px.
   - Side margin: 6% of the window width on phones, 4% from 768px. From 768px the text
     starts one grid column (1/24 of the width between the margins) further in. The rule
     and the text are at most 1920px wide, centred; the header always spans the window.
   - Above and below the rule and the text: 3.3% of the longer window side. */

:root {
  --text: #000;
  --heading: #333;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --step: calc(.012 * min(100vh, 900px));
  --gutter: 6vw;
  --space: 3.3vmax;
}

@media (min-width: 768px) {
  :root {
    --step: calc(.012 * min(100vw, 1920px));
    --gutter: max(4vw, (100% - 1920px) / 2);
  }
}

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

html {
  font-size: 75%; /* 12px */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The page is a column, so the footer sits at the bottom of the window on short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

strong {
  font-weight: 700;
}

.skip {
  position: absolute;
  top: 0;
  left: -9999px;
}

.skip:focus {
  left: var(--gutter);
  z-index: 3;
  padding: 4px 8px;
  background: #fff;
}

/* Top band: the header, then the rule, centred in what is left of the first third of
   the window. */
.top {
  display: flex;
  flex-direction: column;
  min-height: 33vh;
}

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3vw 4vw;
}

.site-title {
  color: var(--heading);
  font-size: calc(var(--step) + 1rem);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav a {
  padding: .1em 0;
  color: #000;
  text-decoration: none;
}

.site-nav a + a {
  margin-left: 1.5vw;
}

.site-nav a[aria-current="page"] {
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .1em) / 100% 1px no-repeat;
}

.menu-button {
  display: none;
  width: 47px;
  height: 37px;
  margin: 0;
  padding: 1px 6px;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
}

.menu-button span {
  position: relative;
  display: block;
  height: 35px;
}

.menu-button span::before,
.menu-button span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 35px;
  height: 1px;
  background: currentColor;
  transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
}

.menu-button span::before {
  top: 11.5px;
}

.menu-button span::after {
  top: 22.5px;
}

/* Phones, and tablets held in the hand: the menu sits behind the two-line button. */
@media (max-width: 799px), (pointer: coarse) and (max-width: 1024px) {
  .site-header {
    padding: 6vw;
  }

  .menu-button {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 0 4vw;
    background: #fff;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 300ms, visibility 0s 300ms;
  }

  .menu-open .site-nav {
    visibility: visible;
    opacity: 1;
    transition: opacity 300ms;
  }

  .site-nav a,
  .site-nav a + a {
    margin: 3vw 5vw;
    padding: 0;
    font-size: 8.5vmin;
    line-height: 1;
  }

  .site-nav a[aria-current="page"] {
    background: none;
  }

  .menu-open {
    overflow: hidden;
  }

  .menu-open .menu-button span::before {
    transform: translateY(5.5px) rotate(45deg) scaleX(.83);
  }

  .menu-open .menu-button span::after {
    transform: translateY(-5.5px) rotate(-45deg) scaleX(.83);
  }
}

@media (min-width: 576px) and (max-width: 799px), (min-width: 576px) and (pointer: coarse) and (max-width: 1024px) {
  .site-nav a,
  .site-nav a + a {
    font-size: 6.6vmin;
  }
}

@media (min-width: 768px) and (max-width: 799px), (min-width: 768px) and (pointer: coarse) and (max-width: 1024px) {
  .site-nav a,
  .site-nav a + a {
    font-size: 6vmin;
  }
}

.rule {
  display: flex;
  flex: 1;
  align-items: center;
  padding: var(--space) var(--gutter);
}

.rule hr {
  flex: 1;
  height: 1px;
  margin: 23px 0;
  border: 0;
  background: var(--heading);
}

@media (min-width: 768px) {
  .rule hr {
    margin: 6px 0;
  }
}

/* The page text. */
main {
  flex: 1 0 auto;
  padding: var(--space) var(--gutter);
}

@media (min-width: 768px) {
  main {
    padding-left: calc(var(--gutter) + (100% - 2 * var(--gutter)) / 24);
  }
}

/* The footer, at the same side margins as the header ("Frank Schmid"): 4% of the window
   width, 6% where the header shows the phone menu. */
.site-footer {
  padding: 0 4vw var(--space);
  color: var(--heading);
}

@media (max-width: 799px), (pointer: coarse) and (max-width: 1024px) {
  .site-footer {
    padding-right: 6vw;
    padding-left: 6vw;
  }
}

main > :first-child {
  margin-top: 0;
}

main > :last-child {
  margin-bottom: 0;
}

/* Page title. */
h1 {
  margin: 0 0 2rem;
  color: var(--heading);
  font-size: calc(1.2 * var(--step) + 1rem);
  font-weight: 500;
  line-height: calc(1.4 * (1 - 1.2 / 25));
}

/* Section heading ("Actuarial & Insurance"). */
h2 {
  margin: 25px 0 1rem;
  font-size: calc(.4 * var(--step) + 1rem);
  font-weight: 300;
  line-height: 1.8;
}

/* Sub-heading ("Dashboards"). */
h3 {
  margin: 5px 0;
  color: var(--heading);
  font-size: calc(.2 * var(--step) + 1rem);
  font-weight: 500;
  line-height: calc(1.4 * (1 - .2 / 25));
}

p {
  margin: 1rem 0;
}

/* Bulleted lists, each item a <p>: a "•" set right in the 40px indent, 6px between items
   (the "page not found" page keeps the browser's bullet, below). */
li {
  list-style: none;
}

li > p {
  margin: .5rem 0;
}

li > p:first-child::before {
  content: "\2022";
  display: inline-block;
  min-width: 40px;
  margin-left: -40px;
  padding-right: 10px;
  text-align: right;
}

/* A line set in under the one above it. */
p.indent {
  margin-left: 40px;
}

main a {
  color: var(--heading);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* The "page not found" page: no rule, 4% margins at every width (text at most 1920px wide),
   links not underlined. */
main.not-found {
  padding: calc(4vw + 1rem) max(4vw, (100% - 1920px) / 2) 4vw;
}

main.not-found a {
  text-decoration: none;
}

main.not-found li {
  list-style: disc;
}