/* resources.storiedcareers.com: shared styles for index, career-authoring, work-with-me, bespoke */
:root{
  --ink:#002526; --cream:#F5F0E8; --gold:#BB9D3C;
  --bg:#002526; --fg:#F5F0E8;
  --soft:rgba(245,240,232,.68); --rule:rgba(245,240,232,.18); --lift:rgba(245,240,232,.035);
  --display:"Baskervville",Georgia,"Times New Roman",serif;
  --body:"Josefin Sans","Gill Sans","Trebuchet MS",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  background:var(--bg);color:var(--fg);
  font-family:var(--body);font-weight:300;font-size:16px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

.page{
  flex:1 0 auto;width:100%;max-width:560px;margin-inline:auto;
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  gap:clamp(12px,3vh,30px);
  padding-block:clamp(16px,4vh,44px);padding-inline:28px;
}

/* Mast */
.handle{font-weight:400;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.line{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(22px,6vw,30px);line-height:1.15;margin-top:8px}
.mark{width:32px;height:1px;background:var(--gold);margin:14px auto 0}
.back{display:inline-block;font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);padding:4px 0}
.back:hover{color:var(--fg)}
.num{display:block;font-family:var(--display);font-size:12px;letter-spacing:.22em;color:var(--gold);padding-left:.22em}
.sub .num{margin-top:clamp(8px,2vh,18px)}
.sub .line{margin-top:6px;color:var(--gold)}
.sub .lede{font-size:14.5px;color:var(--soft);margin-top:6px;text-wrap:balance}

/* Doors */
.doors{flex:1 0 auto;max-height:580px;display:flex;flex-direction:column}
.door{
  flex:1 0 auto;padding-block:10px;display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid var(--rule);
}
.door:last-child{border-bottom:1px solid var(--rule)}
.door .num{margin-bottom:clamp(3px,1vh,8px)}
.door h2{
  font-family:var(--display);font-weight:400;font-size:clamp(19px,5.3vw,25px);
  line-height:1.2;text-wrap:balance;transition:color .2s ease;
}
.door p{font-size:14.5px;margin-top:4px;color:var(--soft);text-wrap:balance}
.door:hover h2{color:var(--gold)}
.door:focus-visible,.back:focus-visible,.cta:focus-visible,.foot a:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* Work With Me: two cards */
.page.work{flex:none;max-width:920px;justify-content:flex-start}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;text-align:left}
.card{
  display:flex;flex-direction:column;gap:14px;min-width:0;
  border:1px solid var(--rule);background:var(--lift);padding:clamp(22px,4vw,34px);
}
.card .kind{font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.card h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,3.2vw,27px);line-height:1.2;text-wrap:balance}
.card .what{color:var(--soft);font-size:15.5px}
.card .stance{font-family:var(--display);font-style:italic;font-size:19px}
.card ul{list-style:none;border-top:1px solid var(--rule)}
.card li{padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.card .buy{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:6px}
.card .price{font-family:var(--display);font-size:32px;line-height:1;font-variant-numeric:lining-nums}
.card .terms{font-size:13.5px;color:var(--soft)}
.cta{
  align-self:flex-start;margin-top:12px;font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:13px 20px 11px;border:1px solid var(--gold);color:var(--gold);transition:background .2s ease,color .2s ease;
}
.cta.open{background:var(--gold);color:var(--ink)}
.cta:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}

/* Footer */
.foot{flex:none;font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);text-align:center}
.foot i{font-style:normal;color:var(--gold);margin-inline:10px}
.foot a:hover{color:var(--fg)}

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