/* Fonts: Newsreader (display), IBM Plex Sans (body), IBM Plex Mono (label) */

:root{
  /* color. warm paper, near black ink, deep sienna accent. */
  --surface:      #faf8f5;
  --surface-2:    #f2eee7;
  --ink:          #17150f;   /* 16.9:1 on surface */
  --ink-soft:     #55504a;   /*  8.4:1 on surface, still comfortably readable */
  --accent:       #9c4a1f;
  --accent-deep:  #6f3413;
  --line:         #ddd6cb;

  /* type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-label:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad:  clamp(1.25rem, 5vw, 5rem);
  --maxw: 1180px;
  --rail: 12.5rem;   /* margin column that carries the section numbers */
}

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

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;                     /* 300 on a screen is why the last one was hard to read */
  font-size:clamp(1.0625rem, 1rem + .22vw, 1.1875rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
::selection{ background:var(--accent); color:var(--surface); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

main{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* reveal, deliberately subtle */
.pending{ opacity:0; transform:translateY(10px); }
.pending.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.25,1); }
@media (prefers-reduced-motion:reduce){ .pending,.pending.in{ opacity:1; transform:none; transition:none; } }

/* ─────────── masthead ─────────── */

.masthead{
  padding:clamp(4rem,11vw,9rem) 0 clamp(3rem,7vw,5.5rem);
  border-bottom:2px solid var(--ink);
}

.kicker{
  margin:0 0 clamp(1.25rem,2.5vw,1.75rem);
  font-family:var(--font-label); font-size:.9375rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
}

.masthead h1{
  margin:0 0 clamp(1.75rem,4vw,2.75rem);
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.75rem, 8vw, 6.5rem);
  line-height:1.02; letter-spacing:-.02em; text-wrap:balance;
  max-width:16ch;
}
.masthead h1 em{ font-style:italic; color:var(--accent); }

.lead{
  margin:0 0 1.5rem;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  line-height:1.42; max-width:30ch; color:var(--ink);
}
@media (min-width:900px){ .lead{ max-width:38ch; } }

.whereabouts{
  margin:0; max-width:44ch; color:var(--ink-soft); font-size:.9375rem;
}

.resume-link{ margin:1.1rem 0 0; }
.resume-link a{
  font-family:var(--font-label); font-size:.8125rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--accent); padding-bottom:.2rem;
  transition:color .25s ease, background .25s ease;
}
.resume-link a:hover{ color:var(--accent); background:rgba(156,74,31,.08); }

/* Five items is prime, so auto-fit leaves an empty trailing track and the rule
   stops short of the right edge. Pin the count instead: two up on small screens,
   all five once there is room. */
.ataglance{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 1.25rem; margin:clamp(2rem,4vw,3rem) 0 0;
  border-top:1px solid var(--line);
}
.ataglance > div{ padding:1rem 1.25rem 1rem 0; border-bottom:1px solid var(--line); }
.ataglance > div:last-child:nth-child(odd){ grid-column:1 / -1; }
@media (min-width:900px){
  .ataglance{ grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:0; }
  .ataglance > div:last-child:nth-child(odd){ grid-column:auto; }
  .ataglance > div + div{ padding-left:1.5rem; border-left:1px solid var(--line); }
}


