/* ===== TeamBeam Blog — styles ===== */

/* ---- Fonts (self-hosted) ---- */
@font-face{font-family:"TB Display";src:url("/assets/fonts/Bricolage.woff2") format("woff2");font-weight:200 800;font-display:swap;}
@font-face{font-family:"TB Body";src:url("/assets/fonts/Jakarta.woff2") format("woff2");font-weight:200 800;font-display:swap;}
@font-face{font-family:"TB Mono";src:url("/assets/fonts/SpaceMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"TB Mono";src:url("/assets/fonts/SpaceMono-Bold.woff2") format("woff2");font-weight:700;font-display:swap;}

/* ---- Tokens ---- */
:root{
  --ink:#0D2137;          /* navy */
  --ink-soft:#3A4B5C;
  --paper:#FBFAF7;        /* warm near-white */
  --paper-2:#F2EFE8;
  --line:#E4E0D6;
  --blue:#1565C0;
  --amber:#E8940F;
  --c:#1565C0;            /* per-pillar accent, set inline */
  --wrap:1180px;
  --r:16px;
  --shadow:0 1px 2px rgba(13,33,55,.06), 0 12px 30px -18px rgba(13,33,55,.28);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"TB Body",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:clamp(16px,1rem + .2vw,18px);line-height:1.62;
  overflow-wrap:break-word;word-break:normal;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"TB Display",serif;line-height:1.06;letter-spacing:-.015em;margin:0;overflow-wrap:anywhere}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;z-index:100}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}

/* ---- Eyebrow / mono ---- */
.card__eyebrow,.hub__eyebrow,.hero__eyebrow,.tile__dot,.dot,.sech,.art__pill,.card__meta,.tile__name{font-family:"TB Mono",monospace}
.sech{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 18px}
.sech__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.sech__all{font-family:"TB Mono",monospace;font-size:.8rem;color:var(--blue);text-decoration:none}

/* ---- Buttons ---- */
.cta{display:inline-flex;align-items:center;gap:.5em;background:var(--ink);color:#fff;text-decoration:none;
  font-weight:600;padding:.72em 1.25em;border-radius:999px;transition:transform .15s ease,background .15s ease;white-space:nowrap}
.cta:hover{background:var(--blue);transform:translateY(-2px)}
.cta--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.cta--ghost:hover{background:var(--ink);color:#fff}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:40;background:rgba(251,250,247,.9);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.nav__in{max-width:var(--wrap);margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:20px;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:.5ch;text-decoration:none;color:var(--ink);min-width:0}
.brand__mark{color:var(--amber);font-family:"TB Display";font-weight:800;font-size:1.35rem}
.brand__word{font-family:"TB Display";font-weight:700;letter-spacing:.02em;font-size:1.15rem}
.brand__word b{color:var(--ink)}
.brand__blog{font-family:"TB Mono",monospace;font-size:.7rem;color:var(--amber);letter-spacing:.12em;align-self:flex-start;margin-top:.15em}
.nav__links{display:flex;align-items:center;gap:22px}
.nav__links>a{text-decoration:none;font-weight:600;font-size:.95rem}
.nav__links>a:hover{color:var(--blue)}
.has-mega{position:relative}
.megabtn{border:0;background:none;cursor:pointer;font:inherit;font-weight:600;color:var(--ink);display:inline-flex;gap:6px;align-items:center;padding:4px}
.mega{position:absolute;top:calc(100% + 14px);right:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;width:min(560px,86vw);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s ease}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega__item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.9rem;font-family:"TB Body"}
.mega__item:hover{background:var(--paper-2)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:0 0 auto}
.beam{display:flex;height:4px}
.beam i{flex:1}
.burger{display:none;border:0;background:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:64px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:39;
  display:flex;flex-direction:column;padding:12px 20px 20px}
