/* MBark — Signature design system (inner pages). Mirrors the tokens inlined in index.html. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#191510;--panel:#20190f;--bone:#ece1cf;--paper:#efe6d4;--ink:#1c1710;--soft:#9a8f7c;
  --brass:#c39a5b;--brass-deep:#7d5822;--line:rgba(236,225,207,.15);--line-ink:rgba(28,23,16,.16);
  --ease:cubic-bezier(.2,.7,.2,1);--grot:'Bricolage Grotesque',sans-serif;--mono:'IBM Plex Mono',monospace;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--bone);font-family:var(--grot);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
.wrap{max-width:1240px;margin:0 auto;padding:0 3.2rem}
@media(max-width:680px){.wrap{padding:0 1.5rem}}
a{color:inherit}
.kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);display:block}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.rise{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.08s}.rise.d2{transition-delay:.16s}.rise.d3{transition-delay:.24s}
@keyframes fade{to{opacity:1}}
@keyframes rup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* nav */
nav{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:2rem 0;opacity:0;animation:fade .9s var(--ease) .1s forwards}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:46px;width:auto;display:block}
.foot-logo img{height:38px}
@media(max-width:680px){.logo img{height:38px}.foot-logo img{height:32px}}
.nav-r{display:flex;align-items:center;gap:2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.nav-r a{text-decoration:none;transition:color .4s var(--ease)}
.nav-r a:hover{color:var(--bone)}
.nav-r a.here{color:var(--bone);border-bottom:1px solid var(--brass);padding-bottom:3px}
.nav-r .enq{color:var(--bg);background:var(--brass);padding:.6rem 1.1rem;border-radius:2px;font-weight:500}
.nav-r .enq:hover{color:var(--bg)}
@media(max-width:760px){.nav-r a.link{display:none}}

/* buttons */
.btn{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;background:var(--brass);color:var(--bg);padding:.9rem 1.6rem;border-radius:2px;text-decoration:none;font-weight:500;transition:transform .4s var(--ease);display:inline-block;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-q{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}

/* page head */
.phead{padding:4vh 0 3.5rem;position:relative;background:radial-gradient(70% 90% at 85% 20%,rgba(195,154,91,.09),transparent 60%)}
.phead .kick{margin-bottom:1.6rem;opacity:0;animation:rup .9s var(--ease) .35s forwards}
.phead h1{font-weight:700;font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98;letter-spacing:-.03em;opacity:0;animation:rup 1s var(--ease) .5s forwards}
.phead h1 .b{color:var(--brass)}
.phead p{color:var(--soft);font-weight:300;font-size:clamp(1rem,1.4vw,1.2rem);max-width:46ch;margin-top:1.8rem;opacity:0;animation:rup 1s var(--ease) .68s forwards}
section.pad{padding:7rem 0}
@media(max-width:680px){section.pad{padding:4.5rem 0}}
h2.big{font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:1.4rem 0 3rem;max-width:18ch}
.lede{color:var(--soft);font-weight:300;max-width:60ch;line-height:1.7}

/* rule row / stat strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* pad both sides so a value never sits against its divider; the first cell in
   each row keeps a flush left edge to hold the page grid */
.strip .c{padding:2rem 2rem;border-right:1px solid var(--line)}
.strip .c:first-child{padding-left:0}
.strip .c:last-child{border-right:none}
@media(max-width:760px){
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip .c:nth-child(2n){border-right:none}
  .strip .c:nth-child(2n+1){padding-left:0}
}
.strip .v{font-family:var(--mono);font-weight:500;font-size:2rem;letter-spacing:-.02em}
.strip .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:.6rem}

/* numbered principles */
.principles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
/* nth-child(3n) rather than :last-child so a 6-item grid wraps to two rows
   with the dividers and flush-left column still correct */
.principle{padding:2.6rem 2rem;border-right:1px solid var(--line)}
.principle:nth-child(3n){border-right:none}
.principle:nth-child(3n+1){padding-left:0}
.principles.six .principle:nth-child(n+4){border-top:1px solid var(--line)}
/* single-column variant: the 3n rules above assume 3 columns, so reset them or
   items 2 and 3 indent against item 1 */
.principles.stack{grid-template-columns:1fr}
.principles.stack .principle{border-right:0;padding-left:0;padding-right:0;border-bottom:1px solid var(--line)}
.principles.stack .principle:last-child{border-bottom:0}
@media(max-width:800px){
  .principles{grid-template-columns:1fr}
  .principle{border-right:none;border-bottom:1px solid var(--line);padding-left:0;padding-right:0}
  .principles.six .principle:nth-child(n+4){border-top:0}
}
.principle .n{font-family:var(--mono);font-size:.9rem;color:var(--brass);letter-spacing:.1em;margin-bottom:1.5rem}
.principle h3{font-weight:500;font-size:1.4rem;margin-bottom:.9rem;letter-spacing:-.01em}
.principle p{color:var(--soft);font-size:.95rem;font-weight:300;line-height:1.6}
.principle ul{list-style:none;margin-top:1.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.principle li{padding:.4rem 0;border-top:1px solid var(--line)}

/* split layout */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:3.5rem;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:2.2rem}}
.split.rev{direction:rtl}.split.rev>*{direction:ltr}
@media(max-width:860px){.split.rev{direction:ltr}}
.media{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;aspect-ratio:4/3}
/* both founder shots are portrait ~2:3 (800x1200 and 665x998); a 2/3 frame fits
   them exactly, so object-fit has nothing to crop */
