/* The Present Fathers. Tokens from C3_VIZUAL_SPEC v2, which takes them from the
   book cover. The cover is the brand's face and everything else follows it.
   Amber is the accent and it is rationed: the pillar rule, one word in the
   headline, the section markers. Nothing else. */
:root{
  --ground:#0A0A0A;
  --ground-lift:#151412;
  --cream:#EDE6DA;
  --white:#FFFFFF;
  --amber:#D47C2B;
  --cream-mid:#8A8378;
  --line:#26241F;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--cream);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
main{max-width:37rem;margin:0 auto;padding:5.5rem 1.5rem 0}
section{padding-bottom:3.25rem}
hr{border:0;border-top:1px solid var(--line);margin:0}

h1{font-family:var(--serif);font-weight:600;font-size:2.6rem;line-height:1.14;
   letter-spacing:-.01em;margin:0 0 1.4rem;color:var(--white)}
h1 em{font-style:italic;color:var(--amber)}

/* The pillar. The one device carried off the back cover, and the only place
   amber appears outside the headline. A second use would make it a stripe. */
h2{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.13em;
   text-transform:uppercase;color:var(--amber);margin:3.25rem 0 1.15rem;
   position:relative;padding-left:.95rem}
h2:before{content:"";position:absolute;left:0;top:.05em;bottom:.05em;
   width:2px;background:var(--amber)}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(212,124,43,.45);
  padding-bottom:1px;transition:border-color .18s}
a:hover{border-color:var(--amber)}
.lede{font-size:1.14rem;line-height:1.6}
.quiet{color:var(--cream-mid);font-size:.86rem;line-height:1.6}
.serif{font-family:var(--serif);font-size:1.32rem;line-height:1.5;color:var(--white)}
em{font-style:italic}

/* the one form */
form{margin:2.1rem 0 .85rem}
.row{display:flex;gap:.55rem;flex-wrap:wrap}
input[type=email]{
  flex:1 1 15rem;min-width:0;background:var(--ground-lift);color:var(--cream);
  border:1px solid var(--line);border-radius:3px;padding:.92rem 1rem;
  font-family:var(--sans);font-size:1rem;
}
input[type=email]::placeholder{color:var(--cream-mid)}
input[type=email]:focus{outline:none;border-color:var(--amber)}
button{
  background:var(--amber);color:#101010;border:1px solid var(--amber);
  border-radius:3px;padding:.92rem 1.5rem;font-family:var(--sans);font-weight:500;
  font-size:1rem;cursor:pointer;transition:opacity .18s;
}
button:hover{opacity:.88}
button[disabled]{opacity:.5;cursor:default}
.msg{min-height:1.4rem;margin:.5rem 0 0;font-size:.9rem;color:var(--cream-mid)}
.msg[data-state=error]{color:var(--cream)}

ul.contents{list-style:none;padding:0;margin:0}
ul.contents li{padding-left:1.15rem;position:relative;margin-bottom:.55rem}
ul.contents li:before{content:"";position:absolute;left:0;top:.72em;
  width:.4rem;height:1px;background:var(--amber)}

footer{border-top:1px solid var(--line);margin-top:1.5rem;padding:2rem 0 4rem}
footer p{margin-bottom:.7rem}

@media (max-width:520px){
  main{padding-top:3.75rem}
  h1{font-size:2.05rem}
  body{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}