/* nicotaylor.com
   ----------------------------------------------------------------
   The six values below control the whole site. Change one and every
   page follows. Everything else in this file depends on them.
   ---------------------------------------------------------------- */

:root {
  --size:     15px;    /* type size, everywhere */
  --leading:  1.6;     /* line height */
  --measure:  400px;   /* width of the text column */
  --pad:      40px;    /* margin around the page */
  --rail:     90px;    /* width of the sidebar (and the portrait) */
  --gutter:   30px;    /* sidebar to rule to text */

  /* spacing, derived from the above */
  --gap:      20px;    /* between paragraphs */
  --gap-lg:   40px;    /* between sections */

  /* colour */
  --ink:      #000000;
  --ground:   #ffffff;
  --rule:     #8a8378;
  --mark:     #3a3a3a;
  --hover:    #6b6357;

  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
          "Segoe UI", Arial, sans-serif;
}

/* ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--size);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--ink); }
a:hover { color: var(--hover); }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* layout ---------------------------------------------------------- */

.page {
  min-height: 100vh;
  padding: var(--pad) max(16px, var(--pad));
  display: flex;
  flex-direction: column;
}

.body {
  flex-grow: 1;
  display: flex;
  gap: var(--gutter);
  align-items: stretch;
}

.rail {
  width: var(--rail);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portrait {
  width: var(--rail);
  height: calc(var(--rail) * 1.216);
  object-fit: cover;
  display: block;
}

.home { display: block; line-height: 0; flex-shrink: 0; }
.home:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

.ident { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.name { font-weight: 500; text-decoration: none; }

nav { display: flex; flex-direction: column; gap: 4px; }
nav a { text-decoration: none; }
nav a[aria-current="page"] { font-weight: 500; }

.spine {
  width: 1px;
  flex-shrink: 0;
  background: var(--rule);
}

main {
  flex-grow: 1;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* text ------------------------------------------------------------ */

.block { display: flex; flex-direction: column; gap: var(--gap); }

h1 {
  margin: 0;
  font-size: var(--size);
  font-weight: 500;
  line-height: var(--leading);
}

p { margin: 0; }

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

li a, main p a { text-underline-offset: 0.2em; }

footer {
  margin-top: var(--gap-lg);
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

/* phones and narrow windows --------------------------------------- */

@media (max-width: 700px) {
  :root { --rail: 64px; }

  .body { flex-direction: column; gap: var(--gap-lg); }
  .rail { width: auto; flex-direction: row; align-items: flex-start; gap: 20px; }
  .ident { flex-grow: 1; gap: 12px; }
  nav { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
  .spine { width: auto; height: 1px; }
  main { max-width: none; }
}

/* projects page ---------------------------------------------------- */

.marks {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  min-height: 28px;
  margin: 6px 0;
}

.marks a { display: block; line-height: 0; }
.marks a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.marks img, .marks svg { display: block; }
.marks svg { color: var(--mark); }

/* sized by optical weight, not by height: a wide solid mark and a
   thin round one need different boxes to carry the same presence */
.m-harpers { width: 26px; height: 26px; }
.m-fsg     { width: 25px; height: 28px; }
.m-cca     { width: 38px; height: 18px; }
.m-osmo    { width: 33px; height: 21px; }
.m-eno     { width: 40px; height: 25px; }