/* Stephen Larson — motorcycle sales
   Palette: tank enamel + cast aluminium + indicator amber.
   Display: Archivo (American gothic signage). Body: Source Serif 4. */

:root{
  --enamel:#17293F;
  --enamel-deep:#0E1B2B;
  --enamel-line:#2C3F57;
  --alloy:#D7DBD8;
  --alloy-face:#EAEDEA;
  --ink:#191C1F;
  --ink-soft:#4C555C;
  --amber:#E0912F;
  --chrome:#F4F6F4;
  --chrome-dim:#A9B6C4;

  --k1:#3E5470;
  --k2:#55708F;
  --k3:#7089A6;
  --k4:#94A9BE;
  --k5:var(--amber);

  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  --measure:63ch;
  --gut:clamp(1.25rem,5vw,3.5rem);
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--alloy);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  width:100%;
  max-width:70rem;
  margin-inline:auto;
  padding-inline:var(--gut);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--amber);color:var(--enamel-deep);
  font-family:var(--sans);font-weight:700;
  padding:.75rem 1.25rem;
}
.skip:focus{left:0}

a{color:inherit}

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
}

/* ---------------------------------------------------------------- hero */

.hero{
  background:var(--enamel);
  color:var(--chrome);
  padding-block:clamp(3rem,9vw,6.5rem) clamp(2.5rem,7vw,4.5rem);
  border-bottom:1px solid var(--enamel-deep);
}

.hero-top{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem,4vw,2.5rem);
  align-items:end;
}
@media (min-width:60rem){
  .hero-top{grid-template-columns:minmax(0,1fr) auto;gap:clamp(2.5rem,5vw,4rem)}
}
.hero-id{container-type:inline-size;min-width:0}
.name span{overflow-wrap:anywhere}

.portrait{
  margin:0;
  width:min(8.5rem,38vw);
  justify-self:start;
}
@media (min-width:60rem){
  .portrait{width:12rem;justify-self:end}
}
.portrait img{
  display:block;
  width:100%;
  height:auto;
  border-radius:2px;
  border:1px solid var(--enamel-line);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.65);
}

.name{
  font-family:var(--sans);
  font-weight:900;
  font-stretch:88%;
  font-size:clamp(3.25rem,15.5vw,10.5rem);
  font-size:clamp(3.25rem,18cqi,10.5rem);
  line-height:.84;
  letter-spacing:-.025em;
  margin:0;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
}
.name span{display:block}

.standfirst{
  font-size:clamp(1.125rem,1rem + .8vw,1.5rem);
  line-height:1.4;
  color:var(--chrome);
  margin:clamp(1.5rem,4vw,2.25rem) 0 0;
  max-width:32ch;
  padding-top:clamp(1.25rem,3vw,1.75rem);
  border-top:3px solid var(--amber);
}

/* ------------------------------------------------------------ the rail */

.rail{margin-top:clamp(2.5rem,7vw,4.5rem)}

.rail-h{
  font-family:var(--sans);
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:.01em;
  color:var(--chrome-dim);
  margin:0 0 .875rem;
}

.bar{
  display:flex;
  width:100%;
  height:clamp(1.75rem,4.5vw,2.5rem);
  gap:2px;
  background:var(--enamel-deep);
  padding:2px;
}

.seg{
  flex:0 0 var(--w);
  min-width:3px;
  transform-origin:left center;
  animation:grow .9s cubic-bezier(.2,.7,.3,1) backwards;
}
.s1{--w:36.2%;background:var(--k1);animation-delay:.05s}
.s2{--w:27.3%;background:var(--k2);animation-delay:.20s}
.s3{--w:3.3%;background:var(--k3);animation-delay:.35s}
.s4{--w:29.0%;background:var(--k4);animation-delay:.50s}
.s5{--w:4.2%;background:var(--k5);animation-delay:.65s}

@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.bar-ends{
  display:flex;
  justify-content:space-between;
  font-family:var(--sans);
  font-weight:700;
  font-size:.875rem;
  color:var(--chrome-dim);
  margin:.5rem 0 0;
}

