@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;900&display=swap');

/* dennismilton.com — one design.
   The name is a letterhead; the opening sentence carries the page. Anyone
   arriving here already knows whose site it is. */

:root{color-scheme:light;--ink:#111110;--paper:#f7f6f3;--mute:#6e6d67;--rule:#cfccc3;
  --rail:56px;--label:250px;--gutter:30px}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
body{margin:0;background:var(--paper);color:var(--ink);counter-reset:sec;
  font:400 16px/1.66 Archivo,-apple-system,"Helvetica Neue",Arial,sans-serif}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}

main{max-width:1120px;margin:0 auto;padding:104px 56px 120px}

header{margin-bottom:40px}
h1{margin:0;font-weight:700;font-size:clamp(23px,2vw,30px);line-height:1.25;
  letter-spacing:-.018em}
.headline{margin:14px 0 0;font-weight:400;font-size:15px;letter-spacing:.02em}
.titles{margin:5px 0 0;font-size:15px;font-weight:700;letter-spacing:-.005em}
.location{margin:2px 0 0;font-size:15px;color:var(--mute)}

.lead{border-top:1px solid var(--ink);padding-top:32px;margin-bottom:24px}
.lead p{margin:0 0 20px;font-size:clamp(29px,3.3vw,40px);line-height:1.18;
  font-weight:500;letter-spacing:-.02em;max-width:17em}
/* Only the opening sentence is a headline. The rest is introduction. */
.lead p + p{font-size:clamp(15px,1.3vw,18px);line-height:1.58;font-weight:400;
  letter-spacing:0;max-width:58ch;color:#3d3c37}
.lead p:last-child{margin-bottom:0}

/* A fixed rail of numbers and section names, so five sections can be skimmed
   without being read. Row gap stays zero: it applies between a paragraph and a
   list too, and opens holes inside a section. */
section{display:grid;grid-template-columns:var(--rail) var(--label) 1fr;
  gap:0 var(--gutter);border-top:1px solid var(--rule);padding:32px 0}
section::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);
  grid-column:1;font-weight:700;font-size:12px;color:var(--mute);padding-top:5px}
h2{grid-column:2;margin:0;font-weight:700;font-size:16px;letter-spacing:-.01em}
section p,section ul{grid-column:3;max-width:62ch}
section p{margin:0 0 16px}
section p:last-child{margin-bottom:0}

ul{margin:0 0 1.05em;padding:0;list-style:none;break-inside:avoid}
ul:last-child{margin-bottom:0}
li{position:relative;padding-left:1.15em;margin:0 0 5px;font-weight:500}
li::before{content:"";position:absolute;left:0;top:.62em;
  width:.42em;height:.42em;background:var(--ink)}

footer{margin-top:64px;border-top:1px solid var(--ink);padding-top:24px;
  display:grid;grid-template-columns:var(--rail) var(--label) 1fr;gap:0 var(--gutter)}
.kicker{grid-column:2/-1;margin:0 0 14px;font-size:clamp(17px,2vw,24px);
  font-weight:700;letter-spacing:-.02em}
.cv{grid-column:2;margin:0;font-size:14px;color:var(--mute);max-width:16em}
.contact{grid-column:3;margin:0;font-size:clamp(20px,2.4vw,30px);font-weight:700;
  letter-spacing:-.02em}
/* The one thing anyone taps. 44px minimum. */
.contact a{display:inline-block;padding-block:11px;color:var(--ink);
  text-decoration:none;border-bottom:3px solid var(--ink)}
a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

@media(max-width:820px){
  main{padding:56px 22px 72px}
  section,footer{grid-template-columns:1fr;gap:10px}
  section::before,h2,section p,section ul,.cv,.contact,.kicker{grid-column:1}
  .lead p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}