.media.tall{aspect-ratio:2/3}
@media(max-width:860px){.media.tall{max-width:24rem}}
.media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.media:hover img{transform:scale(1.03)}

/* case entries */
.case{padding:5rem 0;border-top:1px solid var(--line)}
.case .no{font-family:var(--mono);color:var(--brass);font-size:.9rem;letter-spacing:.1em;margin-bottom:1.2rem}
.case .seg{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:.7rem}
.case h2{font-weight:700;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.04;letter-spacing:-.02em;margin-bottom:1.4rem}
.case p{color:var(--soft);font-weight:300;line-height:1.7;margin-bottom:2rem}
.metrics{display:flex;flex-wrap:wrap;gap:2.4rem;border-top:1px solid var(--line);padding-top:1.6rem}
.metrics .m b{font-family:var(--mono);font-weight:500;font-size:1.9rem;letter-spacing:-.02em;display:block;color:var(--bone)}
.metrics .m span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}

/* panel / quote */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:2.4rem}
.quote{font-weight:300;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.4;letter-spacing:-.01em;max-width:24ch}
.quote-by{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-top:1.6rem}

/* two-column compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.compare .box{border:1px solid var(--line);border-radius:6px;padding:2rem}
.compare .box.good{border-color:rgba(195,154,91,.45)}
.compare .box .t{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:1.2rem}
.compare .box.good .t{color:var(--brass)}
.compare .box h3{font-weight:500;font-size:1.25rem;margin-bottom:.7rem}
.compare .box p{color:var(--soft);font-size:.95rem;font-weight:300;line-height:1.6}

/* paper section (light) — uses brass-deep per the two-brass rule */
.paper{background:var(--paper);color:var(--ink)}
.paper .kick{color:var(--brass-deep)}
.paper h2.big{color:var(--ink)}
.paper .lede{color:#5d5344}

/* prose (legal pages) */
.prose{max-width:70ch}
.prose h2{font-weight:500;font-size:1.35rem;letter-spacing:-.01em;margin:3rem 0 .9rem;color:var(--bone)}
.prose p{color:var(--soft);font-weight:300;line-height:1.8;margin-bottom:1rem}
.prose ul{margin:0 0 1rem 1.1rem;color:var(--soft);font-weight:300;line-height:1.8}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.stamp{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:1.2rem}

/* FAQ */
.faq{border-top:1px solid var(--line);max-width:80ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:2rem;cursor:pointer;padding:1.5rem 0;font-weight:500;font-size:1.1rem;letter-spacing:-.01em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--brass);font-size:1.3rem;flex:0 0 auto;transition:transform .4s var(--ease)}
.faq details[open] summary::after{content:'\2212'}
.faq summary:hover{color:var(--brass)}
.faq details p{color:var(--soft);font-weight:300;line-height:1.75;padding:0 0 1.6rem;max-width:68ch}

