/* mckennaworks.com. Colors, type, and layout from docs/marketing/brand.md (sections 4, 5, 7).
   Sizes are in rem (1rem = 16px at the browser's normal text size) so the page grows
   when a visitor makes text larger. */

@font-face {
  font-family: 'Cinzel';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url(fonts/cinzel-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-700-normal.woff2) format('woff2');
}

:root {
  --works-green: #1E4D38;  /* the band, in light and dark */
  --page: #FFFFFF;
  --ink: #16201B;
  --soft: #4B5A52;
  --panel: #E9F1EC;        /* Green Tint */
  --accent: #1E4D38;       /* headings, labels, links, ornaments */
  --head: 'Cinzel', Georgia, serif;
  --body: 'EB Garamond', Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #101814;       /* Night */
    --ink: #EEF3EF;        /* Night Ink */
    --soft: #A9B8AF;       /* Night Soft */
    --panel: #18231D;      /* Night Panel */
    --accent: #8FD1AF;     /* Night Green */
  }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.25rem;       /* 20px */
  line-height: 1.5;
}

/* The green band with the white wordmark. Same green in light and dark. */
.band {
  background: var(--works-green);
  padding: 2.125rem 1rem;   /* at least 32px of green above and below */
}
.band h1 { margin: 0; }
.band img {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

main, footer {
  max-width: 34em;          /* about 680px at normal text size */
  margin: 0 auto;
  padding: 0 1rem;
}

p { margin: 0.625rem 0 0; }

.lead {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.4375rem;     /* 23px */
  line-height: 1.3;
  text-align: center;
  margin-top: 1.625rem;
}
.lead + .lead { margin-top: 0.5rem; }

/* Section labels, English and Spanish alike, each with one small diamond before it. */
h2 {
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.875rem;      /* 14px */
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.125rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.8em;
}
h2::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
  transform: rotate(45deg);
}

/* Each app in a Green Tint panel, square corners, no border. */
.app {
  margin-top: 0.875rem;
  padding: 1rem 1.125rem;
  background: var(--panel);
}
.app h3 {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.0625rem;     /* 17px */
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}
.app p { margin-top: 0.375rem; }

.small {
  font-size: 1.03125rem;    /* 16.5px */
  color: var(--soft);
}

a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* The bottom of the page: three small diamonds, then the small print. */
footer {
  text-align: center;
  font-size: 1.03125rem;    /* 16.5px */
  color: var(--soft);
  padding-bottom: 2.5rem;
}
footer p { margin-top: 0.25rem; }
.ornament {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 2.25rem 0 0.875rem;
}
.ornament span {
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}