:root{
  --paper:#F8F3EA;
  --ink:#1A1612;
  --link:#3D4F66;
  --rule:rgba(26,22,18,.16);
  --soft:rgba(26,22,18,.62);
  --measure:34rem;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(26,22,18,.035), rgba(26,22,18,0) 58%),
    radial-gradient(circle at 82% 78%, rgba(61,79,102,.05), rgba(26,22,18,0) 60%);
  color:var(--ink);
  font-family:"Literata",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.75;
  font-weight:400;
}

.wrap{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 1.35rem;
}

a{color:var(--link)}
a:hover{color:var(--ink)}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;font-family:"Inter",sans-serif;font-size:.85rem;
}
.skip:focus{left:.5rem;top:.5rem;z-index:10}

/* header */
.site-head{
  border-bottom:1px solid var(--rule);
  padding:1.1rem 0;
}
.head-inner{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.2rem;
  align-items:baseline;
  justify-content:space-between;
  max-width:46rem;
}
.wordmark{
  font-family:"Literata",Georgia,serif;
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:.015em;
  color:var(--ink);
  text-decoration:none;
}
.wordmark:hover{color:var(--link)}
.site-head nav{
  display:flex;
  gap:1.1rem;
  flex-wrap:wrap;
}
.site-head nav a{
  font-family:"Inter",Arial,sans-serif;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  text-decoration:none;
  padding-bottom:.15rem;
  border-bottom:1px solid transparent;
}
.site-head nav a:hover{border-bottom-color:var(--link)}

/* essay blocks */
main{padding:2.6rem 0 1rem}

.kicker{
  font-family:"Inter",Arial,sans-serif;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--soft);
  margin:0 0 .9rem;
}

h1{
  font-size:clamp(1.65rem,5.2vw,2.3rem);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.012em;
  margin:0 0 .8rem;
  max-width:19ch;
}

.meta{
  font-family:"Inter",Arial,sans-serif;
  font-size:.8rem;
  color:var(--soft);
  letter-spacing:.03em;
  margin:0 0 2rem;
  padding-bottom:1.3rem;
  border-bottom:1px solid var(--rule);
}
.meta a{text-decoration:none;border-bottom:1px solid var(--rule)}

.lede{
  font-size:1.1rem;
  line-height:1.72;
  margin:0 0 2.2rem;
}
.lede::first-letter{
  float:left;
  font-size:3.5em;
  line-height:.82;
  font-weight:600;
  padding:.05em .09em 0 0;
  color:var(--ink);
}

h2{
  font-size:1.14rem;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.005em;
  margin:2.5rem 0 .7rem;
}
h2::before{
  content:"";
  display:block;
  width:2.2rem;
  height:1px;
  background:var(--ink);
  opacity:.45;
  margin-bottom:.9rem;
}

p{margin:0 0 1.15rem}

.next{
  margin-top:2rem;
  font-family:"Inter",Arial,sans-serif;
  font-size:.84rem;
  letter-spacing:.02em;
}
.next a{text-decoration:none;border-bottom:1px solid var(--link);padding-bottom:.12rem}

/* figures */
.shot{
  margin:2rem 0 2.2rem;
}
.shot img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--rule);
}
.shot figcaption{
  font-family:"Inter",Arial,sans-serif;
  font-size:.74rem;
  line-height:1.55;
  color:var(--soft);
  margin-top:.6rem;
  letter-spacing:.015em;
}

/* remarks */
.remarks{
  border-top:1px solid var(--rule);
  margin-top:1rem;
  padding-top:.4rem;
}
.remark{
  margin:0 0 1.6rem;
  padding-left:1.1rem;
  border-left:2px solid var(--link);
}
.remark p{margin:0 0 .4rem;font-style:italic}
.remark footer{
  font-family:"Inter",Arial,sans-serif;
  font-size:.73rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--soft);
}

/* pull quote */
.pull{
  margin:2.2rem 0;
  padding:1.1rem 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.pull p{
  margin:0;
  font-size:1.08rem;
  line-height:1.6;
  font-style:italic;
}

/* hours */
.daylist{margin:1.4rem 0 1.2rem}
.daylist > div{
  display:flex;
  flex-wrap:wrap;
  gap:.2rem .9rem;
  justify-content:space-between;
  padding:.55rem 0;
  border-bottom:1px solid var(--rule);
}
.daylist dt{
  font-family:"Inter",Arial,sans-serif;
  font-size:.8rem;
  letter-spacing:.04em;
  font-weight:500;
}
.daylist dd{
  margin:0;
  font-size:.95rem;
  color:var(--soft);
  text-align:right;
  flex:1 1 12rem;
}
.note{font-size:.95rem;color:var(--soft)}

/* form */
.form-block{
  border-top:1px solid var(--rule);
  padding-top:2rem;
  margin-top:2.4rem;
}
.field{margin:0 0 1.1rem}
.field label{
  display:block;
  font-family:"Inter",Arial,sans-serif;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--soft);
  margin-bottom:.35rem;
}
input,textarea{
  width:100%;
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--rule);
  border-radius:0;
  padding:.6rem .7rem;
  line-height:1.5;
}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--link);
  box-shadow:inset 0 -2px 0 var(--link);
}
textarea{resize:vertical}
button{
  font-family:"Inter",Arial,sans-serif;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:0;
  padding:.7rem 1.4rem;
  cursor:pointer;
}
button:hover{background:var(--link);border-color:var(--link)}
.form-status{
  font-family:"Inter",Arial,sans-serif;
  font-size:.8rem;
  color:var(--link);
  min-height:1.3rem;
  margin:0;
}
.field.invalid input,
.field.invalid textarea{border-color:var(--link);box-shadow:inset 0 -2px 0 var(--link)}

/* contact */
.contact{
  border-top:1px solid var(--rule);
  padding-top:2rem;
  margin-top:2.6rem;
}
.address{
  font-size:1rem;
  line-height:1.9;
}
.address a{text-decoration:none;border-bottom:1px solid var(--rule)}

/* footer */
.site-foot{
  border-top:1px solid var(--rule);
  margin-top:3rem;
  padding:1.8rem 0 2.6rem;
  font-family:"Inter",Arial,sans-serif;
  font-size:.78rem;
  color:var(--soft);
}
.site-foot a{color:var(--link);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-inner{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem 1.2rem;
  justify-content:space-between;
}
.foot-inner p{margin:0}
.privacy h2{
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  margin:0 0 .8rem;
  color:var(--ink);
}
.privacy h2::before{display:none}
.privacy p{
  font-size:.82rem;
  line-height:1.65;
  margin:0 0 .8rem;
}
.foot-line{
  margin:1.4rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--rule);
  letter-spacing:.04em;
}

@media (max-width:520px){
  body{font-size:16.5px}
  .daylist dd{text-align:left}
  h1{max-width:none}
}