/* ==========================================================================
   PTP BRAND SYSTEM — Core stylesheet
   Version 2.0.0 · Updated 2026-08-10
   Performance Technology Partners, LLC

   Contains: design tokens (CSS custom properties), reset, base typography,
   layout primitives and utilities.
   Pair with ptp-components.css for buttons, cards, tables and page furniture.

   Fonts: the stack tries locally installed Gotham first and falls back to
   Arial. Nothing is embedded or served, so no webfont license is required.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand color: Orange (primary) --- */
  --ptp-orange:            #ff4800;
  --ptp-orange-tint-1:     #ff5c04;
  --ptp-orange-tint-2:     #ff7107;
  --ptp-orange-tint-3:     #ff850b;
  --ptp-orange-dark:       #9e2500;  /* accessible orange — use for text */

  /* --- Brand color: Blue (secondary) --- */
  --ptp-blue:              #009dca;
  --ptp-blue-tint-1:       #00b2d8;
  --ptp-blue-tint-2:       #00c8e6;
  --ptp-blue-tint-3:       #00ddf4;
  --ptp-blue-dark:         #005370;  /* accessible blue — use for text */

  /* --- Brand color: Grey (grounding) --- */
  --ptp-grey:              #646469;
  --ptp-grey-tint-1:       #949597;
  --ptp-grey-tint-2:       #c4c4c6;
  --ptp-grey-tint-3:       #f4f4f4;
  --ptp-grey-dark:         #27272b;  /* default text color — use instead of black */

  /* --- Extended: charts and data visualization ONLY --- */
  --ptp-green:             #6bd51b;
  --ptp-purple:            #8500a8;

  --ptp-white:             #ffffff;
  --ptp-black:             #000000;  /* one-color print logo only */

  /* --- Semantic --- */
  --ptp-text:              var(--ptp-grey-dark);
  --ptp-text-muted:        var(--ptp-grey);
  --ptp-text-inverse:      var(--ptp-white);
  --ptp-link:              var(--ptp-orange-dark);
  --ptp-link-hover:        var(--ptp-orange);
  --ptp-link-inverse:      var(--ptp-orange-tint-3);
  --ptp-bg:                var(--ptp-white);
  --ptp-bg-alt:            var(--ptp-grey-tint-3);
  --ptp-bg-inverse:        var(--ptp-grey-dark);
  --ptp-border:            var(--ptp-grey-tint-2);
  --ptp-border-strong:     var(--ptp-grey-tint-1);
  --ptp-accent:            var(--ptp-orange);
  --ptp-accent-secondary:  var(--ptp-blue);
  --ptp-focus-ring:        var(--ptp-blue-dark);

  /* --- Gradients --- */
  --ptp-gradient-brand:     linear-gradient(90deg,  #ff4800 0%, #ff850b 100%);
  --ptp-gradient-diagonal:  linear-gradient(135deg, #ff4800 0%, #ff850b 100%);
  --ptp-gradient-blue:      linear-gradient(90deg,  #005370 0%, #009dca 100%);
  --ptp-gradient-dark:      linear-gradient(135deg, #27272b 0%, #646469 100%);

  /* --- Typography --- */
  --ptp-font: "Gotham", "Gotham Book", Arial, Helvetica, "Helvetica Neue", sans-serif;
  --ptp-font-mono: "SF Mono", Menlo, Consolas, "Courier New", monospace;

  --ptp-weight-light:   300;
  --ptp-weight-book:    400;
  --ptp-weight-medium:  500;
  --ptp-weight-bold:    700;
  --ptp-weight-black:   800;

  --ptp-size-display: clamp(2.75rem, 6vw, 4.5rem);
  --ptp-size-h1:      clamp(2.25rem, 4.5vw, 3.25rem);
  --ptp-size-h2:      clamp(1.75rem, 3vw, 2.25rem);
  --ptp-size-h3:      1.375rem;
  --ptp-size-h4:      1.0625rem;
  --ptp-size-eyebrow: 0.8125rem;
  --ptp-size-lead:    1.25rem;
  --ptp-size-body:    1rem;
  --ptp-size-small:   0.875rem;
  --ptp-size-caption: 0.75rem;

  --ptp-leading-tight: 1.06;
  --ptp-leading-snug:  1.3;
  --ptp-leading-body:  1.6;

  --ptp-tracking-head:    0.01em;
  --ptp-tracking-label:   0.04em;
  --ptp-tracking-eyebrow: 0.12em;

  /* --- Space --- */
  --ptp-space-3xs: 0.25rem;
  --ptp-space-2xs: 0.5rem;
  --ptp-space-xs:  0.75rem;
  --ptp-space-sm:  1rem;
  --ptp-space-md:  1.5rem;
  --ptp-space-lg:  2rem;
  --ptp-space-xl:  3rem;
  --ptp-space-2xl: 4rem;
  --ptp-space-3xl: 6rem;
  --ptp-space-4xl: 8rem;

  --ptp-container:        75rem;
  --ptp-container-narrow: 44rem;
  --ptp-measure:          34rem;   /* ~16 words / 68 characters per line */
  --ptp-gutter:           clamp(1.25rem, 4vw, 2.5rem);
  --ptp-section-pad:      clamp(3rem, 8vw, 6rem);

  /* --- Shape, depth, motion --- */
  --ptp-radius: 0;
  --ptp-radius-sm: 2px;
  --ptp-rule: 2px solid var(--ptp-orange);
  --ptp-hairline: 1px solid var(--ptp-border);

  --ptp-shadow-sm: 0 1px 2px rgba(39, 39, 43, 0.08);
  --ptp-shadow-md: 0 2px 8px rgba(39, 39, 43, 0.10);
  --ptp-shadow-lg: 0 8px 24px rgba(39, 39, 43, 0.12);

  --ptp-duration-fast: 120ms;
  --ptp-duration:      200ms;
  --ptp-duration-slow: 400ms;
  --ptp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ptp-bg);
  color: var(--ptp-text);
  font-family: var(--ptp-font);
  font-size: var(--ptp-size-body);
  font-weight: var(--ptp-weight-book);
  line-height: var(--ptp-leading-body);
  text-align: left;              /* flush left, ragged right — never justify */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   Headlines are UPPERCASE, Light weight, tightly leaded.
   Bold is reserved for emphasis and small labels.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--ptp-space-sm);
  text-transform: uppercase;
  text-wrap: balance;
}

h1, .ptp-h1 {
  font-size: var(--ptp-size-h1);
  font-weight: var(--ptp-weight-light);
  line-height: var(--ptp-leading-tight);
  letter-spacing: var(--ptp-tracking-head);
}

.ptp-display {
  margin: 0 0 var(--ptp-space-md);
  font-size: var(--ptp-size-display);
  font-weight: var(--ptp-weight-light);
  line-height: 1.05;
  letter-spacing: var(--ptp-tracking-head);
  text-transform: uppercase;
  text-wrap: balance;
}

h2, .ptp-h2 {
  font-size: var(--ptp-size-h2);
  font-weight: var(--ptp-weight-light);
  line-height: 1.08;
  letter-spacing: var(--ptp-tracking-head);
}

h3, .ptp-h3 {
  font-size: var(--ptp-size-h3);
  font-weight: var(--ptp-weight-bold);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

h4, h5, h6, .ptp-h4 {
  font-size: var(--ptp-size-h4);
  font-weight: var(--ptp-weight-bold);
  line-height: var(--ptp-leading-snug);
  letter-spacing: var(--ptp-tracking-label);
}

/* Emphasis inside a Light headline — the one approved mixed-weight treatment */
h1 strong, h2 strong, .ptp-display strong, .ptp-h1 strong, .ptp-h2 strong {
  font-weight: var(--ptp-weight-bold);
}

/* Eyebrow / kicker: the small bold uppercase label that sits above a headline */
.ptp-eyebrow {
  display: block;
  margin: 0 0 var(--ptp-space-2xs);
  color: var(--ptp-orange-dark);
  font-size: var(--ptp-size-eyebrow);
  font-weight: var(--ptp-weight-bold);
  line-height: 1.3;
  letter-spacing: var(--ptp-tracking-eyebrow);
  text-transform: uppercase;
}
.ptp-eyebrow--on-dark { color: var(--ptp-orange-tint-3); }

p, ul, ol, dl, blockquote, table, figure { margin: 0 0 var(--ptp-space-md); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

p, li { max-width: var(--ptp-measure); }
.ptp-measure-full p, .ptp-measure-full li, .ptp-measure-full { max-width: none; }

.ptp-lead {
  max-width: var(--ptp-measure);
  font-size: var(--ptp-size-lead);
  line-height: 1.55;
  color: var(--ptp-text);
}

.ptp-small   { font-size: var(--ptp-size-small); }
.ptp-caption {
  font-size: var(--ptp-size-caption);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ptp-text-muted);
}

strong, b { font-weight: var(--ptp-weight-bold); }

a {
  color: var(--ptp-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--ptp-duration) var(--ptp-ease);
}
a:hover { color: var(--ptp-link-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--ptp-focus-ring);
  outline-offset: 2px;
}

ul, ol { padding-left: 1.25em; }
li { margin-bottom: var(--ptp-space-3xs); }

/* Branded bullet list */
.ptp-list { list-style: none; padding-left: 0; }
.ptp-list li {
  position: relative;
  padding-left: 1.375rem;
  margin-bottom: var(--ptp-space-2xs);
}
.ptp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--ptp-orange);
}