/* form */
.form-panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:2.6rem}
@media(max-width:680px){.form-panel{padding:1.6rem}}
.field{margin-bottom:1.8rem}
.field label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:.7rem}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--bone);
  font-family:var(--grot);font-size:1rem;font-weight:300;padding:.7rem 0;border-radius:0;
  transition:border-color .3s var(--ease);appearance:none}
.field textarea{resize:vertical;min-height:6.5rem}
.field input::placeholder,.field textarea::placeholder{color:#8a8071}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--brass)}
.field select{cursor:pointer}
.field select option{background:var(--panel);color:var(--bone)}
.field .hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--soft);margin-top:.5rem}
.hp{position:absolute;left:-9999px}
.form-note{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:1.4rem;text-align:center}

/* tally device */
.seats-mark{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.seats-mark svg{width:min(240px,50vw);height:auto}
.seats-mark svg line,.seats-mark svg path{stroke:var(--brass);stroke-width:9;stroke-linecap:round;fill:none}
.seats-mark svg .o{stroke:var(--soft);opacity:.45}
.seats-mark .cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.seats-mark .cap b{color:var(--bone)}

/* terms CTA band */
.terms{position:relative;background:radial-gradient(80% 80% at 20% 50%,rgba(195,154,91,.10),transparent 60%);border-top:1px solid var(--line)}
.terms .split{grid-template-columns:1fr .8fr;align-items:center}
@media(max-width:820px){.terms .split{grid-template-columns:1fr;gap:2.5rem}}
.terms h2{font-weight:700;font-size:clamp(2.2rem,5.5vw,4rem);line-height:1;letter-spacing:-.03em;margin:1.4rem 0}
.terms h2 .b{color:var(--brass)}
.terms p{color:var(--soft);max-width:38ch;font-weight:300;margin-bottom:2.4rem}

/* footer */
footer{border-top:1px solid var(--line);padding:3rem 0}
.frow{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.frow a{text-decoration:none;transition:color .4s var(--ease)}
.frow a:hover{color:var(--brass)}
.fnav{display:flex;gap:1.5rem;flex-wrap:wrap}

/* These elements start at opacity:0 and rely on an ANIMATION to reveal.
   Killing animations for reduced-motion therefore left the nav and the whole
   page header permanently INVISIBLE. Restore them explicitly. Do not use a
   blanket *{opacity:1} — it would wreck the tally's intentionally faded
   "open" strokes (.o at .45) and similar. */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .rise{opacity:1!important;transform:none!important}
  nav,.phead .kick,.phead h1,.phead p,.post-meta{opacity:1!important;transform:none!important}
}

/* ---------- blog / field notes ---------- */
/* post byline row under the title */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:2rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  opacity:0;animation:rup 1s var(--ease) .8s forwards}
.post-meta a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line)}
.post-meta a:hover{color:var(--brass)}
/* generous air between the headline and the cover so it lands, not collides */
.post-cover{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:4.5rem}
@media(max-width:680px){.post-cover{margin-top:2.5rem}}
.post-cover img{width:100%;height:auto;display:block}
/* Measure is set from a real Range-based count, NOT the ch unit: `ch` is the
   width of "0", which is far wider than an average lowercase glyph, so 68ch
   rendered ~94 chars/line. 51ch measures ~70 chars/line, inside 65-75. */
