/* Layout, grid, spacing, colour. Typography is in type.css. */

:root{
  --paper:#FAF8F4;
  --ink:#1A1917;
  --muted:#6B6862;
  --rule:#DCD8D0;
  --accent:#1F3A5F;

  --label-col:132px;
  --date-col:112px;
  --gutter:clamp(32px,5vw,72px);
  --section-gap:clamp(60px,7vh,88px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

p,h1,h2{margin:0}

a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}
a:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-bottom-color:transparent}

.page{max-width:1120px;margin:0 auto;padding:0 clamp(24px,6vw,88px)}

.hero{
  padding-top:clamp(64px,9vh,112px);
  padding-bottom:clamp(20px,3vh,28px);
}
.descriptor{margin-top:14px}
.intro{margin-top:clamp(26px,3.5vh,36px);max-width:var(--measure)}

.section{padding-top:var(--section-gap)}
.row{
  display:grid;
  grid-template-columns:var(--label-col) minmax(0,1fr);
  column-gap:var(--gutter);
}
.label{grid-column:1}
.content{grid-column:2;max-width:var(--measure)}
.content p + p{margin-top:1em}

/* Background: ruled index */
.index{grid-column:2}
.entry{
  display:grid;
  grid-template-columns:var(--date-col) minmax(0,1fr);
  column-gap:var(--gutter);
  padding:16px 0 18px;
  border-top:1px solid var(--rule);
}
.index .entry:last-child{border-bottom:1px solid var(--rule)}
.period{font-variant-numeric:tabular-nums}
.role{margin-top:3px}

.colophon{padding:var(--section-gap) 0 clamp(48px,7vh,72px)}
.details p + p{margin-top:8px}

@media (max-width:760px){
  :root{--section-gap:clamp(44px,6vh,60px)}
  .page{padding:0 24px}
  .hero{padding-top:clamp(40px,6vh,60px);padding-bottom:clamp(16px,2.5vh,22px)}
  .row,.entry{grid-template-columns:minmax(0,1fr)}
  .content,.index{grid-column:1}
  .row .label{padding-top:0;margin-bottom:14px}
  .entry{padding:15px 0 17px}
  .entry .period{padding-top:0;margin-bottom:7px}
}