/* From Court to Coast — brand additions layered over site-v2.css */

.wordmark{display:inline-flex;flex-direction:column;line-height:1.05}
.wordmark .wm-name{font-family:var(--disp);font-weight:400;letter-spacing:.005em}
.wordmark .wm-by{font-family:var(--body);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;opacity:.82;margin-top:5px}
.nav .wordmark .wm-name{font-size:19px}
footer .wordmark{display:inline-flex}
footer .wordmark .wm-name{font-size:17px;color:var(--navy)}
footer .wordmark .wm-by{color:var(--brass);opacity:1}

/* editor sidebar wordmark */
.side .wm .wm-name{display:block}
.side .wm .wm-by{display:block;font-family:var(--body);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-top:4px;font-weight:600}

/* signup form states */
.signup form[data-state="done"] input,.signup form[data-state="done"] button{display:none}
.signup .thanks{font-size:14px;color:var(--navy);margin-top:6px}
.signup .err{font-size:13px;color:#a33;margin-top:6px}

/* newsletter band (the markup uses .signup; site-v2.css only styled .sub) */
.signup{background:var(--navy);color:#fff;padding:clamp(56px,7vw,100px) var(--gut);text-align:center}
.signup .in{max-width:560px;margin:0 auto}
.signup h3{font-family:var(--disp);font-weight:300;font-style:italic;
  font-size:clamp(26px,3.6vw,44px);letter-spacing:-.022em;margin-bottom:14px;color:#fff}
.signup .in>p{color:rgba(255,255,255,.72);max-width:44ch;margin:0 auto 30px;font-weight:300}
.signup form{display:flex;max-width:420px;margin:0 auto;border-bottom:1px solid rgba(255,255,255,.42);flex-wrap:wrap}
.signup input{flex:1;min-width:200px;border:0;background:transparent;font:inherit;font-size:16px;padding:12px 2px;color:#fff}
.signup input::placeholder{color:rgba(255,255,255,.42)}
.signup input:focus{outline:none}
.signup button{border:0;background:transparent;font:inherit;cursor:pointer;color:var(--brass);
  font-family:var(--disp);font-style:italic;font-size:17px;padding:12px 6px}
.signup .thanks{color:#fff;width:100%;padding:12px 0}
.signup .err{color:#F3B8A8;width:100%}
.signup .in>a{margin-top:6px}

/* ============ MASTHEAD ============
   The brand name is the title of the site, so it leads every page at display
   size with the navigation underneath. Three treatments of one object: the
   home page largest, inner pages over their opening image, and pages with no
   image sitting on the paper. */
.masthead{
  position:absolute;top:var(--bar-h);left:0;right:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.7vw,22px);
  padding:clamp(22px,3.4vw,44px) var(--gut) 0;
  color:#fff;text-shadow:0 1px 18px rgba(8,12,18,.55);
}
.masthead .wordmark{align-items:center;text-align:center}
.masthead .wm-name{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(26px,5.4vw,68px);
  line-height:.98;letter-spacing:-.022em;text-wrap:balance;
}
.masthead .wm-by{
  font-size:clamp(9px,1.05vw,12px);letter-spacing:.42em;
  margin-top:clamp(7px,.9vw,12px);opacity:.88;text-indent:.42em;
}
.masthead ul{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(16px,2.4vw,34px);list-style:none;
  font-size:clamp(11px,1.05vw,13px);letter-spacing:.1em;text-transform:uppercase;
}
.masthead ul a{opacity:.88;padding-bottom:4px;border-bottom:1px solid transparent;transition:.25s}
.masthead ul a:hover{opacity:1;border-bottom-color:currentColor}
.masthead .menu-btn{display:none;position:absolute;right:var(--gut);top:clamp(22px,3.4vw,44px)}

/* the home page gives it the most room */
.masthead.home{gap:clamp(14px,2vw,26px);padding-top:clamp(26px,4vw,52px)}
.masthead.home .wm-name{font-size:clamp(30px,6.6vw,88px)}
.masthead.home .wm-by{font-size:clamp(9px,1.15vw,13px)}
.masthead.home .menu-btn{top:clamp(26px,4vw,52px)}

/* pages with no opening image: in the flow, navy on paper */
.masthead.on-paper{
  position:static;color:var(--navy);text-shadow:none;
  padding-bottom:clamp(20px,3vw,38px);
  border-bottom:1px solid var(--line);
}
.masthead.on-paper .wm-by{color:var(--brass);opacity:1}
.masthead.on-paper ul a{opacity:.75}
.masthead.on-paper ul a:hover{opacity:1}
.masthead.on-paper .menu-btn{color:var(--navy)}

/* the page's own headline steps back so the brand is clearly the larger of the two */
body:has(.masthead) .hero h1{font-size:clamp(28px,4.6vw,58px)}
body:has(.masthead.home) .hero h1{font-size:clamp(30px,4.9vw,66px)}

@media(max-width:760px){
  .masthead ul{display:none}
  .masthead .menu-btn{display:block}
  .masthead,.masthead .wordmark{align-items:flex-start;text-align:left}
}


/* An article's lead photo sits directly under the masthead, and unlike .hero it
   had no scrim — so the brand name landed on whatever was at the top of the
   picture, which for a bright sky meant white on near-white. Darken the top of
   the lead only, leaving the rest of the photograph alone. */
.art .lead{position:relative}
.art .lead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,20,.52) 0%,rgba(10,14,20,.30) 26%,rgba(10,14,20,.04) 52%,rgba(10,14,20,0) 68%);
}