/* Behemoth Agency — shared subpage tokens & primitives */
:root{
  --paper:#f4f1ea; --paper-2:#ebe7dd;
  --ink:#0e0e10; --ink-2:#5a5853; --ink-3:#8c897f;
  --rule:rgba(14,14,16,.14);
  --ikb:#002fa7; --ikb-deep:#001f6e; --ikb-tint:rgba(0,47,167,.08);
  --mono:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif:'Instrument Serif', 'Times New Roman', serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
::selection{background:var(--ikb);color:var(--paper)}
a{color:inherit;text-decoration:none}

.wrap{padding-left:32px;padding-right:32px}
@media (min-width:900px){.wrap{padding-left:48px;padding-right:48px}}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.rule{height:0;border:0;border-top:.5px solid var(--rule);margin:0}

.mono{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.mono-sm{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ital-serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.ikb{color:var(--ikb)}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 48px;background:var(--paper);border-bottom:.5px solid var(--rule)}
.topbar .mark{font-weight:700;font-size:14px;letter-spacing:-.035em}
.topbar nav{display:flex;gap:24px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.topbar nav a.active{color:var(--ikb)}
.topbar .right{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:#7CFFB2}

/* page header strip */
.page-meta{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:end;
  padding:18px 0 14px;border-bottom:.5px solid var(--rule)}
.page-meta .l{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.page-meta .c{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.page-meta .r{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);justify-self:end}

/* footer */
.foot{padding:24px 0 28px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* placeholder image frame */
.frame{position:relative;width:100%;background:var(--paper-2);border:.5px solid var(--rule);overflow:hidden}
.frame .stripes{position:absolute;inset:0;background-image:repeating-linear-gradient(135deg, rgba(14,14,16,.06) 0 1px, transparent 1px 14px)}
.frame .label{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.frame .corner{position:absolute;right:14px;bottom:14px;font-family:var(--mono);font-size:10px;color:var(--ink-3)}

/* big display type */
.h-page{font-weight:500;letter-spacing:-.055em;line-height:.86;font-size:clamp(64px,11vw,180px)}
.h-section{font-weight:500;letter-spacing:-.045em;line-height:.94;font-size:clamp(36px,5.4vw,84px)}
.lede-xl{font-weight:500;letter-spacing:-.04em;line-height:1.02;font-size:clamp(28px,3.8vw,58px)}
.body-lg{font-size:clamp(17px,1.3vw,21px);line-height:1.5;letter-spacing:-.005em;color:var(--ink)}
.body{font-size:16px;line-height:1.55;color:var(--ink)}