.post .prose{max-width:51ch;margin:0 auto}
.post .prose .lede-first{font-size:1.2rem;color:var(--bone);font-weight:300;line-height:1.7;margin-bottom:1.4rem}
.post .prose h2{margin-top:2.8rem}
.post .prose li b{color:var(--bone);font-weight:500}
.post-cta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.4rem 0;margin:3rem 0}
/* .prose a (0,1,1) outranks .btn (0,1,0) and would repaint the button label
   brass on a brass background, i.e. invisible. Re-assert it at equal weight. */
.prose a.btn{color:var(--bg);text-decoration:none}
.prose a.btn:hover{color:var(--bg)}
.byline{display:flex;gap:1.4rem;align-items:center;border-top:1px solid var(--line);padding-top:2rem;margin-top:2rem}
.byline img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto;border:1px solid var(--line)}
.byline b{display:block;font-weight:500;font-size:1rem;margin-bottom:.3rem}
.byline span{color:var(--soft);font-weight:300;font-size:.9rem;line-height:1.6}

.posts{display:grid;gap:2rem}
.post-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.4rem;align-items:center;
  text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:1.4rem;transition:border-color .4s var(--ease)}
.post-card:hover{border-color:rgba(195,154,91,.45)}
@media(max-width:820px){.post-card{grid-template-columns:1fr;gap:1.4rem}}
.pc-media{border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.pc-media img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease)}
.post-card:hover .pc-media img{transform:scale(1.03)}
.pc-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:1rem}
.pc-meta .num{color:var(--brass)}
.pc-body h2{font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:.9rem}
.pc-body p{color:var(--soft);font-weight:300;font-size:.95rem;line-height:1.65;margin-bottom:1.2rem}
.pc-more{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.posts-note{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.posts-note a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}


/* ---------- post CTA block ---------- */
.cta-block{border-top:1px solid var(--line);
  background:radial-gradient(80% 80% at 22% 50%,rgba(195,154,91,.10),transparent 62%)}
.cta-inner{display:grid;grid-template-columns:1fr .5fr;gap:3rem;align-items:center;max-width:76ch;margin:0 auto}
@media(max-width:820px){.cta-inner{grid-template-columns:1fr;gap:2rem}.cta-inner .seats-mark{display:none}}
.cta-inner h2{font-weight:700;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;letter-spacing:-.02em;margin:1.2rem 0 1rem;max-width:20ch}
.cta-inner p{color:var(--soft);font-weight:300;line-height:1.7;max-width:46ch;margin-bottom:2rem}
.cta-inner .cta-fine{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);margin:1.6rem 0 0;max-width:none}

/* ---------- related insights ---------- */
.related{border-top:1px solid var(--line)}
.rel-h{font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;margin:1.2rem 0 2.6rem}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:820px){.rel-grid{grid-template-columns:1fr}}
.rel-card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  border-radius:6px;padding:1.8rem;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.rel-card:hover{border-color:rgba(195,154,91,.45);transform:translateY(-2px)}
.rel-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:1.2rem}
.rel-card h3{font-weight:500;font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;margin-bottom:.7rem}
.rel-card p{color:var(--soft);font-weight:300;font-size:.9rem;line-height:1.6;margin-bottom:1.4rem;flex:1}
.rel-more{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.rel-card:hover .rel-more{color:var(--brass)}

/* ---------- related: single-brief placeholder ---------- */
.rel-empty{color:var(--soft);font-weight:300;line-height:1.7;max-width:52ch;margin:-1.4rem 0 2.4rem}
.rel-feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:2.4rem;align-items:center;
  text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:1.4rem;
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.rel-feature:hover{border-color:rgba(195,154,91,.45);transform:translateY(-2px)}
@media(max-width:820px){.rel-feature{grid-template-columns:1fr;gap:1.4rem}}
.rf-media{border-radius:4px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.rf-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.rel-feature:hover .rf-media img{transform:scale(1.03)}
.rf-body h3{font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:.9rem}
.rf-body p{color:var(--soft);font-weight:300;font-size:.95rem;line-height:1.65;margin-bottom:1.4rem}
.rf-body .rel-more{color:var(--brass)}