/* willstruloeff.com, hidden site.
   A resume on four pages: a combined front page, then one page per field of
   expertise. Schibsted Grotesk for headings, IBM Plex Sans for reading, IBM
   Plex Mono for dates and figures. One accent. Light and dark follow the
   system. No scripts. */

@font-face {
  font-family: 'Schibsted';
  src: url('fonts/schibsted.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('fonts/plex-sans.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('fonts/plex-sans-italic.woff2') format('woff2');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/plex-mono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5f5f2;
  --panel: #ffffff;
  --ink: #17191b;
  --muted: #6b6f72;
  --rule: #dededa;
  --frame: #cdcdc7;
  --ac: #1d4fb0;
  --r: 6px;
  --measure: 640px;
  --display: 'Schibsted', 'Schibsted Grotesk', 'Plex Sans', system-ui, sans-serif;
  --sans: 'Plex Sans', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Plex Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131313;
    --panel: #1c1c1b;
    --ink: #e8e8e4;
    --muted: #9b9b95;
    --rule: #2c2c2a;
    --frame: #3a3a38;
    --ac: #8ab0ff;
  }
}

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

html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 28px 64px;
}

a {
  color: var(--ac);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--ac) 45%, transparent);
}
a:hover { text-decoration-color: var(--ac); }
a:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--ac) 20%, transparent); }

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* ---- top bar ----------------------------------------------------------- */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 28px;
  padding: 26px 0 0;
}
.top .name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.top nav { display: flex; gap: 22px; font-size: 15.5px; }
.top nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ac); }

/* ---- page opening ------------------------------------------------------ */

.hero { padding: 56px 0 0; }
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  color: var(--ink);
}
.contactline {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 20px;
  max-width: none;
}
.contactline a { color: inherit; }
.contactline a:hover { color: var(--ac); }
.lede, .intro { font-size: 18px; line-height: 1.5; max-width: 34em; margin: 0; }

/* ---- the three fields, on the front page ------------------------------- */

ul.fields {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
}
ul.fields li { border-top: 2px solid var(--ac); padding-top: 12px; }
ul.fields h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.008em;
  margin: 0 0 4px;
}
ul.fields h2 a { color: var(--ink); text-decoration: none; }
ul.fields h2 a:hover { color: var(--ac); text-decoration: underline; }
ul.fields p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* ---- sections and entries ---------------------------------------------- */

section { margin-top: 52px; }
section.first { margin-top: 44px; }

h2.group {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.entry { margin-bottom: 34px; }
.entry:last-child { margin-bottom: 0; }
.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 20px;
  margin-bottom: 4px;
}
.role {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.012em;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.entry-when, .entry-sub {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: none;
}
.entry-sub { margin-bottom: 10px; }
.entry-sub a, .entry-when a { color: inherit; }
.entry-sub a:hover, .entry-when a:hover { color: var(--ac); }

.entry ul { margin: 10px 0 0; padding-left: 1.15em; }
.entry li { margin: 0 0 7px; max-width: var(--measure); }
.entry li:last-child { margin-bottom: 0; }
.entry ul + p { margin-top: 1em; }

/* ---- figures ----------------------------------------------------------- */

figure { margin: 20px 0 0; max-width: 520px; }
figure.phone { max-width: 232px; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--frame);
  border-radius: var(--r);
  background: var(--panel);
}
figcaption {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- the machine, on the IT page --------------------------------------- */

h3.sub {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.008em;
  margin: 30px 0 0;
}
.live {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 6px 16px;
  max-width: 560px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  margin: 14px 0 8px;
}
.lrow {
  display: grid;
  grid-template-columns: 78px 48px minmax(56px, 1fr) 98px 86px;
  column-gap: 12px;
  align-items: center;
  padding: 8px 0;
  white-space: nowrap;
}
.lrow .lt, .lrow .lw, .lrow .lm { font-variant-numeric: tabular-nums; }
.lrow small { font-size: inherit; color: var(--muted); }
.lb {
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ac) 14%, transparent);
  overflow: hidden;
}
.lb i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  min-width: 2px;
  background: var(--ac);
  border-radius: 3px;
}
.stamp {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
  margin: 0 0 1.2em;
}

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

footer {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 32px;
}
footer p { margin: 0; max-width: 44em; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }

/* ---- narrow screens ---------------------------------------------------- */

@media (max-width: 780px) {
  .page { padding: 0 20px 48px; }
  .top { padding-top: 20px; }
  .top nav { gap: 18px; }
  .hero { padding: 36px 0 0; }
  section { margin-top: 40px; }
  section.first { margin-top: 34px; }
  ul.fields { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .entry-head { gap: 0 16px; }
}
@media (max-width: 520px) {
  .lrow { grid-template-columns: 74px 46px minmax(36px, 1fr) 60px; column-gap: 10px; }
  .lrow .lm { display: none; }
  .lrow small { display: none; }
  .live { padding: 4px 14px; }
}
@media (max-width: 420px) {
  body { font-size: 16.5px; }
  .top nav { gap: 14px; font-size: 15px; }
}

@media print {
  html { background: #fff; }
  body { color: #000; }
  .top nav, footer { display: none; }
}