/* Presidio site — the Industry skin over the wireframe's structure.
   Layout and spacing follow the repo (centered, 760px column); everything
   visual comes from ../styles.css. Nothing here invents a color, a face or a
   corner radius: this file only maps the wireframe's classes onto the system.

   Loaded after css/styles.css, which carries the Industry tokens and faces. */

:root { --max-width: 760px; }

/* The wireframe centers everything on one column. Industry normally hangs off
   a left axis, so the symmetry is the deliberate exception here — kept because
   the site is two short pages with no grid to hold. Vertical intervals are
   still whole multiples of --leading, which is what makes the column feel set
   rather than stacked. */
body { text-align: center; }

.site-header, main, .site-footer {
  max-width: var(--max-width); margin: 0 auto;
}
/* Every rule on this page — the section tops and the footer top — must span the
   SAME width, or the column reads as a mistake in a system built on hairlines.
   So the gutter lives on the elements that hold content, never on `main`: a
   rule drawn on `main`'s child would sit inside `main`'s padding box and come
   up short against the footer's, which draws on its own border box. */
.site-header, section { padding-inline: var(--edge); }
.site-header { padding-block: calc(2 * var(--leading)) 0; }
main { padding-block: 0; }
section { padding-block: calc(3 * var(--leading)); }

/* — brand — */
/* the seal IS the header, on both pages, and links home. One mark per page:
   the logotype it replaced now appears only in the footer, as .logo-sm.

   Inline SVG rather than an <img>: the ring type is set in the system's display
   face, and a webfont only reaches the glyphs when the SVG is in the document.
   That also lets the ink take currentColor, so the seal inverts on a dark
   ground instead of shipping a second asset for it. */
.logo { display: inline-block; text-decoration: none; }
/* The seal's ink is currentColor so it can invert on a dark ground, but the
   anchor around it carries the link colour — without this the ring type would
   come out accent red. Pin it to ink here; override `color` on an ancestor to
   flip the whole mark. */
.seal {
  width: 160px; height: auto; margin: 0 auto; display: block;
  color: var(--color-text);
}
/* Ring type. Size is derived, not picked: Knockout 52's cap height is 0.666em,
   so 51.1px gives the 34-unit cap the two baselines are spaced to hold. The
   arc spans come from textLength in the markup — don't add letter-spacing
   here, it would fight them and knock the words off centre. */
.seal-type {
  font-family: var(--font-display); font-weight: var(--font-display-weight);
  font-size: 51.1px;
}

/* — hero — */
.hero { padding-top: calc(2 * var(--leading)); padding-bottom: var(--leading); }
.hero h1 { margin: 0 0 var(--leading); }
.hero .sub a { color: inherit; font-size: 26px; text-decoration: underline; text-underline-offset: 0.15em; }
.hero .sub a:hover { color: var(--color-accent); }
.sub {
  max-width: 46ch; margin-inline: auto; margin-block: 0;
  font-size: 17px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — sections — */
/* the caption rule runs full column here: label above the rule, heading below.
   Centered, so the kicker centers with it. */
.contact-section { border-top: 1px solid var(--color-divider); }
.contact-section h2 { margin: 0 0 var(--leading); }
.contact-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
}
.contact-actions .btn { min-height: 44px; padding-inline: var(--leading); gap: var(--space-2); }
.contact-actions .btn .mono { font-family: var(--font-mono); }

/* — the ASCII globe —
   Ink for the sphere itself; accent only on the few scattered characters that
   mark a flaring site, where the color is signal rather than decoration. It is
   already mono, which is the system's data voice. */
.globe-section { overflow: hidden; padding-block: var(--leading) calc(3 * var(--leading)); }
/* Sized by js/globe.js to fit the column; the font-size here is only the
   pre-script fallback. */
.globe {
  margin: 0 auto; display: block; width: max-content; max-width: 100%;
  text-align: left; overflow: hidden;
  font-family: var(--font-mono); font-size: clamp(3px, 1.6vw, 11px);
  line-height: 1; white-space: pre; color: var(--color-text);
}
.globe-caption {
  margin: 0 0 calc(2 * var(--leading));
  font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.12em;
  text-transform: uppercase; min-height: var(--leading); line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
/* The characters marking a flaring site: the one place the drawing takes accent,
   so a flash points at a located machine. */
.globe-mark-a { color: var(--color-accent); }
.globe-mark-b { color: var(--color-accent-2-600); }

/* — the form embed slot —
   A drawn object, so it takes the frame and its registration marks. The border
   is solid, not dashed: the slot is a real plate the embed drops into, and the
   system has no dashed rule. */
.form-section { padding-top: calc(2 * var(--leading)); }
.placeholder-form {
  display: flex; align-items: center; justify-content: center;
  min-height: 480px; padding: var(--leading);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* — footer — */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding: calc(2 * var(--leading)) var(--edge) calc(3 * var(--leading));
}
.logo-sm {
  font-family: var(--font-display); font-weight: var(--font-display-weight);
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.005em;
  margin: 0 0 var(--leading);
}
.fine-print {
  margin: 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.fine-print.mono { font-family: var(--font-mono); font-size: 12px; }
.fine-print a { color: inherit; text-decoration: none; }
.fine-print a:hover { color: var(--color-accent); }

/* — narrow screens — */
@media (max-width: 480px) {
  .seal { width: 128px; }
  .site-header { padding-block: var(--leading) 0; }
  .hero { padding-top: var(--leading); }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  section { padding-block: calc(2 * var(--leading)); }
  .globe-section { padding-top: var(--leading); }
  .contact-actions .btn { width: 100%; justify-content: center; }
}