/* ============================================================
   MyWave · website_v4
   Hallmark · macrostructure: Letter / Long Document
              nav: N6 Masthead · footer: Ft1 Signed colophon
              genre: editorial
              theme: custom tuned (Harbor brand)
   pre-emit critique: P5 H4 E5 S4 R5 V5
   ------------------------------------------------------------
   The whole site runs on the tokens below. No inline hex / rgb
   values anywhere else in the stylesheet — if a value is needed
   that doesn't exist here, lift it into a token first.
   ============================================================ */

:root {
  /* — Paper (Harbor brand, source: harbor-host/branding/background.svg) — */
  --bg-0:      #0a2030;  /* deep navy — page base, Harbor gradient top       */
  --bg-1:      #097288;  /* Harbor teal — secondary band / quiet section bg  */
  --bg-2:      #064a5c;  /* deep teal — footer / closing band                */
  --card:      #0d2a3c;  /* card / callout surface                          */
  --line:      #1b4a5e;  /* hairline rule, borders                          */

  /* — Accent (the brand signature — single warm spark) — */
  --accent:    #FFA781;  /* coral — links, emphasis, the one CTA underline   */
  --accent-ink:#2a1505;  /* legible text on a coral fill                    */
  --accent-dim:#c9885f;  /* coral eased toward ink, for hover/subtle use     */

  /* — Ink — */
  --text:      #eef6f8;  /* primary text                                    */
  --text-muted:#9fc1cd;  /* secondary / caption text                        */

  /* — State (source: support-agent portal) — */
  --ok:        #34d399;
  --warn:      #fbbf24;
  --danger:    #fca5a5;

  /* — Print (ink on paper, isolated from the dark screen system) — */
  --print-paper: #ffffff;
  --print-ink:   #000000;

  /* — Type (Permanent Marker for display/headings; Patrick Hand SC for body) — */
  --font-display: "Permanent Marker", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Patrick Hand SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* — Measure & spacing (4pt scale) — */
  --measure:   34rem;     /* comfortable reading column (~64ch)             */
  --measure-narrow: 28rem;
  --measure-wide: 46rem;
  --gutter:    1.5rem;
  --gutter-lg: 3rem;
}

/* ============================================================
   Reset & base
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;            /* gate 34 — never `hidden`            */
}

body {
  margin: 0;
  background-color: var(--bg-0);
  background-image: url("../assets/background.svg");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 16→17px */
  line-height: 1.8;            /* looser leading suits the handwriting body face */
  font-feature-settings: "kern" 1, "liga" 0;  /* ligatures off — handwriting faces ship no/broken fi/fl glyphs */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;            /* gate 34                            */
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color 0.15s ease, color 0.15s ease;
}
a:hover { border-bottom-color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0.25em;
  border-radius: 1px;
}

/* ============================================================
   Typography
   Headings are always roman. Emphasis inside a heading is
   carried by weight or accent color, never italics (gate 38a).
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 0.6em;
  overflow-wrap: anywhere;       /* gate 51 — long words wrap     */
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  margin-top: 2.5em;
}

h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  margin-top: 1.8em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--text); }
em { font-style: italic; }                /* body emphasis only, never headings */

/* Permanent Marker ships only at weight 400, so normalize the display
   elements to its real weight and a slightly open tracking — otherwise the
   browser faux-bolds the headings and they render muddy. Size carries the
   hierarchy. */
h1, h2, h3, h4,
.nameplate .brand-word,
.pull,
.cta-signed .cta-line,
.colophon .colophon-name,
.services-inline .svc-name,
.steps strong,
.promise strong {
  font-weight: 400;
  letter-spacing: 0.02em;
}
h1 { line-height: 1.14; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin: 0.3em 0; }
li::marker { color: var(--text-muted); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

/* ============================================================
   Layout primitives
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

/* Long-document / letter body. One reading column, generous leading. */
.prose {
  max-width: var(--measure);
}
.prose p,
.prose ul,
.prose ol,
.prose .spec-list { max-width: var(--measure); }

/* Lede — the opening paragraph of a letter or service page */
.lede {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 1.6em;
}

/* ============================================================
   Masthead (N6) — banner treatment
   A distinct teal band (--bg-1, the Harbor brand color) with the
   coral signature line beneath, holding the Harbor lighthouse mark
   + wordmark + dateline + nav. Differentiated from the page body,
   matching the Harbor login branding.
   ============================================================ */

.masthead {
  background: var(--bg-1);
  border-bottom: 2px solid var(--accent);   /* coral brand-signature line */
  padding-top: clamp(1.5rem, 1rem + 1.8vw, 2.4rem);
  padding-bottom: 0.25rem;
  text-align: center;
}

.nameplate {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  letter-spacing: -0.04em;
  color: var(--text);
  margin: 0;
  line-height: 1;
}
.nameplate a {
  color: inherit;
  border-bottom: 0;
}
.nameplate .brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  border-bottom: 0;
}
.nameplate .brand-mark {
  height: clamp(2.5rem, 2rem + 1.5vw, 3.25rem);   /* the real Harbor lighthouse */
  width: auto;
  display: block;
}
.nameplate .brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem);
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
}