.legend{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.75rem;
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:500;
  color:var(--chrome);
}
.legend li{display:flex;align-items:center;gap:.5rem}
.legend i{width:.875rem;height:.875rem;flex:none}
.k1{background:var(--k1)}.k2{background:var(--k2)}.k3{background:var(--k3)}
.k4{background:var(--k4)}.k5{background:var(--k5)}

/* ---------------------------------------------------------- lead + figs */

.lead-band{
  background:var(--enamel-deep);
  color:var(--chrome);
  padding-block:clamp(2.5rem,6vw,4rem);
}
.lead{
  margin:0;
  max-width:var(--measure);
  font-size:clamp(1.125rem,1rem + .7vw,1.4375rem);
  line-height:1.55;
}

.method-h{
  font-family:var(--sans);
  font-weight:900;
  font-stretch:88%;
  font-size:clamp(1.25rem,1.1rem + .8vw,1.75rem);
  letter-spacing:-.015em;
  line-height:1.1;
  color:var(--amber);
  margin:clamp(2.25rem,5vw,3.25rem) 0 clamp(1.25rem,3vw,1.75rem);
}

.method{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13.25rem,1fr));
  gap:clamp(1.5rem,3vw,2rem);
}
.method > div{
  border-top:2px solid var(--enamel-line);
  padding-top:clamp(.85rem,2vw,1.1rem);
}
.method h3{
  font-family:var(--sans);
  font-weight:800;
  font-stretch:92%;
  font-size:1.0625rem;
  letter-spacing:-.005em;
  line-height:1.25;
  margin:0 0 .4rem;
  color:var(--chrome);
}
.method p{
  margin:0;
  font-size:.9688rem;
  line-height:1.55;
  color:var(--chrome-dim);
  max-width:38ch;
}

.figures{
  background:var(--alloy-face);
  padding-block:clamp(2.25rem,5vw,3.25rem);
  border-bottom:1px solid #C3C9C5;
}
.fig-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:clamp(1.5rem,4vw,2.5rem);
}
.fig-grid li{display:flex;flex-direction:column;gap:.25rem}
.fig-grid b{
  font-family:var(--sans);
  font-weight:900;
  font-stretch:88%;
  font-size:clamp(2.25rem,1.5rem + 2.4vw,3.25rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--enamel);
}
.fig-grid span{
  font-size:.9375rem;
  line-height:1.45;
  color:var(--ink-soft);
  max-width:22ch;
}

/* -------------------------------------------------------------- record */

.record{padding-block:clamp(3rem,7vw,5rem)}

.sec-h{
  font-family:var(--sans);
  font-weight:900;
  font-stretch:88%;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);
  letter-spacing:-.015em;
  line-height:1.1;
  margin:0 0 clamp(1.5rem,3.5vw,2.25rem);
  color:var(--enamel);
}

.job{
  display:grid;
  grid-template-columns:7.5rem 1fr;
  gap:0 clamp(1.25rem,3vw,2.5rem);
  padding-block:clamp(1.5rem,3.5vw,2.25rem);
  border-top:1px solid #BFC6C1;
}
.record .job:first-of-type{border-top:3px solid var(--enamel)}

.years{
  margin:0;
  font-family:var(--sans);
  line-height:1.15;
  display:flex;
  flex-direction:column;
  padding-top:.2rem;
}
.years b{
  font-weight:900;
  font-stretch:88%;
  font-size:1.5rem;
  letter-spacing:-.01em;
  color:var(--enamel);
}
.years span{
  font-weight:600;
  font-size:.9375rem;
  color:var(--ink-soft);
}
.current .years b,.current .years span{color:#9A5F0E}

.job-body h3{
  font-family:var(--sans);
  font-weight:800;
  font-stretch:92%;
  font-size:clamp(1.1875rem,1.1rem + .5vw,1.4375rem);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0;
  color:var(--ink);
}
.current .job-body h3::after{
  content:"";
  display:inline-block;
  width:.55rem;height:.55rem;
  background:var(--amber);
  margin-left:.55rem;
  vertical-align:.1em;
}

.role{
  font-family:var(--sans);
  font-weight:500;
  font-size:.9375rem;
  color:var(--ink-soft);
  margin:.35rem 0 0;
}
.where{display:block}

.job-body ul{
  margin:.9rem 0 0;
  padding-left:1.1rem;
  max-width:var(--measure);
}
.job-body li{margin-block:.4rem}
.job-body li::marker{color:var(--amber)}

/* --------------------------------------------------------- two columns */

.two-up{
  background:var(--alloy-face);
  border-top:1px solid #BFC6C1;
  padding-block:clamp(3rem,7vw,4.5rem);
}
.cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:clamp(2.5rem,6vw,4rem);
  align-items:start;
}
.col .sec-h{font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem)}
.col .sec-h + *{margin-top:0}
.col > .sec-h ~ .sec-h{margin-top:clamp(2rem,4vw,2.75rem)}

