/* Blue Steel Systems LLC
 *
 * Hand-written CSS, no build step, no external assets (no webfonts, no CDN) --
 * the whole site is two files rsync'd to the docroot. Keep it that way.
 *
 * Palette is the steel tempering scale: the blues are the cold end, and the
 * straw/bronze/purple accents are the real oxide colors steel passes through on
 * the way to blue. They appear ONLY in the temper bar; nothing else is warm.
 */

:root {
  --void:        #080d13;  /* page ground, blue-black */
  --steel-deep:  #0f1c28;  /* raised panels */
  --steel:       #1d3a53;  /* rules, borders */
  --steel-light: #4f82b0;  /* links, marks */
  --ice:         #b9cddd;  /* body text */
  --ice-bright:  #eaf2f8;  /* headings */
  --mute:        #6b8299;  /* captions, annotations */

  /* Tempering oxide colors, by temperature. */
  --t-straw:     #e6bc55;
  --t-bronze:    #b8673a;
  --t-purple:    #6f4383;
  --t-blue:      #2f6699;
  --t-grey:      #4c5f70;

  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "DejaVu Sans Mono", Menlo, Consolas, monospace;

  --gutter: 2rem;
  --measure: 68rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Shared section label. Not decoration -- it names what the block is. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--steel);
}

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--steel);
  background: var(--steel-deep);
}

.masthead .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ice-bright);
}

.wordmark-blue   { color: var(--steel-light); }
.wordmark-steel  { color: var(--ice-bright); }

/* "Systems" drops to the utility face -- it's the descriptor, not the name. */
.wordmark-systems {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--mute);
  margin-left: 0.6rem;
}

.entity {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* --- Hero ---------------------------------------------------------------- */

/* Brushed metal: fine vertical striations over a cool gradient. Very low
 * contrast on purpose -- it should read as a surface, never as stripes. */
.hero {
  position: relative;
  padding: clamp(4rem, 11vw, 8.5rem) 0;
  border-bottom: 1px solid var(--steel);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.016) 0px,
      rgba(255, 255, 255, 0.016) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(165deg, #16283a 0%, #0f1c28 45%, var(--void) 100%);
}

.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.9rem, 8.5vw, 6.5rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ice-bright);
  margin: 0 0 2rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--steel-light);
}

.lede {
  max-width: 44ch;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: var(--ice);
  margin: 0;
}

/* --- Temper bar (signature) ---------------------------------------------- */

.temper {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-bottom: 1px solid var(--steel);
}

/* The bar and the tick strip share one .wrap (see index.html) so they sit in the
 * same coordinate space -- otherwise the annotations point at the wrong bands.
 * The tick offsets in the markup are the exact cumulative band starts for these
 * tracks (1 + 1 + 1 + 1.35 + 1 = 5.35fr). Change a track, recompute the ticks. */
.temper-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.35fr 1fr;
  height: 4.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--steel);
  border-bottom: 1px solid var(--steel);
}

/* Each band carries a subtle metal sheen -- a bright band across the middle,
 * the way a curved polished surface catches light. */
.band {
  flex: 1;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.34) 0%,
    rgba(255, 255, 255, 0.13) 42%,
    rgba(255, 255, 255, 0.05) 55%,
    rgba(0, 0, 0, 0.42) 100%
  );
  transform-origin: bottom;
  animation: rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.band-straw  { background-color: var(--t-straw);  animation-delay: 0ms;   }
.band-bronze { background-color: var(--t-bronze); animation-delay: 90ms;  }
.band-purple { background-color: var(--t-purple); animation-delay: 180ms; }
.band-blue   { background-color: var(--t-blue);   animation-delay: 270ms; flex: 1.35; }
.band-grey   { background-color: var(--t-grey);   animation-delay: 360ms; }

@keyframes rise {
  from { transform: scaleY(0.12); opacity: 0; }
  to   { transform: scaleY(1);    opacity: 1; }
}

/* Annotations sit under the bar at the real band boundaries. */
.temper-scale {
  position: relative;
  height: 3.6rem;
}

.tick {
  position: absolute;
  left: var(--at);
  top: 0;
  padding-top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--mute);
  white-space: nowrap;
}

.tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0.4rem;
  background: var(--steel);
}

.tick i {
  display: block;
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* The one mark that matters: where the steel turns blue. */
.tick-mark {
  color: var(--ice-bright);
}

.tick-mark::before {
  height: 0.85rem;
  width: 2px;
  background: var(--ice-bright);
}

.temper-note {
  max-width: 58ch;
  margin: 2.25rem 0 0;
  color: var(--ice);
}

/* --- Practice ------------------------------------------------------------ */

.practice {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-bottom: 1px solid var(--steel);
}

/* Three services, not three steps -- no numbering, just hairline separators. */
.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.col {
  padding: 0 2rem;
  border-left: 1px solid var(--steel);
}

.col:first-child { padding-left: 0; border-left: 0; }
.col:last-child  { padding-right: 0; }

.col h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ice-bright);
  margin: 0 0 0.85rem;
}

.col p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--ice);
}

/* --- Contact ------------------------------------------------------------- */

.contact {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.contact-lede {
  max-width: 48ch;
  margin: 0 0 1.75rem;
}

.contact-mail {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.35rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--ice-bright);
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 3px solid var(--steel-light);
  transition: color 160ms ease, border-color 160ms ease;
  overflow-wrap: anywhere;
}

.contact-mail:hover,
.contact-mail:focus-visible {
  color: var(--steel-light);
  border-bottom-color: var(--t-straw);
}

/* --- Colophon ------------------------------------------------------------ */

.colophon {
  border-top: 1px solid var(--steel);
  background: var(--steel-deep);
}

.colophon .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* --- Quality floor -------------------------------------------------------- */

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

@media (max-width: 48rem) {
  :root { --gutter: 1.25rem; }

  .cols {
    grid-template-columns: 1fr;
  }

  .col {
    padding: 1.75rem 0;
    border-left: 0;
    border-top: 1px solid var(--steel);
  }

  .col:first-child { padding-top: 0; border-top: 0; }
  .col:last-child  { padding-bottom: 0; }

  /* The scale gets too tight to label in place -- stack the ticks in flow. */
  .temper-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    height: auto;
    padding: 0.9rem var(--gutter) 0;
  }

  .tick {
    position: static;
    padding-top: 0;
  }

  .tick::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .band { animation: none; }
  * { transition-duration: 0.01ms !important; }
}