/* ===========================================================================
   archeonglobal.com/brand/

   Page-specific styles for the public brand guidelines. Loaded after
   /brand/tokens/archeon.css and /styles.css, and only by this page.

   Everything here is the reference furniture the homepage does not need:
   token tables, swatches, logo specimen stages and copyable boilerplate
   blocks. The shared vocabulary (.wrap, .band, .btn, .kicker, .band-title)
   comes from /styles.css and is not restated.

   Colour comes from the tokens. Exactly one hex value is declared here:
   #1A3A5C, the ground crossover between the positive and the reversed cut.
   It is a threshold rather than a palette entry, which is why it is not a
   token and why nothing else on the site may use it as a colour.
   =========================================================================== */

/* ── Prose ────────────────────────────────────────────────────────────── */

.copy { max-width: 68ch; }
.copy p { color: var(--ar-ink-2); }
.band-navy .copy p { color: var(--ar-ink-on-dark-3); }
.copy strong { font-weight: 650; color: var(--ar-ink); }
.band-navy .copy strong { color: var(--ar-ink-on-dark); }
.copy em { font-style: italic; }

/* /styles.css colours .split paragraphs for a light ground only. */
.band-navy .split p { color: var(--ar-ink-on-dark-3); }
.band-navy .split em { color: var(--ar-ink-on-dark); }
.band-navy .split h2 { color: var(--ar-ink-on-dark); }

/* A titled block inside a section, one step below the band heading. */
.sub { margin-top: clamp(40px, 5vw, 58px); }
.sub h3 {
  font-size: 1.18rem;
  margin-bottom: 14px;
  max-width: 34ch;
}
.sub > p { max-width: 68ch; color: var(--ar-ink-2); }
.band-navy .sub > p { color: var(--ar-ink-on-dark-3); }

/* Identifiers, hex values, filenames and clause references. */
code, .mono {
  font-family: var(--ar-font-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(2, 30, 66, 0.07);
  color: var(--ar-ink);
}
.band-navy code {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ar-ink-on-dark);
}

/* ── Hero jump list ───────────────────────────────────────────────────── */

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}
.jump a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 99px;
  border: 1px solid var(--ar-hairline-on-dark);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ar-ink-on-dark-2);
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.jump a:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--ar-signal-lift);
  color: #fff;
}

/* ── Tables ───────────────────────────────────────────────────────────── */

/* A reference table is wide by nature, so it scrolls inside its own box
   rather than pushing the page sideways. */
.tbl-wrap {
  margin-top: 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
  text-align: left;
}
.tbl th,
.tbl td {
  padding: 11px 16px 11px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--ar-hairline);
}
.band-navy .tbl th,
.band-navy .tbl td { border-bottom-color: var(--ar-hairline-on-dark); }

.tbl thead th {
  font-family: var(--ar-font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ar-tracking-eyebrow);
  color: var(--ar-ink-3);
  white-space: nowrap;
}
.band-navy .tbl thead th { color: var(--ar-ink-on-dark-4); }

/* Row headers wrap. Token names inside them do not, because `code` holds its
   own line: nowrap on the cell itself made the widest forbidden-form row set
   the table's width and squeezed every other column. */
.tbl tbody th {
  font-weight: 600;
  color: var(--ar-ink);
}
.band-navy .tbl tbody th { color: var(--ar-ink-on-dark); }
.tbl td { color: var(--ar-ink-2); }
.band-navy .tbl td { color: var(--ar-ink-on-dark-3); }
.tbl tbody tr:last-child th,
.tbl tbody tr:last-child td { border-bottom: none; }

/* Ratios line up down the column, so a changed digit is visible. */
.tbl .num {
  font-family: var(--ar-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ar-ink);
}
.band-navy .tbl .num { color: var(--ar-ink-on-dark); }
.tbl .fail { font-weight: 650; }
/* Font stacks and gradient definitions are long enough that holding them on
   one line would make the whole table scroll past the point of being read. */
.tbl .num-wrap { white-space: normal; overflow-wrap: anywhere; }
.tbl .none { color: var(--ar-ink-4); font-style: italic; }
.band-navy .tbl .none { color: var(--ar-ink-on-dark-4); }

/* ── Colour ───────────────────────────────────────────────────────────── */

.swatches {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 16px;
}
.swatch {
  border: 1px solid var(--ar-hairline);
  border-radius: var(--ar-radius);
  overflow: hidden;
  background: var(--ar-surface);
}
.sw-chip {
  display: block;
  height: 84px;
  border-bottom: 1px solid var(--ar-hairline);
}
.sw-meta { padding: 13px 15px 15px; }
.sw-name {
  display: block;
  font-family: var(--ar-font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ar-ink);
}
.sw-hex {
  display: block;
  margin-top: 6px;
  font-family: var(--ar-font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ar-ink-2);
}
.sw-note {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ar-ink-3);
}

