/* =====================================================================
   BASE: shared by every page
   CARGO SHIMS
   Cargo 3 supplies <column-set>/<column-unit>, the page wrapper, fonts
   and base type. None of that exists off Cargo, so it is rebuilt here.
   Tweak the variables below to match the old site.
   ===================================================================== */
/* Alte Haas Grotesk: put the font files in a "fonts" folder.
   If your filenames differ, change the paths here. */
@font-face {
    font-family: "Alte Haas Grotesk";
    src: local("Alte Haas Grotesk"),
         url("fonts/AlteHaasGroteskRegular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Alte Haas Grotesk";
    src: local("Alte Haas Grotesk Bold"),
         url("fonts/AlteHaasGroteskBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --fs: 13px;                 /* base font size */
    --lh: 1.2;                  /* base line height */
    --margin: 15px;             /* left/right page margin */
    --pad-top: 12px;            /* space above the nav row */
    --gutter: 15px;             /* gap between columns */
    --font: "Alte Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: #fff; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs);
    line-height: var(--lh);
    color: #000;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Positioned wrapper: .preview-area is placed relative to this */
.page {
    position: relative;
    isolation: isolate;
    padding: var(--pad-top) var(--margin) 0;
}

/* 12-column grid when units carry a span (the index table, nav row) */
column-set {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
}
/* Sets with no spans (the About text) are two equal columns */
column-set:not(:has(> column-unit[span])) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
column-unit { display: block; min-width: 0; }
column-unit[span="1"] { grid-column: span 1; }
column-unit[span="2"] { grid-column: span 2; }
column-unit[span="3"] { grid-column: span 3; }
column-unit[span="4"] { grid-column: span 4; }

/* In Cargo the nav row sits one blank line above the table header row. */
.page > column-set:first-of-type,
.table-overlay > column-set:first-of-type {
    margin-bottom: calc(var(--fs) * var(--lh));
}

/* Phones: stack the units (mobile-stack="true"), drop empty ones */
@media (max-width: 768px) {
    column-set { display: block; }
    column-unit:empty,
    column-unit:has(> br:only-child) { display: none; }
}