.ataglance dt{
  margin-bottom:.4rem;
  font-family:var(--font-label); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ataglance dd{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.1; color:var(--accent);
}

/* ─────────── the banded editorial grid ─────────── */

.band{
  display:grid; gap:1.75rem 0;
  padding:clamp(2.75rem,5.5vw,4.5rem) 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:940px){
  .band{ grid-template-columns:var(--rail) minmax(0,1fr); gap:0 3.5rem; }
}

.band-label{
  font-family:var(--font-label); font-size:.75rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:baseline; gap:.65rem;
}
.band-label span{
  color:var(--accent); font-size:.6875rem; letter-spacing:.1em;
}
@media (min-width:940px){
  .band-label{ position:sticky; top:2.5rem; align-self:start; display:block; }
  .band-label span{ display:block; margin-bottom:.45rem; }
}

.band-body > *:first-child{ margin-top:0; }

.band-body h2{
  margin:0 0 .4rem;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.75rem,3.6vw,2.75rem); line-height:1.14; letter-spacing:-.012em;
}
.band-body h2 a{
  text-decoration:none; color:var(--accent);
  box-shadow:inset 0 -1px 0 0 rgba(156,74,31,.35);
  transition:box-shadow .3s ease;
}
.band-body h2 a:hover{ box-shadow:inset 0 -2px 0 0 var(--accent); }

.band-meta{
  margin:0 0 1.75rem; font-family:var(--font-label); font-size:.75rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}

.band-intro{
  margin:0 0 2.25rem; max-width:62ch;
  font-size:1.0625em; color:var(--ink);
}

/* ─────────── fact list ─────────── */

.facts{ margin:0; }
.facts > div{ padding:1.5rem 0; border-top:1px solid var(--line); }
.facts > div:last-of-type{ border-bottom:1px solid var(--line); }
.facts dt{
  margin-bottom:.5rem;
  font-family:var(--font-label); font-size:.75rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.facts dd{ margin:0; max-width:62ch; color:var(--ink-soft); }
/* the claim in full ink, the detail behind it softer, so the section can be
   scanned in a few seconds instead of read in full */
.facts dd b{ color:var(--ink); font-weight:500; }

.aside{
  margin:1.75rem 0 0; max-width:56ch;
  padding-left:1.1rem; border-left:2px solid var(--line);
  font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size:1.0625rem; line-height:1.55; color:var(--ink-soft);
}

/* ─────────── stances ─────────── */

.stances{ list-style:none; margin:0; padding:0; counter-reset:stance; }
.stances li{ padding:0 0 2.25rem; }
.stances li + li{ padding-top:2.25rem; border-top:1px solid var(--line); }
.stances li:last-child{ padding-bottom:0; }

.stances h3{
  margin:0 0 .85rem; text-wrap:balance;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.3rem,2.5vw,1.75rem); line-height:1.26; letter-spacing:-.008em;
  max-width:26ch; color:var(--ink);
}
.stances p{ margin:0; max-width:62ch; color:var(--ink-soft); }

/* ─────────── roles table ─────────── */

.roles{ width:100%; display:block; margin-bottom:2rem; }
.roles tbody{ display:block; }
.roles tr{
  display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr) auto;
  align-items:baseline; gap:.1rem 1.5rem;
  padding-block:1.1rem; border-top:1px solid var(--line);
}
.roles tr:last-child{ border-bottom:1px solid var(--line); }
.roles th,.roles td{ text-align:left; padding:0; font-weight:400; }
.roles th{
  font-family:var(--font-display); font-size:clamp(1.25rem,2.4vw,1.6rem);
  line-height:1.2;
}
.roles td{ color:var(--ink); font-size:1rem; line-height:1.3; }
.roles .yr{
  font-family:var(--font-label); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; text-align:right; white-space:nowrap;
  color:var(--ink-soft); line-height:1.25;
}
.roles tr:hover th{ color:var(--accent); }
@media (max-width:680px){
  .roles tr{ grid-template-columns:minmax(0,1fr) auto; }
  .roles th{ grid-column:1 / -1; }
}

.track-notes p{ margin:0 0 .85rem; max-width:62ch; color:var(--ink-soft); font-size:1rem; }
.track-notes .edu{
  margin:0; font-family:var(--font-label); font-size:.75rem;
  letter-spacing:.09em; text-transform:uppercase;
}

/* ─────────── projects ─────────── */

.proj{ padding-top:2.5rem; margin-top:2.5rem; border-top:1px solid var(--line); }
.proj:first-of-type{ padding-top:0; margin-top:0; border-top:0; }

