/* Shared styles for GrowJin pages outside index.html (blog, posts).
   Mirrors the tokens/components in index.html's inline <style> so these
   pages match the main site without touching the tested homepage markup. */

:root{
  --ink:#101318;
  --ink-70:#454b56;
  --ink-45:#6f7683;
  --paper:#E6E9EE;
  --panel:#F7F8FA;
  --white:#FFFFFF;
  --blue:#12A664;
  --blue-dk:#0B7A48;
  --red:#D42A12;
  --amber:#B06E00;
  --green:#0B7A48;
  --line:rgba(16,19,24,.16);
  --line-soft:rgba(16,19,24,.08);
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:104px;
  --shadow:4px 4px 0 var(--ink);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:17px;line-height:1.6;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:56px 56px;
}
h1,h2,h3,h4{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:0 0 var(--s2)}
h1{font-size:clamp(2.6rem,7vw,4.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.1rem)}
h3{font-size:1.3rem;letter-spacing:-.02em}
p{margin:0 0 var(--s2);max-width:66ch}
a{color:var(--blue)}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--s3)}
.sec{padding:var(--s7) 0;border-top:1px solid var(--line)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);margin:0 0 var(--s2)}
.eyebrow strong{color:var(--blue);font-weight:700}
.lede{font-size:1.19rem;color:var(--ink-70);max-width:60ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:3px;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.01em;text-decoration:none;
  border:2px solid var(--ink);background:var(--blue);color:#fff;box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);background:var(--blue-dk)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:#fff;box-shadow:none;transform:none}
.btn--sm{min-height:44px;padding:0 18px;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.subcta{font-size:.85rem;color:var(--ink-45);margin:14px 0 0}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(230,233,238,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);height:68px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.16rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo svg{flex:none}
.navlinks{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;
  background:var(--paper);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .25s ease}
.navlinks.open{max-height:420px}
.navlinks a{position:relative;color:var(--ink-70);text-decoration:none;font-size:.94rem;font-weight:500;padding:14px var(--s3);border-top:1px solid var(--line-soft)}
.navlinks a:first-child{border-top:none}
.navlinks a:hover{color:var(--ink)}
.navlinks a.current{color:var(--ink);background:var(--panel)}
.nav-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);cursor:pointer;flex:none;padding:0}
.nav-toggle svg{display:block}
@media(min-width:900px){
  .nav-toggle{display:none}
  .navlinks{position:static;flex-direction:row;align-items:center;gap:var(--s3);max-height:none;overflow:visible;background:none;border-bottom:none}
  .navlinks a{padding:0 0 2px;border-top:none}
  .navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
  .navlinks a:hover::after{transform:scaleX(1)}
  .navlinks a.current{background:none}
  .navlinks a.current::after{transform:scaleX(1)}
}

/* generic panels */
.grid{display:grid;gap:var(--s3)}
@media(min-width:760px){.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--panel);border:2px solid var(--ink);border-radius:3px;padding:var(--s3);box-shadow:var(--shadow)}
.card--plain{box-shadow:none;border:1px solid var(--line);background:var(--white)}
.card p{font-size:.97rem;color:var(--ink-70);margin:0}
.card h3{margin-bottom:8px}

/* final CTA banner */
.final{background:var(--ink);color:#fff;border-radius:3px;padding:var(--s6) var(--s4);text-align:center;border:2px solid var(--ink);box-shadow:var(--shadow)}
.final h2{color:#fff}
.final p{color:#B9C0CC;margin-left:auto;margin-right:auto}
.final .btn{background:#fff;color:var(--ink);border-color:#fff;box-shadow:4px 4px 0 var(--blue)}
.final .btn:hover{background:#fff;box-shadow:2px 2px 0 var(--blue)}

/* footer */
footer{background:#191D25;padding:var(--s6) 0 var(--s4);font-size:.86rem;color:#9AA3B2}
footer .logo{color:#fff}
.footgrid{display:grid;gap:var(--s4);margin-bottom:var(--s5)}
@media(min-width:640px){.footgrid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-heading{font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9AA3B2;margin:0 0 12px}
footer nav{display:flex;flex-direction:column;gap:10px}
footer nav a{color:#C6CCD6;text-decoration:none;font-size:.94rem}
footer nav a:hover{color:#fff}
.footrow{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:center}
.footrow--bottom{padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.16)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:10px;z-index:100;background:#fff;padding:10px 16px;border:2px solid var(--ink);border-radius:3px}

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

/* ---- blog-specific ---- */

.blog-hero{padding-top:var(--s6);padding-bottom:var(--s5)}

.postcard{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.postcard .thumb{aspect-ratio:16/9;background:var(--panel);border-bottom:1px solid var(--line);border-radius:3px 3px 0 0;overflow:hidden}
.postcard .thumb img{width:100%;height:100%;object-fit:contain;display:block}
.postcard .body{padding:var(--s3);flex:1;display:flex;flex-direction:column}
.postcard .post-meta{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);margin:0 0 8px}
.postcard h3{margin-bottom:8px}
.postcard p{font-size:.95rem;color:var(--ink-70);flex:1}
.postcard .read-more{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.92rem;color:var(--blue);margin-top:14px}
.postcard:hover .read-more{text-decoration:underline}

.empty-state{border:2px dashed var(--line);border-radius:3px;padding:var(--s6) var(--s4);text-align:center;color:var(--ink-45)}
.empty-state p{margin:0 auto;max-width:44ch}

/* single post article */
.post-meta-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);margin-bottom:var(--s2)}
.post-hero h1{font-size:clamp(2.2rem,5.4vw,3.4rem)}
article.post-body{font-size:1.08rem;color:var(--ink-70);max-width:70ch}
article.post-body h2{margin-top:var(--s5);font-size:1.7rem}
article.post-body h3{margin-top:var(--s4);font-size:1.3rem}
article.post-body p,article.post-body ul,article.post-body ol{max-width:70ch}
article.post-body ul,article.post-body ol{padding-left:1.3em}
article.post-body li{margin-bottom:8px}
article.post-body img{width:100%;border:2px solid var(--ink);border-radius:3px;box-shadow:var(--shadow);margin:var(--s3) 0}
article.post-body blockquote{margin:var(--s4) 0;padding:var(--s2) var(--s3);border-left:4px solid var(--blue);background:var(--panel);font-style:italic;color:var(--ink)}
article.post-body code{font-family:"IBM Plex Mono",monospace;background:var(--panel);padding:2px 6px;border-radius:2px;font-size:.92em}
article.post-body pre{background:var(--ink);color:#E9EBEF;padding:var(--s3);border-radius:3px;overflow-x:auto;font-family:"IBM Plex Mono",monospace;font-size:.88rem}
article.post-body pre code{background:none;padding:0}
article.post-body hr{border:none;border-top:1px solid var(--line);margin:var(--s5) 0}
.post-back{display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.92rem;text-decoration:none;color:var(--ink-70);margin-bottom:var(--s3)}
.post-back:hover{color:var(--ink)}

.callout{background:var(--panel);border:2px solid var(--ink);border-radius:3px;box-shadow:var(--shadow);padding:var(--s3) var(--s4);margin:var(--s4) 0;max-width:70ch}
.callout p{max-width:none}
.callout .eyebrow{margin-bottom:8px}
.callout .btn{margin-top:var(--s2)}