/* qsDEM -- styling mirrors braydennoh.github.io/style.css: the same self-hosted Myriad Pro, the
   same 15px/1.5 body, the same 960px left-aligned column, the same nav, and the same two-column
   layout with a fixed-width sidebar present on every page. */

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #222;
  background: #fff;
  /* top padding reserves the space the fixed nav occupies */
  padding: var(--nav-h) 60px 30px;
  max-width: 960px;
}

/* height of the nav once it is stuck: 39 top + ~23 text + 26 bottom */
:root { --nav-h: 88px; }

/* the darkest colour of cmcrameri lipari (t = 0), the map the homepage crush is coloured on */
a {
  color: #031326;
  text-decoration: none;
}

a:hover { text-decoration: underline; }
a:visited { color: #031326; }

/* Top nav: pinned to the viewport at every width. `fixed` rather than `sticky` because sticky
   silently fails in a few mobile browsers and inside some flex/overflow ancestors. */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  font-size: 15px;
  padding: 39px 60px 26px;
  margin: 0;
}

nav a { margin-right: 4px; }

nav .sep {
  margin-right: 4px;
  color: #999;
}

nav a[aria-current="page"] { color: #222; }

/* Page heading, which lives in the sidebar */
h1 {
  font-size: 26px;
  font-weight: normal;
  margin-bottom: 16px;
}

/* Two columns: fixed sidebar on the left, content on the right */
.columns {
  display: flex;
  gap: 40px;
  align-items: flex-start;     /* a stretched flex item cannot stick */
}

/* the side panel stays put too, parked just under the nav */
.sidebar {
  position: sticky;
  top: var(--nav-h);
  width: 336px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.6;
}

.sidebar p { margin-bottom: 16px; }

.sidebar h3 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}

.sidebar .contact {
  font-size: 13px;
  color: #555;
  margin-top: 16px;
}

.sidebar .separator {
  border: none;
  border-top: 1px dotted #ccc;
  margin: 16px 0;
}

.main { flex: 1; min-width: 0; }

.main p { margin-bottom: 16px; }

.main h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

/* Mobile */
@media (max-width: 700px) {
  :root { --nav-h: 75px; }
  body { padding: var(--nav-h) 30px 20px; }
  nav { padding: 26px 30px; }

  .columns {
    flex-direction: column;
    gap: 0;                      /* no transparent gap for content to show through */
  }

  /* stacked, but still pinned under the nav: it needs its own background and stacking context
     so the main column slides underneath it rather than showing through */
  .sidebar {
    position: sticky;
    top: var(--nav-h);
    z-index: 4;                  /* below the nav (5), above the content */
    width: 100%;
    background: #fff;
    padding-bottom: 22px;
  }
}