.dateline {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  margin: 0.7em 0 0;
  font-weight: 500;
}

.masthead-rule {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  margin: 0.9rem auto 0;
  width: min(100%, var(--measure-wide));
}

.masthead-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2.25rem);
  padding: 0.85rem var(--gutter) 0.75rem;
  max-width: var(--measure-wide);
  margin-inline: auto;
  font-size: 0.92rem;
}
.masthead-nav a {
  color: color-mix(in srgb, var(--text) 80%, transparent);
  border-bottom: 0;
  letter-spacing: 0.02em;
  padding: 0.2em 0;
}
.masthead-nav a:hover,
.masthead-nav a[aria-current="page"] {
  color: var(--text);
  border-bottom: 1px solid var(--accent);
}

/* ============================================================
   Letter / long-document runs
   ============================================================ */

.letter,
.document {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem);
}
.letter .container,
.document .container { max-width: var(--measure-wide); }

/* Section breaks inside a document — numbered or titled */
.section-break {
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0;
  width: 4rem;
}

/* Eyebrow — small mono label, used very sparingly for genuine sectioning */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.5em;
  font-weight: 400;
}

/* ============================================================
   Inline services list (homepage letter)
   Replaces the 3-card grid. Numbered references, not cards.
   ============================================================ */

.services-inline {
  list-style: none;
  padding: 0;
  margin: 1.8em 0;
  max-width: var(--measure);
}
.services-inline li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.9em 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.services-inline li:last-child { border-bottom: 1px solid var(--line); }

.services-inline .svc-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.services-inline .svc-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.services-inline .svc-name:hover { border-bottom-color: var(--accent); }
.services-inline .svc-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  grid-column: 2;
}
.services-inline .svc-sub {
  margin-top: 0.35em;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.services-inline .svc-sub a { font-weight: 500; }

/* ============================================================
   Two-path block (Harbor Own / Host)
   Two columns of plain prose separated by a vertical rule.
   Not cards. Not glass.
   ============================================================ */

.twopath {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  max-width: var(--measure-wide);
  margin-block: 2.5rem;
}
.twopath .path { max-width: none; }
.twopath .path + .path {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.path .path-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4em;
  font-weight: 400;
}
.path h3 { margin-top: 0; }

@media (max-width: 640px) {
  .twopath { grid-template-columns: 1fr; }     /* gate 52 — collapse */
  .twopath .path + .path {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 2rem;
    margin-top: 2rem;
  }
}

/* ============================================================
   Spec list — honest, named-software callouts.
   Mono pair: term left, plain description right.
   ============================================================ */

.spec-list {
  list-style: none;
  padding: 0;
  margin: 1.5em 0;
  max-width: var(--measure);
}
.spec-list li {
  display: grid;
  grid-template-columns: minmax(0, 9rem) 1fr;
  gap: 1rem;
  padding: 0.7em 0;
  border-top: 1px solid var(--line);
  margin: 0;
  align-items: baseline;
}
.spec-list li:last-child { border-bottom: 1px solid var(--line); }
.spec-list .spec-term {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
}
.spec-list .spec-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
}

@media (max-width: 480px) {
  .spec-list li { grid-template-columns: 1fr; gap: 0.15rem; }  /* stack */
}

