/* Classic 2000s personal-site layout: beveled button column + fixed-width content. */
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
}
a { color: #000099; }
a:visited { color: #464646; }

/* Box colors. colors.js replaces these with a random scheme on every page load;
   these are the fallback if JavaScript is off. */
:root {
  --btn: #6d6da5;
  --btn-light: #c9c9dd;
  --btn-dark: #3d3d5e;
  --btn-shadow: #2a2a45;
  --btn-hover: #7a7ab3;
  --bar1: #ffcc33;
  --bar2: #ff9922;
}

/* Layout sizes. The button column starts level with the photo, i.e. just
   below the name header. */
:root {
  --content-w: 250px;
  --masthead-h: 114px;
  --masthead-gap: 17px;
}

.page { display: flex; align-items: flex-start; }

/* Left column of raised buttons */
.nav { width: 99px; flex: none; padding: 0 0 0 4px; box-sizing: border-box; }

/* Hand-drawn symbols, one beside each line of the name header. */
.glyphs { height: var(--masthead-h); margin-bottom: var(--masthead-gap); width: 80px; display: flex; flex-direction: column; }
.glyphs .glyph {
  flex: 1;
  margin: 4px 2px;
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
  background: #f3f3f9; /* same pale grey as the name header */
}
.g1 { --mask: url(images/symbol1.png); }
.g2 { --mask: url(images/symbol2.png); }
.g3 { --mask: url(images/symbol3.png); }
.nav a {
  display: block;
  width: 80px; /* fits "Instagram" in real Verdana bold */
  height: 20px;
  box-sizing: border-box;
  margin-bottom: 1px;
  padding: 0 0 0 4px;
  background: var(--btn);
  border: 1px solid;
  border-color: var(--btn-light) var(--btn-dark) var(--btn-dark) var(--btn-light);
  box-shadow: 0 0 0 1px #9a9a9a;
  color: #fff;
  font: bold 11px/18px Verdana, Geneva, Tahoma, sans-serif;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-shadow: 1px 1px 0 var(--btn-shadow);
  white-space: nowrap;
  overflow: hidden;
}
.nav a:hover { background: var(--btn-hover); }
.nav a:active { border-color: var(--btn-dark) var(--btn-light) var(--btn-light) var(--btn-dark); }

.main { width: var(--content-w); flex: none; }

/* Pale name stacked one word per line; letters spread to the photo's width. */
.masthead {
  display: block;
  width: var(--content-w);
  height: var(--masthead-h);
  margin: 0 0 var(--masthead-gap);
  color: #f3f3f9;
  font: 33px/38px Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.masthead:visited { color: #f3f3f9; }
.masthead span { display: flex; justify-content: space-between; }
.masthead i { font-style: normal; }

.hero { display: block; width: var(--content-w); height: auto; }

.bar { margin: 0; padding: 4px 7px; font-size: 11px; line-height: 14px; }
.bar.new { background: var(--bar1); margin-top: 15px; }
.bar.cta { background: var(--bar2); }

.title { font: 22px Times, "Times New Roman", serif; margin: 0 0 18px; }
.content { line-height: 1.5; }

.soon { margin: 0; font-size: 13px; }

.footer { margin: 62px 0 40px; color: #c4c4c4; font-size: 11px; }

/* Phones: scale the header, photo and bars to fill the screen beside the buttons.
   250px desktop sizes map to (screen width - button column - gutter). */
@media (max-width: 480px) {
  :root {
    --content-w: calc(100vw - 115px);
    --masthead-h: calc((100vw - 115px) * 0.4554);
    --masthead-gap: 14px;
  }
  .nav a { height: 26px; line-height: 24px; } /* bigger tap targets */
  .masthead { font-size: calc((100vw - 115px) * 0.132); line-height: 1.15; }
  .hero { height: auto; }
  .bar { font-size: 12px; line-height: 16px; }
  .footer { margin-top: 40px; }
}