/*
 * Harborline public construction page.
 *
 * PALETTE: the brand palette is not final (brand kit v1, November 2026). Slate is the
 * current working default. To switch, replace the six values in :root with another
 * kit palette (brand/kit/<palette>/tokens/tokens.css on the brand branch):
 *
 *   Slate (current) bg #F5F7F9  line #D3DBE4  ink #1F2B3D  text #2E3A4C  primary #3A5A80  rule #D2552F
 *   Tidewater       bg #F8F5EE  line #E0D5C1  ink #173B3C  text #2A4446  primary #2C6E66  rule #2C6E66
 *   Warm Slate      bg #F7F4EE  line #DDD5C9  ink #243140  text #333D49  primary #3E5873  rule #8593A1
 *
 * The logo is inline in index.html and takes its colors from these variables
 * (.c-ink, .c-primary, .c-rule). Also update theme-color in index.html, and the
 * favicon files, which are the kit's Slate icons.
 */
:root {
  --bg: #F5F7F9;
  --line: #D3DBE4;
  --ink: #1F2B3D;
  --text: #2E3A4C;
  --primary: #3A5A80;
  --rule: #D2552F;
}

@font-face {
  font-family: 'Public Sans';
  src: url('/assets/public-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html, body { height: 100%; margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1 { margin: 0; line-height: 0; }

.logo {
  display: block;
  width: clamp(180px, min(46vw, 48vh), 320px);
  height: auto;
}
.logo .c-ink { fill: var(--ink); }
.logo .c-primary { fill: var(--primary); }
.logo .c-rule { fill: var(--rule); }

p {
  margin: clamp(28px, 5vw, 40px) 0 0;
  padding-top: clamp(20px, 3.5vw, 28px);
  border-top: 1px solid var(--line);
  min-width: min(100%, 15rem);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.1875rem);
  font-weight: 450;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* Two restrained horizontal rules, offset like the symbol's. Decorative only. */
.lines { position: fixed; inset: 0; pointer-events: none; }
.line { position: absolute; height: 1px; background: var(--line); }
.line::after { content: ''; position: absolute; top: -0.5px; width: 56px; height: 2px; background: var(--rule); opacity: 0.85; }
.line-a { top: 14vh; left: 0; width: 38vw; }
.line-a::after { right: 0; }
.line-b { bottom: 14vh; right: 0; width: 38vw; }
.line-b::after { left: 0; }

@media (max-width: 480px) {
  .line-a, .line-b { width: 30vw; }
  .line::after { width: 32px; }
}

@media (max-height: 560px) {
  .lines { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  main { animation: rise 700ms ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

@media (forced-colors: active) {
  .logo .c-ink, .logo .c-primary, .logo .c-rule { fill: CanvasText; }
  .line, .line::after { background: CanvasText; }
}