blockquote {
  padding-left: var(--ptp-space-md);
  border-left: 4px solid var(--ptp-orange);
  font-size: var(--ptp-size-lead);
  font-weight: var(--ptp-weight-light);
  line-height: 1.45;
  color: var(--ptp-text);
}
blockquote cite {
  display: block;
  margin-top: var(--ptp-space-sm);
  font-size: var(--ptp-size-small);
  font-style: normal;
  font-weight: var(--ptp-weight-bold);
  letter-spacing: var(--ptp-tracking-label);
  text-transform: uppercase;
  color: var(--ptp-text-muted);
}

hr, .ptp-rule {
  border: 0;
  border-top: var(--ptp-rule);
  width: 3.5rem;
  margin: var(--ptp-space-lg) 0;
}
.ptp-rule--full { width: 100%; border-top: var(--ptp-hairline); }

code, pre, kbd { font-family: var(--ptp-font-mono); font-size: 0.9em; }
code { background: var(--ptp-bg-alt); padding: 0.1em 0.35em; }
pre { background: var(--ptp-bg-alt); padding: var(--ptp-space-sm); overflow-x: auto; }
pre code { background: none; padding: 0; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.ptp-container {
  width: 100%;
  max-width: var(--ptp-container);
  margin-inline: auto;
  padding-inline: var(--ptp-gutter);
}
.ptp-container--narrow { max-width: var(--ptp-container-narrow); }
.ptp-container--wide   { max-width: 90rem; }

.ptp-section { padding-block: var(--ptp-section-pad); }
.ptp-section--tight { padding-block: var(--ptp-space-xl); }
.ptp-section--alt   { background: var(--ptp-bg-alt); }
.ptp-section--dark  { background: var(--ptp-bg-inverse); color: var(--ptp-text-inverse); }
.ptp-section--brand { background: var(--ptp-gradient-brand); color: var(--ptp-text-inverse); }

/* Inverse context: relink colors so nested content stays legible */
.ptp-section--dark a,
.ptp-section--brand a,
.ptp-on-dark a { color: var(--ptp-link-inverse); }
.ptp-section--brand a { color: var(--ptp-white); }
.ptp-section--dark .ptp-caption,
.ptp-on-dark .ptp-caption { color: var(--ptp-grey-tint-2); }

.ptp-grid { display: grid; gap: var(--ptp-space-lg); }
.ptp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ptp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ptp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.ptp-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .ptp-grid--sidebar { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--ptp-space-xl); }
  .ptp-grid--sidebar-right { grid-template-columns: minmax(0, 1fr) 18rem; }
}

