/* Brand colors — AMindOfMyOwn_Color_Guide v1.0 §2 (approved dark theme).
   The gradient belongs to the wordmark only. */
:root{
  --navy:#14203A; --deep:#0F1930; --track:#1F2E50; --border:#2F416B;
  --soft:#EDF1F8; --muted:#AFBAD2;
  --cyan:#00C8FF;
}
*{box-sizing:border-box}
/* Nav, content and footer stack in normal flow, so none can cover another
   on a short or narrow screen; the content takes the free height between. */
body{
  min-height:100vh;
  margin:0; background:var(--navy); color:var(--muted);
  font:400 16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
.page{width:100%;max-width:1088px;text-align:center;margin:auto;padding:40px 24px 56px}

.wordmark{display:block;width:100%;height:auto;margin:0 auto}

.tagline{
  margin:24px 0 0; font-size:20px; font-weight:500;
  letter-spacing:.30em; text-transform:uppercase; color:var(--soft);
}

.intent{
  margin:56px auto 0;
  font-size:22px; color:var(--muted);
  text-align:justify; text-justify:inter-word;
}
/* The ownership line stands alone; a short justified line stretches badly,
   so it is centered rather than flush. */
.intent + .intent{margin-top:46px;text-align:center;color:var(--soft)}

.progress{margin-top:56px}

/* A still bar so it never pulls the eye from the text: a deep-navy track set
   into the page by a Border Navy rim, filled in plain white. Square corners,
   the owner's choice (web 3.15). */
.bar{
  position:relative; height:56px; overflow:hidden;
  background:var(--track);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.22);
}
/* Elapsed time, in whole half-years: the fill holds at one of ten positions
   until the next half-year boundary. */
.fill{
  position:absolute; top:0; bottom:0; left:0; width:0;
  /* White drawn as an image: a browser's forced dark mode (Chrome's "Auto
     Dark Mode for Web Contents") turns a white background colour, gradient or
     shadow black, but leaves images alone. */
  background:url("fill.svg") 0 0 / 100% 100%;
}
.ends{
  display:flex; justify-content:space-between; margin-top:12px;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--border);
}
.status{
  margin:10px 0 0; font-size:16px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
.topnav{
  padding:22px 26px 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.topnav a{
  font-size:16px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:#FFFFFF; text-decoration:none;
  padding-bottom:4px; border-bottom:1.5px solid transparent;
  transition:border-color .15s ease;
}
.topnav a:hover,.topnav a:focus-visible{border-bottom-color:var(--cyan)}

/* Footer: company line at the left, contact address in the centre, both in
   white at a readable size so they stand out against the navy. The empty
   third column balances the first so the address sits on the page's axis. */
.footer{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:24px;
  padding:0 26px 20px;
  font-size:15px; letter-spacing:.12em; color:#FFFFFF;
}
.footer p{margin:0}
.legal sup{font-size:10px; vertical-align:super}
.contact a{
  font-size:18px; color:#FFFFFF; text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.contact a:hover,.contact a:focus-visible{border-bottom-color:var(--cyan)}

/* Below 860px the company line would crowd the centred address, so the two
   stack in the centre instead. */
@media (max-width:860px){
  .footer{grid-template-columns:1fr; gap:6px; text-align:center}
}
@media (max-width:600px){
  .footer{font-size:13px;padding:0 16px 14px}
  .contact a{font-size:16px}
  .topnav{padding:16px 16px 0}
  .page{padding:32px 16px 40px}
  .topnav a{font-size:13px;letter-spacing:.1em}
  .bar{height:38px}
  .status{font-size:13px;letter-spacing:.2em}
  .tagline{font-size:14px;letter-spacing:.22em}
  .progress{margin-top:40px}
  .intent{font-size:18px;margin-top:34px;text-align:left}
}