/* ============================================================
   Numbered steps (how it works) — inline in prose, not cards
   ============================================================ */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 1.5em 0;
  max-width: var(--measure);
}
.steps li {
  counter-increment: step;
  padding: 0.9em 0 0.9em 3rem;
  border-top: 1px solid var(--line);
  position: relative;
  margin: 0;
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.95em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.steps strong {
  display: block;
  margin-bottom: 0.1em;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ============================================================
   Pull quote / marginal callout
   A single coral-marked line, not a glass card.
   ============================================================ */

.pull {
  border-left: 3px solid var(--accent);
  padding: 0.4em 0 0.4em 1.25rem;
  margin: 2rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--text);
  max-width: var(--measure);
}
.pull .pull-attr {
  display: block;
  margin-top: 0.6em;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Trust promise — a short ordered list, coral markers, no glass */
.promise {
  list-style: none;
  padding: 0;
  margin: 1.5em 0;
  max-width: var(--measure);
}
.promise li {
  padding: 0.85em 0 0.85em 1.75em;
  border-top: 1px solid var(--line);
  position: relative;
  margin: 0;
}
.promise li:last-child { border-bottom: 1px solid var(--line); }
.promise li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3em;
  width: 0.7rem;
  height: 1px;
  background: var(--accent);
}
.promise strong { font-family: var(--font-display); }

/* ============================================================
   Network diagram (Wire page)
   Real hand-built SVG schematic. Hairline border, no fake chrome.
   ============================================================ */

.diagram {
  margin: 2.5rem 0;
  padding: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  max-width: var(--measure-wide);
}
/* On wider screens, let the diagram break out of the prose column toward the
   full container width so the schematic renders at a legible size. */
@media (min-width: 50rem) {
  .diagram {
    margin-inline: calc(-1 * (var(--measure-wide) - var(--measure)) / 2);
  }
}
.diagram .diagram-caption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
}
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram .node rect,
.diagram .node circle { fill: var(--card); stroke: var(--text-muted); stroke-width: 1.5; }
.diagram .node.accent rect { stroke: var(--accent); stroke-width: 2; }
.diagram .node text {
  font-family: var(--font-body);
  font-size: 18px;
  fill: var(--text);
  text-anchor: middle;
}
.diagram .node .node-label { font-weight: 600; }
.diagram .node .node-sub { fill: var(--text-muted); font-size: 13px; }
.diagram .wire { stroke: var(--line); stroke-width: 1.75; fill: none; }
.diagram .wire.accent { stroke: var(--accent); stroke-width: 2; }
.diagram .wire-label {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--text-muted);
  text-anchor: middle;
}

/* ============================================================
   Form (contact)
   ============================================================ */

.form { max-width: var(--measure); margin-top: 1.5em; }
.form-row { margin-bottom: 1.1rem; }
.form-row label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  font-weight: 500;
}
.form-row label .req { color: var(--accent); }

.input, .select, .textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65em 0.75em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }

/* Honeypot — hidden from humans, visible to bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Submit — solid coral fill, no gradient, no glow */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7em 1.5em;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  border-bottom: 1px solid var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: transparent; color: var(--accent); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Form status (success / error) */
.form-status {
  padding: 0.9em 1em;
  border-radius: 3px;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--line);
}
.form-status.ok { border-color: var(--ok); color: var(--ok); }
.form-status.err { border-color: var(--danger); color: var(--danger); }

/* ============================================================
   Signed CTA — the quiet closer
   A coral-underlined link with an arrow, not a pill button.
   ============================================================ */

.cta-signed {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: var(--measure);
}
.cta-signed .cta-line {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  font-weight: 500;
  margin-bottom: 0.6em;
  color: var(--text);
}
.cta-signed .cta-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
}
.cta-signed .cta-link:hover { color: var(--text); }

.signoff {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  color: var(--text-muted);
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* ============================================================
   Colophon (Ft1)
   Quiet signed footer. No 3-column link grid.
   ============================================================ */

.colophon {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
}
.colophon .container { max-width: var(--measure); text-align: center; }
.colophon .colophon-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  margin: 0 0 0.3em;
}
.colophon .colophon-tag {
  color: var(--text);
  margin: 0 0 1.2em;
}
.colophon .colophon-body {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 26rem;
  margin: 0 auto 1.5em;
  line-height: 1.55;
}
.colophon-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
  font-size: 0.85rem;
  margin-bottom: 1.75em;
}
.colophon-nav a {
  color: var(--text-muted);
  border-bottom: 0;
}
.colophon-nav a:hover { color: var(--text); border-bottom-color: var(--accent); }

.colophon-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  line-height: 1.7;
}
.colophon-meta span { display: block; }

/* ============================================================
   Utility
   ============================================================ */

.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.center { text-align: center; }
.hide { display: none; }

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

/* ============================================================
   Reduced motion
   ============================================================ */

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

/* ============================================================
   Print
   ============================================================ */

@media print {
  .masthead-nav, .cta-signed .cta-link { display: none; }
  body { background: var(--print-paper); color: var(--print-ink); }
  a { color: var(--print-ink); border-bottom: 0; }
}