/* Joseph England — e-portfolio stylesheet.
   Every visual decision on the site traces back to the :root block below.
   To redesign, edit :root and nothing else. */

/* 1. Design tokens ------------------------------------------------------- */

:root {
  /* Colours */
  --color-bg: #faf8f4;             /* page background: an off-white, easier on the eyes than pure white */
  --color-ink: #20242b;            /* body text (contrast on background: 14.7:1) */
  --color-muted: #5a6270;          /* dates, prompts, footer (5.8:1 on background) */
  --color-accent: #176a52;         /* links, current-page marker (6.2:1) */

  /* Typefaces. Two roles. See assets/fonts/README.md to self-host the
     intended faces; until then these system stacks match their character. */
  --font-body: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-heading: system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Type scale: base 1.0625rem (17px), ratio 1.333 (a perfect fourth).
     Each size is the previous one multiplied by 1.333, widened from the
     former 1.25 ratio so the three heading levels read as clearly distinct
     sizes rather than close variations of each other. */
  --size-small: 0.797rem; /* base ÷ 1.333 */
  --size-body: 1.0625rem; /* base */
  --size-h3: 1.416rem;    /* base × 1.333 */
  --size-h2: 1.888rem;    /* base × 1.333² */
  --size-h1: 2.517rem;    /* base × 1.333³ */

  /* Spacing steps and text measure */
  --space-1: 0.5rem; /* within an entry or list */
  --space-2: 1rem;   /* between elements in a section */
  --space-3: 2.5rem; /* between sections */
  --space-4: 4rem;   /* page top and bottom, footer gap */
  --measure: 66ch;   /* text column width, roughly 60–70 characters */
}

/* Self-hosted fonts, deliberately commented out. Follow the instructions in
   assets/fonts/README.md, then remove the comment markers around this block
   and put "Source Serif 4" and "Source Sans 3" first in the two font-family
   lines above.

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
*/

/* 2. Reset ---------------------------------------------------------------- */

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

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 3. Base typography ------------------------------------------------------ */

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  font-size: var(--size-h1);
}

h2 {
  font-size: var(--size-h2);
}

h3 {
  font-size: var(--size-h3);
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.15em;
}

code {
  font-size: 0.9em;
}

/* 4. Layout --------------------------------------------------------------- */

body {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-3) var(--space-2) var(--space-4);
}

header {
  margin-bottom: var(--space-4);
}

.site-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--size-h3);
  margin-bottom: var(--space-2);
}

.site-name a {
  color: var(--color-ink);
  text-decoration: none;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

nav a {
  font-family: var(--font-heading);
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: 2px;
}

/* Current page. The nav markup is identical on every page, so the marker
   comes from the body's data-page attribute; post pages mark Blog. The
   selectors match the end of each address rather than the whole of it,
   because a link reads "goals.html" from a top-level page and
   "../goals.html" from a post. */
body[data-page="home"] nav a[href$="index.html"],
body[data-page="goals"] nav a[href$="goals.html"],
body[data-page="academics"] nav a[href$="academics.html"],
body[data-page="activities"] nav a[href$="activities.html"],
body[data-page="professional"] nav a[href$="professional.html"],
body[data-page="blog"] nav a[href$="blog.html"],
body[data-page="post"] nav a[href$="blog.html"] {
  border-bottom: 2px solid var(--color-accent);
}

main > * + * {
  margin-top: var(--space-3);
}

section > * + *,
article > * + * {
  margin-top: var(--space-2);
}

footer {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-muted);
  color: var(--color-muted);
  font-size: var(--size-small);
}

/* 5. Components ----------------------------------------------------------- */

.three-words > * + * {
  margin-top: var(--space-2);
}

figcaption {
  margin-top: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--size-small);
  color: var(--color-muted);
}

/* Overrides "article > * + *" above for the tighter gap between an
   entry's own lines (title, org, meta, description); the class selector
   outweighs the element selector, so this wins without touching that
   rule, which still spaces sibling entries apart. */
.entry > * + * {
  margin-top: var(--space-1);
}

.entry-title {
  font-family: var(--font-heading);
  font-weight: 600;
}

.entry-org {
  color: var(--color-muted);
}

.entry-meta {
  font-family: var(--font-heading);
  font-size: var(--size-small);
  color: var(--color-muted);
}

.post-list {
  list-style: none;
  padding: 0;
}

.post-list li + li {
  margin-top: var(--space-2);
}

.post-list time,
.post-meta time {
  font-family: var(--font-heading);
  font-size: var(--size-small);
  color: var(--color-muted);
}

/* Grouping. The site spaces things in two steps: --space-1 for lines that
   belong to one thing, --space-2 for separate things inside a section.
   The generic "section > * + *" rule above cannot tell the difference, so
   it gives everything the larger step, which leaves a subheading sitting
   as far from its own text as from the text above it. The rules below
   restore the distinction in the four places it goes wrong. Each is the
   same idea as .entry: closer within, further between. */

/* A subheading belongs to what follows it, not to what precedes it. */
section > h3 + *,
section > h4 + * {
  margin-top: var(--space-1);
}

/* A lead-in ending in a colon belongs to the list it introduces. */
section > p + ul {
  margin-top: var(--space-1);
}

/* A list item long enough to carry a description paragraph is an entry,
   not a one-line bullet, so it takes both steps. Plain lists, such as the
   community-college courses, stay tight because nothing separates their
   lines. */
main li > p {
  margin-top: var(--space-1);
}

main li:has(p) + li {
  margin-top: var(--space-2);
}

/* A post's date belongs to its title, exactly as .entry-meta does. */
.post-meta {
  margin-top: var(--space-1);
}

/* 6. Utility and accessibility -------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-bg);
  padding: var(--space-1) var(--space-2);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}