.plain{
  list-style:none;margin:0;padding:0;
  max-width:var(--measure);
}
.plain li{
  padding:.6rem 0 .6rem 1.1rem;
  border-top:1px solid #C9CFCB;
  position:relative;
}
.plain li:first-child{border-top:0;padding-top:0}
.plain li::before{
  content:"";position:absolute;left:0;top:1.25rem;
  width:.4rem;height:.4rem;background:var(--amber);
}
.plain li:first-child::before{top:.65rem}

.job.early{
  grid-template-columns:4.75rem 1fr;
  padding-block:1.25rem;
  border-top:1px solid #C9CFCB;
}
.job.early .years b{font-size:1.125rem}
.job.early .years span{font-size:.8125rem}
.job.early .job-body h3{font-size:1.0625rem}

/* ------------------------------------------------------------- contact */

.contact{
  background:var(--enamel);
  color:var(--chrome);
  padding-block:clamp(3rem,7vw,4.5rem);
}
.contact h2{
  font-family:var(--sans);
  font-weight:900;
  font-stretch:88%;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);
  letter-spacing:-.015em;
  margin:0 0 1.25rem;
}
.email{margin:0;font-size:clamp(1.125rem,1rem + 1vw,1.75rem);word-break:break-word}
.email a{
  font-family:var(--sans);
  font-weight:600;
  color:var(--amber);
  text-decoration-thickness:2px;
  text-underline-offset:.2em;
}
.dl{margin:clamp(1.5rem,3.5vw,2rem) 0 0}
.btn{
  display:inline-flex;
  flex-direction:column;
  gap:.15rem;
  font-family:var(--sans);
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  color:var(--chrome);
  text-decoration:none;
  padding:.85rem 1.4rem;
  border:2px solid var(--amber);
  border-radius:2px;
  transition:background-color .15s ease,color .15s ease;
}
.btn span{
  font-weight:500;
  font-size:.8125rem;
  color:var(--chrome-dim);
  transition:color .15s ease;
}
.btn:hover,.btn:focus-visible{background:var(--amber);color:var(--enamel-deep)}
.btn:hover span,.btn:focus-visible span{color:var(--enamel-deep)}

.social{
  margin:1.25rem 0 0;
  font-family:var(--sans);
  font-weight:500;
  font-size:.9375rem;
}
.social a{
  color:var(--chrome-dim);
  text-decoration-thickness:1px;
  text-underline-offset:.25em;
  transition:color .15s ease;
}
.social a:hover,.social a:focus-visible{color:var(--amber)}

.loc{
  margin:.75rem 0 0;
  color:var(--chrome-dim);
  font-family:var(--sans);
  font-size:.9375rem;
}

/* --------------------------------------------------------------- small */

@media (max-width:34rem){
  .job,.job.early{grid-template-columns:1fr;gap:.5rem}
  .years{flex-direction:row;gap:.4rem;align-items:baseline;padding-top:0}
  .years b{font-size:1.125rem}
  .years span::before{content:"to ";color:var(--ink-soft)}
  .job.early .years b{font-size:1rem}
  .legend{gap:.4rem 1.25rem;font-size:.875rem}
}

@media (prefers-reduced-motion:reduce){
  .seg{animation:none}
  *{transition:none !important}
}

@media print{
  .hero,.lead-band,.contact{background:#fff;color:#000}
  .name,.sec-h,.fig-grid b,.years b{color:#000}
  .skip,.rail{display:none}
}