/* The first call - Jesse J. Camacho concept site 10 */

:root{
  --ink:      #15171A;
  --navy:     #1E3A5F;
  --navy-deep:#16304E;
  --band:     #F6F6F4;
  --hairline: #E4E5E2;
  --white:    #FFFFFF;
}

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

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

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Literata",Georgia,"Century Schoolbook",serif;
  font-weight:400;
  font-size:20px;
  line-height:1.62;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;}

/* ---------- links ---------- */

a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color 180ms ease;}
a:hover{color:var(--navy-deep);text-decoration-thickness:2px;}
a:focus{outline:2px solid var(--navy);outline-offset:3px;}

.skip{
  position:absolute;left:12px;top:-100px;z-index:10;
  display:flex;align-items:center;
  min-height:44px;padding:0 18px;
  background:var(--navy);color:var(--white);
  text-decoration:underline;
  border-radius:0;
}
.skip:focus{top:12px;outline:2px solid var(--ink);outline-offset:3px;}

.vh{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ---------- shell ---------- */

.wrap{
  max-width:48rem;
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}

/* ---------- the opening ---------- */

.opening{
  max-width:58rem;
  padding-top:84px;
  padding-bottom:52px;
  border-bottom:1px solid var(--hairline);
  display:grid;
  grid-template-columns:7fr 4fr;
  column-gap:48px;
  align-items:end;
}

.eyebrow{
  margin:0 0 18px;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--navy);
}

h1{
  margin:0 0 14px;
  font-size:44px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.025em;
  color:var(--ink);
}

.opening-line{
  margin:0 0 22px;
  font-size:24px;
  line-height:1.35;
  color:var(--navy);
}

.opening-para{
  margin:0;
  max-width:62ch;
  font-size:20px;
  line-height:1.6;
  color:var(--ink);
}

.opening-portrait img{
  display:block;
  width:100%;
  max-width:360px;
  height:auto;
  border-bottom:3px solid var(--navy);
}

/* ---------- navigation ---------- */

.nav{
  background:var(--white);
  border-bottom:1px solid var(--hairline);
}

.nav-inner{
  max-width:1080px;
  margin:0 auto;
  padding:0 clamp(1.25rem,4vw,2.5rem);
}

.nav ul{
  display:flex;
  flex-wrap:wrap;
  column-gap:26px;
  margin:0;
  padding:0;
  list-style:none;
}

.nav a{
  display:flex;
  align-items:center;
  min-height:52px;
  font-size:19px;
  line-height:1.3;
  color:var(--navy);
  text-decoration:none;
  border-bottom:2px solid transparent;
}

.nav a:hover{
  color:var(--navy-deep);
  text-decoration:underline;
  text-underline-offset:4px;
}

.nav a:focus{outline:2px solid var(--navy);outline-offset:-3px;}

.nav a[aria-current="page"]{
  font-weight:600;
  border-bottom-color:var(--navy);
}

/* ---------- the interior banner ---------- */

.banner{
  padding:52px 0 36px;
  border-bottom:1px solid var(--hairline);
}

.banner-slug{
  margin:0 0 18px;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink);
}

.banner h1{
  position:relative;
  margin:0;
  padding-left:2.4rem;
  max-width:20em;
  font-size:36px;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--navy);
}

.banner h1::before{
  content:"";
  position:absolute;
  left:0;
  top:0.56em;
  width:1.35rem;
  height:2px;
  background:var(--navy);
}

.banner h1:focus{outline:2px solid var(--navy);outline-offset:6px;}

/* ---------- the call ---------- */

.call{margin:0;padding:0;}

.q{
  position:relative;
  margin:56px 0 0;
  padding-left:2.4rem;
  max-width:26em;
  font-size:24px;
  font-weight:400;
  line-height:1.4;
  color:var(--navy);
}

.q::before{
  content:"";
  position:absolute;
  left:0;
  top:0.72em;
  width:1.35rem;
  height:2px;
  background:var(--navy);
}

.call > .q:first-of-type{margin-top:44px;}

.a{
  margin:20px 0 0 3.4rem;
  max-width:620px;
  font-size:20px;
  color:var(--ink);
}

.a p{margin:0 0 1.05em;}
.a p:last-child{margin-bottom:0;}
.a.first{margin-top:44px;}

/* ---------- plain passages between exchanges ---------- */

.passage{margin-top:60px;}
.passage h2{margin:0 0 20px;}

.rows{
  margin:0;
  padding:0;
  list-style:none;
  max-width:40em;
  border-top:1px solid var(--hairline);
}

.rows li{
  padding:16px 0;
  border-bottom:1px solid var(--hairline);
  font-size:19px;
  line-height:1.55;
}

.rows .label{display:block;font-weight:600;color:var(--navy);}
.rows .detail{display:block;color:var(--ink);}

.rows--plain .label{font-weight:400;color:var(--ink);}
.rows--ask .label{font-weight:400;color:var(--navy);}

.steps{
  margin:0;
  padding:0 0 0 1.5em;
  max-width:38em;
}

