/* Golden Bison public site.
   Every colour comes from the brand spec (Company/08 Brand/00 Brand Spec.md)
   and is written once, here. Headings use EB Garamond, a free Garamond
   (SIL Open Font License, see fonts/OFL.txt) served from this site's own
   fonts folder, so every visitor sees the same letters and nothing is loaded
   from another company's servers. The brand fonts appear only in the logo.
   Body text uses the fonts already on the visitor's computer. */

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

:root {
  --brand-purple: #341C4C;
  --brand-gold: #C6933A;
  --brand-white: #FFFFFF;

  --text: #2A2233;
  --text-muted: #5E5669;
  --page: #FAF8F5;
  --rule: #E4DED6;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --serif-weight: 500;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 38rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

a { color: var(--brand-purple); text-underline-offset: 0.2em; }
a:hover { color: var(--brand-gold); }

:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--brand-white); color: var(--brand-purple); padding: 0.5rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* Logo: the designer's file is a 2000 x 2000 square with purple margin
   round the artwork. The page shows only the box around the artwork, so the
   file itself stays as she made it. Box in the file's own units: */
:root {
  --logo-file: 2000;
  --logo-box-x: 150;
  --logo-box-y: 551;
  --logo-box-w: 1700;
  --logo-box-h: 896;
}
.logo-crop {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: var(--logo-box-w) / var(--logo-box-h);
}
.logo-crop img {
  position: absolute; max-width: none; height: auto;
  width: calc(100% * var(--logo-file) / var(--logo-box-w));
  left: calc(-100% * var(--logo-box-x) / var(--logo-box-w));
  top: calc(-100% * var(--logo-box-y) / var(--logo-box-h));
}

/* Header: the purple band the primary logo was drawn for. */
.site-header { background: var(--brand-purple); }
.site-header .inner {
  max-width: 64rem; margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.site-header .home-link { display: block; line-height: 0; }
.site-header .home-link .logo-crop { height: 4rem; }

nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
nav a {
  color: var(--brand-white); text-decoration: none; font-size: 0.95rem;
  letter-spacing: 0.04em; padding: 0.25rem 0; border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--brand-white); border-bottom-color: var(--brand-gold); }
nav a[aria-current="page"] { border-bottom-color: var(--brand-gold); }

/* Home: the logo large, one line on what the firm does. */
.hero { background: var(--brand-purple); color: var(--brand-white); text-align: center; }
.hero .inner { max-width: 48rem; margin: 0 auto; padding: 3.5rem 1.25rem 4.5rem; }
.hero .logo-crop { width: min(26rem, 85%); margin: 0 auto; }
.hero p.lede {
  font-family: var(--serif); font-weight: var(--serif-weight); font-size: clamp(1.35rem, 3.2vw, 1.75rem); line-height: 1.35;
  margin: 2.25rem auto 0; max-width: 32rem;
}
.hero .rule { width: 4rem; height: 2px; background: var(--brand-gold); border: 0; margin: 2rem auto; }
.hero p.sub { margin: 0 auto; max-width: 30rem; color: #E6DFEC; }

.button {
  display: inline-block; margin-top: 2rem; padding: 0.75rem 1.75rem;
  background: var(--brand-gold); color: var(--brand-purple); font-weight: 600;
  text-decoration: none; border-radius: 3px;
}
.button:hover { background: var(--brand-white); color: var(--brand-purple); }

/* Inner pages */
.page { max-width: var(--measure); margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }
.page h1 {
  font-family: var(--serif); font-weight: var(--serif-weight); color: var(--brand-purple);
  font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.15; margin: 0 0 0.5rem;
}
.page .rule { width: 3rem; height: 2px; background: var(--brand-gold); border: 0; margin: 1.25rem 0 2rem; }
.page .credentials { color: var(--text-muted); letter-spacing: 0.06em; margin-top: 0; }
.page .email { font-family: var(--serif); font-weight: var(--serif-weight); font-size: 1.5rem; word-break: break-word; }

/* Home: the sections under the hero. */
.band { padding: 4rem 1.25rem; }
.band.alt { background: var(--brand-white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band .inner { max-width: 64rem; margin: 0 auto; }
.two-col { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 48rem) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }

.band h2, .page h2 {
  font-family: var(--serif); font-weight: var(--serif-weight); color: var(--brand-purple);
  font-size: clamp(1.6rem, 3.5vw, 2rem); line-height: 1.2; margin: 0;
}
.band .rule { width: 3rem; height: 2px; background: var(--brand-gold); border: 0; margin: 1.25rem 0 1.5rem; }
.band p { margin: 0 0 1rem; }

.card { background: var(--brand-white); border: 1px solid var(--rule); border-top: 3px solid var(--brand-gold); padding: 1.75rem 2rem; }
.card h3 {
  margin: 0 0 1rem; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
.roles { list-style: none; margin: 0; padding: 0; }
.roles li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-weight: var(--serif-weight); font-size: 1.2rem; color: var(--brand-purple); }
.roles li:last-child { border-bottom: 0; padding-bottom: 0; }

.audience { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.audience .button { margin-top: auto; }
.steps, .points { margin: 0.5rem 0 2rem; padding: 0; list-style: none; }
.steps { counter-reset: step; }
.steps li, .points li { position: relative; padding-left: 2.75rem; margin-bottom: 1.1rem; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--brand-purple); color: var(--brand-gold); font-weight: 600; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.points li::before {
  content: ""; position: absolute; left: 0.55rem; top: 0.65rem; width: 0.7rem; height: 2px; background: var(--brand-gold);
}
strong { color: var(--brand-purple); }
.band .button:hover { background: var(--brand-purple); color: var(--brand-white); }

/* About: the credentials list. */
.page h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }
.creds { margin: 0 0 2rem; display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1.25rem; }
.creds dt { font-weight: 600; color: var(--brand-purple); letter-spacing: 0.06em; }
.creds dd { margin: 0; }

/* Contact: the two notes under the address. */
.contact-notes { display: grid; gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
@media (min-width: 36rem) { .contact-notes { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.contact-notes h2 { font-size: 1.35rem; margin: 0 0 0.5rem; }
.contact-notes p { margin: 0; color: var(--text-muted); }

.site-footer { border-top: 1px solid var(--rule); color: var(--text-muted); font-size: 0.875rem; }
.site-footer .inner {
  max-width: 64rem; margin: 0 auto; padding: 1.5rem 1.25rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.site-footer a { color: var(--text-muted); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }

@media (max-width: 30rem) {
  .site-header .inner { justify-content: center; }
  .site-header .home-link .logo-crop { height: 3.5rem; }
  nav ul { gap: 1.25rem; }
}

/* Home has the big logo in the hero, so its header carries the menu only. */
.site-header .inner.nav-only { justify-content: flex-end; }
.hero h1.logo { margin: 0; }
@media (max-width: 30rem) { .site-header .inner.nav-only { justify-content: center; } }

/* Candidates: the roles list sits on the page, not in a card as on Home. */
.page .roles { margin: 0 0 2rem; }
/* The address under the Email your resume button, as plain text. */
.page .button-note { margin: 0.75rem 0 0; color: var(--text-muted); overflow-wrap: anywhere; }