/* StraightForecast site styles */
:root{
  --paper:#F2F1EE; --graphite:#24262A; --steel:#8A8F94;
  --hair:#D8D6D1; --signal:#2B50D8; --body:#43474B;
  --measure:60ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--graphite);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:720px}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--steel)}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(242,241,238,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{flex:none}
.brand span{font-weight:600;letter-spacing:-.03em;font-size:1.08rem}
.brand span i{font-style:normal;font-weight:400;color:var(--steel)}
nav{display:flex;gap:26px}
nav a{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);text-decoration:none}
nav a:hover,nav a:focus-visible{color:var(--graphite)}
@media(max-width:720px){nav{display:none}}

/* hero */
.hero{padding:76px 0 62px;border-bottom:1px solid var(--hair)}
.hero.short{padding:66px 0 48px}
h1{font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.06;letter-spacing:-.038em;
  font-weight:600;margin:16px 0 24px;max-width:16ch}
h1.article{font-size:clamp(1.7rem,4.6vw,2.7rem);max-width:24ch;margin-bottom:20px}
h1 em{font-style:normal;color:var(--signal)}
.lede{font-size:clamp(1.05rem,2.3vw,1.28rem);line-height:1.6;max-width:46ch;
  margin:0 0 34px;color:var(--body);text-wrap:balance}
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:center}
.heromark{justify-self:end;width:100%;max-width:250px;opacity:.92}
.heromark svg{width:100%;max-width:250px;height:auto;display:block}
@media(max-width:900px){
  .herogrid{grid-template-columns:1fr}
  .heromark{display:none}
}
.sublede{font-size:.95rem;line-height:1.6;max-width:52ch;margin:-18px 0 32px;color:var(--steel)}
.cta{display:inline-block;background:var(--signal);color:#fff;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;padding:14px 24px;border:1px solid var(--signal);
  transition:background .18s,color .18s}
.cta:hover,.cta:focus-visible{background:transparent;color:var(--signal)}

/* sections */
section{padding:74px 0;border-bottom:1px solid var(--hair)}
h2{font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.15;letter-spacing:-.028em;
  font-weight:600;margin:14px 0 26px;max-width:24ch}
h3{font-size:1.06rem;letter-spacing:-.018em;font-weight:600;margin:0 0 10px}
p{margin:0 0 18px;max-width:var(--measure);color:var(--body)}
p.tight{max-width:56ch}
.grid{display:grid;gap:34px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}

/* pantheon */
.pantheon{margin:6px 0 38px}
.pantheon svg{width:100%;height:auto;display:block}
.pantheon .lintel{fill:var(--graphite)}
.pantheon .cols rect{fill:var(--graphite);transition:fill .22s ease}
.pantheon .cols rect.on{fill:var(--signal)}
.plabels{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  margin:2px 0 0;padding:0;gap:0}
.plabels button{width:100%;background:none;border:0;cursor:pointer;padding:6px 2px;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel);transition:color .22s ease}
.plabels button.on,.plabels button:hover{color:var(--signal)}
@media(max-width:620px){
  .plabels button{font-size:.5rem;letter-spacing:.06em}
}

/* pillars */
.pillars{border-top:1px solid var(--hair)}
.prow{display:grid;grid-template-columns:240px 1fr;gap:38px;
  padding:30px 0;border-bottom:1px solid var(--hair)}
.prow h3{font-size:clamp(1.25rem,2.6vw,1.6rem);letter-spacing:-.028em;
  font-weight:600;margin:0;position:sticky;top:86px;align-self:start}
.prow p{font-size:.98rem;margin:0 0 16px;max-width:56ch}
.prow ul{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.prow li{font-size:.88rem;color:var(--body);padding:7px 0;
  border-top:1px solid var(--hair)}
@media(max-width:820px){
  .prow{grid-template-columns:1fr;gap:14px;padding:24px 0}
  .prow h3{position:static}
  .prow ul{grid-template-columns:1fr}
}

/* services */
.services{display:grid;grid-template-columns:1fr 1fr;gap:0 46px;border-top:1px solid var(--hair)}
.svc{padding:22px 0;border-bottom:1px solid var(--hair)}
.svc h3{font-size:1rem;letter-spacing:-.02em;margin:0 0 8px}
.svc p{font-size:.92rem;line-height:1.62;margin:0;max-width:46ch}
@media(max-width:820px){.services{grid-template-columns:1fr;gap:0}}

/* career */
.career{width:100%;border-collapse:collapse;margin-top:8px}
.career td{padding:15px 0;border-bottom:1px solid var(--hair);vertical-align:top;font-size:.94rem}
.career td:first-child{width:130px;font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;letter-spacing:.1em;color:var(--steel);padding-top:19px;white-space:nowrap}
.career td:nth-child(2){font-weight:600}
.career td:last-child{color:var(--body)}
@media(max-width:620px){
  .career td{display:block;border:none;padding:2px 0}
  .career tr{display:block;padding:14px 0;border-bottom:1px solid var(--hair)}
  .career td:first-child{width:auto;padding-top:0}
}

/* writing index */
.piece{border-top:1px solid var(--hair);padding:22px 0}
.piece a.title{display:block;font-weight:600;font-size:1.02rem;letter-spacing:-.018em;
  text-decoration:none;margin:6px 0 8px}
.piece a.title:hover{color:var(--signal)}
.piece p{font-size:.92rem;margin:0 0 10px}
.more{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--signal);text-decoration:none}

/* article body */
article{padding:52px 0 78px}
article p{font-size:1.06rem;line-height:1.72;max-width:none}
article h2{font-size:1.32rem;margin:38px 0 14px;max-width:none}
article ul,article ol{max-width:none;color:var(--body);padding-left:20px}
article li{margin-bottom:9px}
article a{color:var(--signal)}
.pullquote{border-left:2px solid var(--signal);padding:4px 0 4px 22px;margin:32px 0;
  font-size:1.16rem;line-height:1.5;letter-spacing:-.018em;color:var(--graphite);font-weight:500}
.byline{border-top:1px solid var(--hair);margin-top:46px;padding-top:22px}
.byline p{font-size:.9rem}

/* contact */
.contact{background:var(--graphite);color:var(--paper);border-bottom:none}
.contact h2,.contact h3{color:var(--paper)}
.contact p{color:#B9BDC1}
.contact .mono{color:#8F959B}
.contact a.mail{font-size:clamp(1.1rem,3vw,1.6rem);font-weight:600;letter-spacing:-.025em;
  color:var(--paper);text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:3px}
.contact a.mail:hover{color:var(--signal)}

footer{background:var(--graphite);color:#7E848A;padding:26px 0 40px}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer .mono{color:#7E848A}
footer a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
}