.steps li{
  margin-bottom:20px;
  font-size:20px;
  line-height:1.6;
}

.steps li:last-child{margin-bottom:0;}
.steps strong{font-weight:600;color:var(--navy);}

/* ---------- the seven, in full ---------- */

.rec{
  margin:0 0 46px;
  padding-top:26px;
  max-width:40em;
  border-top:2px solid var(--navy);
}

.rec:last-of-type{margin-bottom:0;}

.rec blockquote{
  margin:0;
  font-size:19px;
  line-height:1.62;
  color:var(--ink);
}

.rec blockquote p{margin:0 0 1em;}
.rec blockquote p:last-child{margin-bottom:0;}

.rec figcaption{
  margin-top:20px;
  font-size:19px;
  line-height:1.5;
}

.rec .who{display:block;font-weight:600;color:var(--navy);}
.rec .role{display:block;margin-top:2px;color:var(--ink);}

.rec figcaption a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:4px;
}

/* ---------- photographs not yet taken ---------- */

.ph{
  margin:36px 0 0 3.4rem;
  padding:26px 22px;
  max-width:38em;
  background:var(--band);
  border:1px dashed var(--navy);
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
}

.ph .ph-label{
  display:block;
  font-weight:600;
  color:var(--navy);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:17px;
  margin-bottom:8px;
}

/* ---------- the standing note ---------- */

.note{
  margin-top:60px;
  padding:30px 26px;
  max-width:40em;
  background:var(--band);
  border-top:2px solid var(--navy);
}

.note h2{font-size:19px;margin-bottom:14px;}

.note p{
  margin:0 0 12px;
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
}

.note p:last-child{margin-bottom:0;}

/* ---------- the interruptions ---------- */

.voice{
  margin:56px 0 0;
  padding:34px 30px 30px;
  background:var(--band);
  border-top:2px solid var(--navy);
  border-bottom:1px solid var(--hairline);
}

.voice blockquote{
  margin:0;
  max-width:36em;
  font-size:19px;
  line-height:1.6;
  color:var(--ink);
}

.voice blockquote p{margin:0;}

.voice figcaption{
  margin-top:22px;
  max-width:36em;
  font-size:19px;
  line-height:1.5;
}

.voice .who{display:block;font-weight:600;color:var(--navy);}
.voice .role{display:block;margin-top:2px;color:var(--ink);}

.voice figcaption a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:4px;
}

/* ---------- close ---------- */

.close{
  margin-top:76px;
  padding-top:38px;
  border-top:1px solid var(--hairline);
}

h2{
  margin:0 0 20px;
  font-size:24px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
}

.close h2{margin-bottom:28px;}

.contact{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--hairline);
  max-width:34em;
}

.contact li{border-bottom:1px solid var(--hairline);}

.contact a{
  display:flex;
  align-items:center;
  min-height:56px;
  padding:8px 0;
}

.where{
  margin:26px 0 0;
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
}

/* ---------- fine print ---------- */

.page-foot{
  margin-top:64px;
  padding-top:34px;
  padding-bottom:88px;
  border-top:1px solid var(--hairline);
}

.page-foot h2{font-size:19px;margin-bottom:14px;}

.page-foot .contact{margin-bottom:36px;}
.page-foot .contact a{min-height:52px;font-size:19px;}

.page-foot p{
  margin:0 0 12px;
  max-width:38em;
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
}

.page-foot p:last-child{margin-bottom:0;}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference){
  .opening.rise{animation:rise 520ms ease both;}
}

@keyframes rise{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

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

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

@media (max-width:860px){
  .opening{
    grid-template-columns:1fr;
    column-gap:0;
  }
  .opening-portrait{order:-1;margin-bottom:36px;}
  .opening-portrait img{width:70%;max-width:280px;}
}

@media (max-width:640px){
  .wrap{padding-left:20px;padding-right:20px;}
  .opening{padding-top:52px;padding-bottom:44px;}
  h1{font-size:34px;}
  .opening-line{font-size:22px;}
  .opening-para{font-size:19px;}
  .q{
    margin-top:44px;
    padding-left:1.45rem;
    font-size:22px;
  }
  .q::before{width:0.9rem;top:0.75em;}
  .a{
    margin-left:2.2rem;
    font-size:19px;
  }
  .voice{
    margin-left:-20px;
    margin-right:-20px;
    padding:28px 20px 26px;
  }
  .close{margin-top:56px;}

  .nav ul{column-gap:20px;}
  .nav a{min-height:46px;font-size:18px;}

  .banner{padding:36px 0 30px;}
  .banner-slug{margin-bottom:14px;font-size:16px;}
  .banner h1{font-size:28px;letter-spacing:-0.015em;padding-left:1.45rem;}
  .banner h1::before{width:0.9rem;top:0.62em;}

  .a.first{margin-top:36px;}
  .ph{margin-left:2.2rem;padding:22px 18px;}
  .steps li{font-size:19px;}
  .note{padding:24px 20px;}
  .passage{margin-top:48px;}
}