/* An inline sample beside a token name in a table. */
.dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  border-radius: 3px;
  border: 1px solid var(--ar-hairline);
  vertical-align: -2px;
}
/* Ink cut for dark grounds: shown ringed in its own ground, or a pale sample
   on Paper would read as no sample at all. */
.dot-on-navy {
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--ar-navy);
  margin-left: 3px;
  margin-right: 13px;
}

/* -- The token colours themselves. One class, used by both the swatch chip
      and the inline dot. ---------------------------------------------------- */
.c-navy { background: var(--ar-navy); }
.c-navy-structural { background: var(--ar-navy-structural); }
.c-signal { background: var(--ar-signal); }
.c-arc { background: var(--ar-arc); }
.c-signal-deep { background: var(--ar-signal-deep); }
.c-signal-lift { background: var(--ar-signal-lift); }
.c-paper { background: var(--ar-paper); }
.c-white { background: var(--ar-white); }
.c-surface { background: var(--ar-surface); }
.c-surface-dark { background: var(--ar-surface-dark); }
.c-ink { background: var(--ar-ink); }
.c-ink-2 { background: var(--ar-ink-2); }
.c-ink-3 { background: var(--ar-ink-3); }
.c-ink-4 { background: var(--ar-ink-4); }
.c-ink-on-dark { background: var(--ar-ink-on-dark); }
.c-ink-on-dark-2 { background: var(--ar-ink-on-dark-2); }
.c-ink-on-dark-3 { background: var(--ar-ink-on-dark-3); }
.c-ink-on-dark-4 { background: var(--ar-ink-on-dark-4); }
.c-ok { background: var(--ar-ok); }
.c-warn { background: var(--ar-warn); }
.c-serious { background: var(--ar-serious); }
.c-critical { background: var(--ar-critical); }
.c-tanklogic { background: var(--ar-product-tanklogic); }
.c-tanklogic-deep { background: var(--ar-product-tanklogic-deep); }
.c-vessel { background: var(--ar-product-vessel); }
.c-vessel-deep { background: var(--ar-product-vessel-deep); }
.c-piping { background: var(--ar-product-piping); }
.c-piping-deep { background: var(--ar-product-piping-deep); }
.c-gradient-face { background: var(--ar-gradient-face); }
.c-gradient-arc { background: var(--ar-gradient-arc); }
/* The hairlines are translucent, so they are composited over the ground they
   are drawn on rather than shown as a flat colour that does not exist. */
.c-hairline {
  background-color: var(--ar-paper);
  background-image: linear-gradient(var(--ar-hairline), var(--ar-hairline));
}
.c-hairline-on-dark {
  background-color: var(--ar-navy);
  background-image: linear-gradient(var(--ar-hairline-on-dark), var(--ar-hairline-on-dark));
}
/* The ground crossover: a threshold, not a palette entry. */
.c-crossover { background: #1A3A5C; }

/* ── Logo specimens ───────────────────────────────────────────────────── */

.specs {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: 24px 20px;
}
.spec-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 172px;
  padding: 26px;
  border-radius: var(--ar-radius);
  border: 1px solid var(--ar-hairline);
}
.band-navy .spec-stage { border-color: var(--ar-hairline-on-dark); }
.spec-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 120px;
}
.stage-paper { background: var(--ar-paper); }
.stage-white { background: var(--ar-white); }
.stage-navy { background: var(--ar-navy); }
.stage-surface-dark { background: var(--ar-surface-dark); }

.spec-cap {
  margin: 13px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ar-ink-3);
}
.band-navy .spec-cap { color: var(--ar-ink-on-dark-3); }
.spec-cap b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--ar-font-display);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ar-ink);
}
.band-navy .spec-cap b { color: var(--ar-ink-on-dark); }
.spec-cap code { font-size: 12px; }

/* The single-ink cut is drawn as a mask so this page controls the ink. Loaded
   as an <img> the file would inherit the browser's own text colour, which is
   the one thing a single-ink specimen must not do. */
.mono-mark {
  display: block;
  width: 148px;
  height: 86px;
}
@supports ((mask-image: url("/brand/logo/archeon-monogram-mono.svg")) or
           (-webkit-mask-image: url("/brand/logo/archeon-monogram-mono.svg"))) {
  .mono-mark {
    background-color: currentColor;
    -webkit-mask: url("/brand/logo/archeon-monogram-mono.svg") no-repeat center / contain;
    mask: url("/brand/logo/archeon-monogram-mono.svg") no-repeat center / contain;
  }
}
.ink-navy { color: var(--ar-navy); }
.ink-white { color: var(--ar-ink-on-dark); }

/* Clear space: the dashed edge is the limit, and the padding is the rule.
   Monogram 68px tall, so half its height is 34px on all four sides. */
.cs-frame {
  display: inline-block;
  margin-top: 24px;
  padding: 34px;
  border: 1px dashed var(--ar-arc);
  border-radius: var(--ar-radius-sm);
  background: var(--ar-navy);
}
.cs-frame img { display: block; height: 68px; width: auto; max-height: none; }