.drawer a{padding:13px 6px;text-decoration:none;font-weight:600;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.drawer .cta{margin-top:14px;justify-content:center;border-bottom:0}

/* ---- Layout sections ---- */
main{display:block}
.hero,.tiles,.feat,.latest,.band,.hub,.prose,.art,.rel,.faq{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.hero{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(36px,5vw,64px)}
.hero__eyebrow{font-family:"TB Mono",monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 18px}
.hero__h{font-size:clamp(2.3rem,6vw,4.6rem);font-weight:800;max-width:16ch}
.hero__sub{font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--ink-soft);max-width:56ch;margin:22px 0 30px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* Pillar tiles — the multicolour system */
.tiles{padding-block:clamp(30px,4vw,52px)}
.tiles__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px 20px 22px;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
.tile::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--c)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tile__dot{width:12px;height:12px;border-radius:50%;background:var(--c)}
.tile__name{font-family:"TB Display";font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.tile__blurb{color:var(--ink-soft);font-size:.9rem}

/* Featured */
.feat{padding-block:clamp(24px,3vw,40px)}
.feat__card{position:relative;display:block;background:var(--ink);color:#fff;border-radius:22px;overflow:hidden;text-decoration:none;
  transition:transform .16s ease}
.feat__card:hover{transform:translateY(-3px)}
.feat__edge{position:absolute;inset:0 0 auto 0;height:6px;background:var(--c)}
.feat__body{display:flex;flex-direction:column;gap:12px;padding:clamp(28px,4vw,52px)}
.feat__body .card__eyebrow{color:#fff;opacity:.85}
.feat__title{font-family:"TB Display";font-weight:800;font-size:clamp(1.6rem,3.2vw,2.6rem);max-width:24ch}
.feat__sum{color:#D7E0EA;max-width:60ch}
.feat__body .card__meta{color:#fff}

/* Card grids */
.latest{padding-block:clamp(30px,4vw,56px)}
.grid{display:grid;gap:16px}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px 22px 20px;text-decoration:none;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
.card__edge{position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card__eyebrow{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--c);margin-top:4px}
.card__title{font-family:"TB Display";font-weight:700;font-size:1.22rem;letter-spacing:-.01em}
.card__sum{color:var(--ink-soft);font-size:.94rem;flex:1}
.card__meta{font-family:"TB Mono",monospace;font-size:.76rem;color:var(--ink-soft);margin-top:6px}

/* Band */
.band{padding-block:clamp(30px,4vw,56px)}
.band__in{background:linear-gradient(120deg,var(--blue),var(--amber));border-radius:22px;color:#fff;padding:clamp(30px,5vw,60px);max-width:100%}
.band__in h2{font-size:clamp(1.5rem,3vw,2.4rem);max-width:20ch}
.band__in p{max-width:56ch;margin:14px 0 22px;color:#fff}
.band .cta{background:#fff;color:var(--ink)}
.band .cta:hover{background:var(--ink);color:#fff}

/* Hub / index */
.hub{padding-block:clamp(40px,5vw,72px)}
.hub__head{max-width:60ch;margin-bottom:30px}
.hub__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.hub__head h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;margin-bottom:12px}
.hub__head p{color:var(--ink-soft);font-size:1.1rem}
.empty{color:var(--ink-soft)}

/* Article */
.art{padding-block:clamp(40px,5vw,72px);max-width:760px}
.art__head{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:30px}
.art__pill{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:"TB Mono",monospace;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c);margin-bottom:16px}
.art__head h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:800;margin-bottom:16px}
.art__sum{font-size:1.2rem;color:var(--ink-soft);max-width:60ch}
.art__meta{font-family:"TB Mono",monospace;font-size:.76rem;color:var(--ink-soft);margin-top:14px}
.art__body{font-size:1.08rem}
.art__body h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:700;margin:2em 0 .5em}
.art__body h3{font-size:1.25rem;font-weight:700;margin:1.6em 0 .4em}
.art__body p{margin:0 0 1.1em}
.art__body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.art__body ul,.art__body ol{margin:0 0 1.2em;padding-left:1.3em}
.art__body li{margin:.35em 0}
.art__body blockquote{margin:1.4em 0;padding:6px 0 6px 22px;border-left:4px solid var(--c);font-family:"TB Display";
  font-size:1.35rem;line-height:1.3;color:var(--ink)}
.art__body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.art__cta{background:#fff;border:1px solid var(--line);border-left:5px solid var(--c);border-radius:var(--r);padding:26px 26px 28px;margin:38px 0 0}
.art__ctahead{font-family:"TB Display";font-weight:700;font-size:1.3rem;margin:0 0 6px}
.art__cta p{margin:0 0 16px;color:var(--ink-soft)}

/* FAQ */
.faq{max-width:760px;padding-block:10px 20px}
.faq h2{font-size:1.5rem;margin:0 0 12px}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:700;cursor:pointer;font-family:"TB Display";font-size:1.05rem}
.faq p{margin:10px 0 0;color:var(--ink-soft)}

/* Related */
.rel{padding-block:clamp(20px,3vw,40px) clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.rel__grp{margin-top:30px}
.rel__h{font-size:1.2rem;margin:0 0 16px}

/* Prose (about) */
.prose{max-width:680px;padding-block:clamp(48px,6vw,88px)}
.prose h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;margin:14px 0 22px}
.prose p{color:var(--ink-soft);font-size:1.1rem;margin:0 0 1.1em}
.prose a{color:var(--blue)}
.prose .cta{margin-top:14px}

/* ---- Footer ---- */
.foot{background:var(--ink);color:#fff;margin-top:40px}
.foot__beam{display:flex;height:5px}
.foot__beam i{flex:1}
.foot__in{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5vw,64px) 20px;display:grid;grid-template-columns:1.4fr 1fr auto;gap:40px}
.foot__brand{min-width:0}
.foot .brand__word{color:#fff}.foot .brand__word b{color:#fff}
.foot__line{color:#AFC0D0;margin:14px 0;font-size:.92rem;font-family:"TB Mono",monospace;letter-spacing:.02em}
.foot__write{color:#D7E0EA;font-size:.95rem;max-width:40ch}
.foot__write a{color:#fff}
.foot__cols{display:flex;flex-direction:column;gap:10px}
.foot__cols a{color:#C6D2DE;text-decoration:none;font-size:.92rem}
.foot__cols a:hover{color:#fff}
.foot__meta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.foot__soc{display:flex;flex-wrap:wrap;gap:14px}
.foot__soc a{color:#C6D2DE;text-decoration:none;font-family:"TB Mono",monospace;font-size:.82rem}
.foot__soc a:hover{color:var(--amber)}
.foot .cta--ghost{color:#fff;border-color:#3A5068}
.foot .cta--ghost:hover{background:#fff;color:var(--ink)}
.foot__legal{border-top:1px solid #21384E;padding:18px 20px;text-align:center;color:#8FA3B6;font-size:.82rem}
.foot__legal a{color:#C6D2DE}

/* ---- Responsive (single source, no re-declared display conflicts) ---- */
@media (max-width:860px){
  .nav__links{display:none}
  .burger{display:flex}
  .foot__in{grid-template-columns:1fr;gap:28px}
}
@media (min-width:861px){
  .drawer{display:none !important}
}

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