.ptp-stack > * + * { margin-top: var(--ptp-space-md); }
.ptp-stack--tight > * + * { margin-top: var(--ptp-space-2xs); }
.ptp-stack--loose > * + * { margin-top: var(--ptp-space-xl); }

.ptp-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ptp-space-sm);
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. UTILITIES
   -------------------------------------------------------------------------- */
.ptp-text-orange  { color: var(--ptp-orange-dark); }  /* accessible by default */
.ptp-text-blue    { color: var(--ptp-blue-dark); }
.ptp-text-muted   { color: var(--ptp-text-muted); }
.ptp-text-inverse { color: var(--ptp-text-inverse); }

.ptp-bg-white   { background: var(--ptp-white); }
.ptp-bg-alt     { background: var(--ptp-bg-alt); }
.ptp-bg-dark    { background: var(--ptp-bg-inverse); color: var(--ptp-text-inverse); }
.ptp-bg-orange  { background: var(--ptp-orange); color: var(--ptp-white); }
.ptp-bg-blue    { background: var(--ptp-blue-dark); color: var(--ptp-white); }
.ptp-bg-brand   { background: var(--ptp-gradient-brand); color: var(--ptp-white); }

.ptp-uppercase { text-transform: uppercase; letter-spacing: var(--ptp-tracking-label); }
.ptp-nowrap { white-space: nowrap; }