.proj-head{ margin-bottom:1rem; }
.proj h3{
  margin:0 0 .25rem;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.1; letter-spacing:-.012em;
}
.proj h3 a{
  text-decoration:none;
  box-shadow:inset 0 -1px 0 0 var(--line);
  transition:box-shadow .35s ease, color .3s ease;
}
.proj h3 a:hover{ color:var(--accent); box-shadow:inset 0 -2px 0 0 var(--accent); }

.proj-kind{
  margin:0; font-family:var(--font-label); font-size:.75rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.proj > p{ margin:0 0 1.25rem; max-width:62ch; color:var(--ink-soft); }

/* inline links in running prose: readable as links without shouting */
.proj > p a, .facts dd a, .band-intro a{
  color:var(--ink); text-decoration:none;
  box-shadow:inset 0 -1px 0 0 var(--accent);
  transition:background .25s ease, color .25s ease;
}
.proj > p a:hover, .facts dd a:hover, .band-intro a:hover{
  color:var(--accent); background:rgba(156,74,31,.09);
}

.stack{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.75rem; padding:0; }
.stack li{
  font-family:var(--font-label); font-size:.6875rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:2px; padding:.3rem .55rem;
  background:var(--surface-2); white-space:nowrap;
}

.shot{
  display:block; overflow:hidden; max-width:600px;
  border:1px solid var(--line); border-radius:3px; background:var(--surface-2);
  box-shadow:0 1px 2px rgba(23,21,15,.05), 0 12px 28px -18px rgba(23,21,15,.4);
  transition:border-color .35s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2,.7,.25,1);
}
/* full page, scaled down. cropping to a fixed ratio sliced through whatever
   section happened to sit at the fold, which read as an accident. */
.shot img{ width:100%; transition:transform .6s cubic-bezier(.2,.7,.25,1); }
.shot:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(23,21,15,.06), 0 22px 44px -22px rgba(23,21,15,.45);
}
.shot:hover img{ transform:scale(1.012); }

.also{
  margin:2.75rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line);
  max-width:64ch; color:var(--ink-soft); font-size:1rem; line-height:1.7;
}
.also span{
  font-family:var(--font-label); font-size:.75rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink); margin-right:.35rem;
}
.also a{
  color:var(--ink); text-decoration:none;
  box-shadow:inset 0 -1px 0 0 var(--accent);
  transition:background .25s ease;
}
.also a:hover{ background:rgba(156,74,31,.09); }

/* ─────────── capabilities ─────────── */

.caps{ margin:0; display:grid; gap:1.5rem 3rem; }
@media (min-width:700px){ .caps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.caps dt{
  margin-bottom:.4rem;
  font-family:var(--font-label); font-size:.75rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.caps dd{ margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.6; }

/* ─────────── close ─────────── */

.close{ padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,4vw,3rem); }
.close-lead{
  margin:0 0 1.25rem; max-width:34ch;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.4;
}
.close-mail{ margin:0 0 1.75rem; }
.close-mail a{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.6rem,5vw,3.25rem); line-height:1.1; letter-spacing:-.015em;
  text-decoration:none; color:var(--accent); word-break:break-word;
  box-shadow:inset 0 -1px 0 0 rgba(156,74,31,.35);
  transition:box-shadow .35s ease;
}
.close-mail a:hover{ box-shadow:inset 0 -2px 0 0 var(--accent); }

.close-links{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin:0;
  font-family:var(--font-label); font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.close-links a{ color:var(--ink); text-decoration:none; box-shadow:inset 0 -1px 0 0 var(--accent); }
.close-links a:hover{ color:var(--accent); }

/* ─────────── footer ─────────── */

.docfoot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
  max-width:var(--maxw); margin:0 auto; padding:1.5rem var(--pad) 3rem;
  border-top:1px solid var(--line);
  font-family:var(--font-label); font-size:.6875rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}