/* Minimum sizes, shown at the actual minimum. */
.min-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 34px;
  margin-top: 24px;
  padding: 26px;
  border-radius: var(--ar-radius);
  background: var(--ar-navy);
  border: 1px solid var(--ar-hairline-on-dark);
}
.min-item { text-align: left; }
.min-item img { display: block; height: auto; }
.min-mono img { width: 24px; }
.min-lockup img { width: 120px; }
.min-item span {
  display: block;
  margin-top: 12px;
  font-family: var(--ar-font-mono);
  font-size: 12px;
  color: var(--ar-ink-on-dark-4);
}

/* ── Do and do not ────────────────────────────────────────────────────── */

.donts {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px 32px;
}
.donts li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ar-ink-on-dark-3);
}
.band-paper .donts li { color: var(--ar-ink-2); }
.donts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 13px;
  height: 2px;
  border-radius: 1px;
  background: var(--ar-critical);
}

.pill {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid var(--ar-hairline);
  font-family: var(--ar-font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ar-ink);
}
.band-navy .pill { color: var(--ar-ink-on-dark); }
.pill-do { border-color: var(--ar-ok); }
.pill-dont { border-color: var(--ar-critical); }

/* ── Callout ──────────────────────────────────────────────────────────── */

.rule {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 3px solid var(--ar-signal-deep);
  border-radius: 0 var(--ar-radius-sm) var(--ar-radius-sm) 0;
  background: var(--ar-surface);
  max-width: 72ch;
}
.rule p { font-size: 15px; color: var(--ar-ink-2); }
.rule strong { color: var(--ar-ink); font-weight: 650; }
.band-navy .rule {
  border-left-color: var(--ar-signal-lift);
  background: var(--ar-surface-dark);
}
.band-navy .rule p { color: var(--ar-ink-on-dark-2); }
.band-navy .rule strong { color: var(--ar-ink-on-dark); }

/* The endorsement form, set at the size it is argued about. */
.endorsement {
  margin: 30px 0 0;
  font-family: var(--ar-font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ar-ink-on-dark);
}
.endorsement .lede { font-weight: 700; }

/* ── Typography specimens ─────────────────────────────────────────────── */

.type-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 26px;
  border-radius: var(--ar-radius);
  border: 1px solid var(--ar-hairline);
  background: var(--ar-paper);
}
.type-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 56px; }
.type-typed {
  margin: 0;
  font-family: var(--ar-font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.6vw, 1.75rem);
  letter-spacing: var(--ar-tracking-wordmark);
  color: var(--ar-ink-2);
}
.ab {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px 20px;
  margin-top: 26px;
}

.type-samples { margin-top: 26px; }
.type-samples > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--ar-hairline);
}
.type-samples > div:last-child { border-bottom: none; }
.type-samples .label {
  display: block;
  font-family: var(--ar-font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ar-tracking-eyebrow);
  color: var(--ar-ink-3);
  margin-bottom: 10px;
}
.samp-display {
  font-family: var(--ar-font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.6vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--ar-ink);
}
.samp-body { font-family: var(--ar-font); font-size: 1rem; color: var(--ar-ink-2); max-width: 62ch; }
.samp-mono {
  font-family: var(--ar-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--ar-ink);
}

/* ── Boilerplate ──────────────────────────────────────────────────────── */

.copyblock { margin-top: 28px; }
.copyblock h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}
.copyblock .len {
  font-family: var(--ar-font-mono);
  font-size: 12.5px;
  color: var(--ar-ink-3);
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 0;
}
.copyblock pre {
  margin: 0;
  padding: 20px 22px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background: var(--ar-surface);
  border: 1px solid var(--ar-hairline);
  border-left: 3px solid var(--ar-signal-deep);
  border-radius: 0 var(--ar-radius-sm) var(--ar-radius-sm) 0;
  font-family: var(--ar-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ar-ink-2);
  max-width: 76ch;
}

.facts {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}
.facts div {
  padding: 20px 22px;
  border: 1px solid var(--ar-hairline);
  border-radius: var(--ar-radius);
  background: var(--ar-surface);
}
.facts dt {
  font-family: var(--ar-font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ar-tracking-eyebrow);
  color: var(--ar-ink-3);
}
.facts dd {
  margin: 9px 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ar-ink);
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* /styles.css hides the header's same-page anchors at this width to give the
     lockup its room, matching them on a leading "#". The same two links point
     at the homepage from here, so they need naming in their own right: left
     in, they push the nav wider than the viewport and the whole page scrolls

  .tbl { font-size: 14px; }
  .tbl th, .tbl td { padding: 10px 14px 10px 0; }
  .min-row { gap: 26px; padding: 22px; }
  .cs-frame { padding: 24px; }
  .cs-frame img { height: 48px; }
}