/* Jordsmide articles — sits on top of the Studio's shared design system
   © 2025 Jordsmide.com */

body{
  background:
    radial-gradient(900px 420px at 78% -6%, rgba(202,224,244,.45) 0%, rgba(202,224,244,0) 60%),
    radial-gradient(1000px 460px at 20% -8%, #fbeee2 0%, rgba(251,238,226,0) 62%),
    var(--bg);
  line-height:1.68;
  min-height:100vh;
}

/* the Studio header, minus the tool controls */
.header .brand img{height:30px}
.header .navtab{font-size:.82rem}

article{max-width:740px;margin:0 auto;padding:2rem 1.25rem 4rem}
.crumbs{font-size:.76rem;color:var(--text3);margin-bottom:.9rem}
.crumbs a{color:var(--blue,#3d6f9e);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

h1{font-size:1.9rem;line-height:1.24;margin-bottom:.65rem;letter-spacing:-.015em}
.standfirst{font-size:1.07rem;color:var(--text2);margin-bottom:.6rem}
.byline{font-size:.76rem;color:var(--text3);margin-bottom:2rem;padding-bottom:1.1rem;
  border-bottom:1px solid var(--border)}
h2{font-size:1.28rem;margin:2.3rem 0 .7rem;letter-spacing:-.01em}
h3{font-size:1.02rem;margin:1.6rem 0 .45rem}
p{margin-bottom:1rem}
ul,ol{margin:0 0 1rem 1.35rem}
li{margin-bottom:.45rem}
a{color:var(--accent)}
em{color:var(--text2)}

.formula{
  background:var(--glass);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-left:3px solid var(--accent);border-radius:.6rem;
  padding:1rem 1.2rem;margin:1.35rem 0;text-align:center;font-size:1.02rem
}
.formula code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.formula .note{display:block;font-size:.79rem;color:var(--text3);margin-top:.45rem}

table{width:100%;border-collapse:collapse;margin:1.35rem 0;font-size:.9rem;
  background:var(--bg2);border:1px solid var(--border);border-radius:.6rem;overflow:hidden}
th{background:var(--glass);text-align:left;padding:.55rem .8rem;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text2);font-weight:700}
td{padding:.5rem .8rem;border-top:1px solid var(--bg3)}
td:not(:first-child){font-variant-numeric:tabular-nums}

.callout{
  background:var(--glass);border:1px solid var(--glass-border);border-radius:.65rem;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:1rem 1.2rem;margin:1.5rem 0;font-size:.93rem
}

/* the tool pitch, mid-article */
.toolbox{
  background:var(--bg2);border:1px solid var(--glass-border);border-radius:.8rem;
  padding:1.4rem;margin:2rem 0;box-shadow:0 4px 18px rgba(45,85,123,.13)
}
.toolbox h3{margin-top:0;font-size:1.05rem}
.toolbox p{font-size:.92rem;color:var(--text2);margin-bottom:1rem}
.toolbox.mid{display:flex;gap:1rem;align-items:center;text-align:left;flex-wrap:wrap}
.toolbox.mid div{flex:1 1 260px}
.toolbox.mid p{margin-bottom:0}
.btn-cta{
  display:inline-block;background:var(--accent);color:#fff!important;text-decoration:none;
  padding:.7rem 1.7rem;border-radius:.55rem;font-weight:600;font-size:.95rem;white-space:nowrap;
  box-shadow:0 4px 14px rgba(194,86,43,.28)
}
.btn-cta:hover{background:var(--accent-hover,#a8431d)}

.faq h3{margin-bottom:.25rem}
.faq p{font-size:.93rem;color:var(--text2)}

/* article listing */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.2rem}
.acard{
  background:var(--bg2);border:1px solid var(--glass-border);border-radius:.8rem;
  padding:1.1rem 1.2rem;text-decoration:none;color:inherit;display:block;
  box-shadow:0 3px 14px rgba(45,85,123,.10);transition:transform .16s,box-shadow .16s
}
.acard:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(45,85,123,.18)}
.acard h3{margin:0 0 .35rem;font-size:1rem;color:var(--accent)}
.acard p{margin:0;font-size:.85rem;color:var(--text2);line-height:1.5}

footer{border-top:1px solid var(--border);margin-top:3rem;padding-top:1.4rem;
  font-size:.79rem;color:var(--text3)}
footer a{color:var(--accent)}

@media(max-width:600px){ h1{font-size:1.55rem} article{padding-top:1.4rem} }