/* W74 Properties — the production landing page.
 *
 * Concept 07 (landing.html, on plain.css + landing.css) cut down to the mark
 * the owner chose, Underlined, with the switch, the concept nav and the other
 * five marks gone. Copied rather than linked, because this folder is the
 * production project's Root Directory and nothing outside it is served there.
 * So it CAN drift from the concept: a change to the live site is made here.
 *
 * House palette only: the four colours from w74-brand-kit/shared/colors.json.
 */

:root {
  color-scheme: light;
  --paper: #F7F7F0;
  --ink: #171713;
  --guide: #90918D;
  --rule: #C9C9C2;
  --face: 'Charter', 'Iowan Old Style', Georgia, serif;
}

/* Charter (Matthew Carter, Bitstream). The licence is fonts/Charter-license.txt
 * and travels with it. Only the regular is used on this page. */
@font-face {
  font-family: 'Charter';
  src: url('fonts/Charter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face);
  font-size: 15px;
  line-height: 1.45;
}

a { color: inherit; text-decoration: none; }

.sheet {
  max-width: 1120px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr auto;
}

/* The stage takes all the height the footer leaves, the lockup centred in it. */
.stage {
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 48px 24px;
}

/* The Underlined mark, from reference/underlined_w.png: a bold lowercase w74,
 * a heavy rule that stops a little past it, and the tagline in Charter below
 * the rule. The w74 is set in the picture's neo-grotesque, not Charter. */
.lockup {
  margin: 0;
  max-width: 100%;
  text-align: left;
  font-size: clamp(17px, 3.4vw, 30px);
}
.lockup__name {
  display: inline-block;
  margin: 0;
  padding: 0 0.15em 0.3em 0;
  border-bottom: 0.14em solid var(--ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.1em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lockup__tagline {
  margin: 0.5em 0 0;
  font-size: 1em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}

footer {
  padding: 20px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--guide);
}
footer p { margin: 0; }
footer a { color: var(--ink); }
footer a:hover { text-decoration: underline; }

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

/* The W in the copyright line links to the Gravatos login, dressed as plain
 * text so the page shows no sign of it. Out-ranks `footer a` above. */
footer a.vault,
footer a.vault:hover {
  color: inherit;
  text-decoration: none;
  cursor: text;
}
footer a.vault:focus-visible { outline: 1px solid var(--guide); outline-offset: 2px; }

@media (max-width: 480px) {
  .stage { padding: 48px 16px 40px; }
  footer { padding: 18px 16px; }
}