.ptp-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ptp-skip-link {
  position: absolute; left: -9999px;
  background: var(--ptp-grey-dark); color: var(--ptp-white);
  padding: var(--ptp-space-2xs) var(--ptp-space-sm);
  z-index: 999;
}
.ptp-skip-link:focus { left: var(--ptp-space-sm); top: var(--ptp-space-sm); }

/* --------------------------------------------------------------------------
   6. PATTERN FIELDS

   IMPORTANT — the four PTP patterns are finished PANELS, not seamless tiles.
   Each has internal margin inside its viewBox, so repeating one leaves visible
   gutters between motifs. The graduated-triangle panel additionally carries its
   own top-to-bottom graduation, which tiling destroys outright.

   So: place the pattern ONCE, enlarged to cover the field, never repeated.
   `background-repeat: repeat` on these files is always a mistake.

   The artwork is painted through a mask rather than used as a background image.
   The source paths are near-black, so as a plain background the pattern
   disappears on any dark surface. Masking lets one file be tinted to suit —
   Grey Dark on light or gradient fields, white on dark ones.

   Set --ptp-pattern to any file in assets/patterns/.
   -------------------------------------------------------------------------- */
.ptp-pattern-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ptp-pattern-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ptp-pattern-color, var(--ptp-grey-dark));
  opacity: var(--ptp-pattern-opacity, 0.16);
  /* layer 1: the artwork, placed once. layer 2: the mandated fade to zero. */
  -webkit-mask-image:
    var(--ptp-pattern, url("../assets/patterns/ptp-pattern-graduated-triangle-field.svg")),
    linear-gradient(var(--ptp-pattern-angle, 260deg), #000 0%, transparent 70%);
  mask-image:
    var(--ptp-pattern, url("../assets/patterns/ptp-pattern-graduated-triangle-field.svg")),
    linear-gradient(var(--ptp-pattern-angle, 260deg), #000 0%, transparent 70%);
  -webkit-mask-size: var(--ptp-pattern-size, cover), cover;
          mask-size: var(--ptp-pattern-size, cover), cover;
  -webkit-mask-position: var(--ptp-pattern-pos, right center), center;
          mask-position: var(--ptp-pattern-pos, right center), center;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  pointer-events: none;
}

/* Suggested tints. The pattern must never out-read the content. */
.ptp-pattern-field--on-light { --ptp-pattern-color: var(--ptp-grey-dark); --ptp-pattern-opacity: 0.12; }
.ptp-pattern-field--on-brand { --ptp-pattern-color: var(--ptp-grey-dark); --ptp-pattern-opacity: 0.16; }
.ptp-pattern-field--on-dark  { --ptp-pattern-color: #ffffff;              --ptp-pattern-opacity: 0.14; }

/* --------------------------------------------------------------------------
   7. PRINT
   -------------------------------------------------------------------------- */
@media print {
  :root { --ptp-section-pad: 1.5rem; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .ptp-no-print { display: none !important; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #646469; }
  .ptp-section--dark, .ptp-section--brand { background: none !important; color: #000 !important; }
  h1, h2, h3, h4 { break-after: avoid; }
  table, figure, blockquote { break-inside: avoid; }
  .ptp-page-break { break-before: page; }
}