/* edwardcallus.com — one stylesheet, no dependencies.
   No web fonts, no CDN, no analytics, no third-party request of any kind.
   That is deliberate: it is what lets the privacy notice say "this site sets
   no cookies and contacts no third party", and mean it. Do not add Google
   Fonts or an analytics snippet without rewriting privacy.html. */

:root {
  --paper:  #FBFAF8;
  --ink:    #1B1F23;
  --muted:  #5A6169;
  --accent: #2F4858;
  --rule:   #E3E0DA;
  --tint:   #F3F1ED;
  --measure: 34rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ink);
}

h1 { font-size: 2.125rem; margin: 0 0 .5rem; }
h2 { font-size: 1.4rem; margin: 2.75rem 0 .75rem; }
h3 { font-size: 1.0625rem; margin: 1.75rem 0 .35rem; font-weight: 600; }

p  { margin: 0 0 1.15rem; max-width: var(--measure); }
ul { max-width: var(--measure); padding-left: 1.1rem; }
li { margin-bottom: .5rem; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .5px; }
a:hover { text-decoration-thickness: 1.5px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--rule); padding: 1.5rem 0; }
.site-header .wrap {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
}
.wordmark {
  font-size: 1.1875rem; text-decoration: none; color: var(--ink); white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
nav ul { display: flex; flex-wrap: wrap; gap: 1.15rem; list-style: none; margin: 0; padding: 0; max-width: none; }
nav li { margin: 0; }
nav a {
  text-decoration: none; color: var(--muted); font-size: .9375rem;
  padding-bottom: 2px; border-bottom: 1.5px solid transparent;
}
nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- page body ---------- */
main { padding: 3.25rem 0 4rem; }
.lede { font-size: 1.1875rem; line-height: 1.6; color: var(--ink); max-width: var(--measure); }
.subtitle { color: var(--muted); font-size: 1.0625rem; margin: 0 0 2rem; max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: .9375rem; }

/* three trust signals on the home page */
.signals { display: grid; gap: 1.25rem; margin: 2.5rem 0; padding: 0; list-style: none; max-width: none; }
@media (min-width: 42rem) { .signals { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.signals li { margin: 0; padding-top: .9rem; border-top: 2px solid var(--accent); }
.signals strong { display: block; font-size: .9375rem; margin-bottom: .2rem; }
.signals span { color: var(--muted); font-size: .9375rem; line-height: 1.5; display: block; }

/* a quiet pointer box — used for "fees and appointments live on the studio's page" */
.pointer {
  background: var(--tint); border-left: 3px solid var(--accent);
  padding: 1.15rem 1.35rem; margin: 2.25rem 0; max-width: var(--measure);
}
.pointer p { margin: 0; }
.pointer p + p { margin-top: .6rem; }

/* definition-style rows: roles, education, memberships */
.rows { margin: 1.25rem 0 0; }
.row { padding: 1.1rem 0; border-top: 1px solid var(--rule); max-width: var(--measure); }
.row:last-child { border-bottom: 1px solid var(--rule); }
.row .what { font-weight: 600; }
.row .where, .row .when { color: var(--muted); font-size: .9375rem; }
.row p { margin: .25rem 0 0; }

/* publications */
.pubs { list-style: none; padding: 0; margin: 1.25rem 0 0; max-width: var(--measure); }
.pubs li { padding: 1rem 0; border-top: 1px solid var(--rule); margin: 0; }
.pubs li:last-child { border-bottom: 1px solid var(--rule); }
.pubs .title { display: block; }
.pubs .cite { display: block; color: var(--muted); font-size: .9375rem; margin-top: .2rem; }

.linklist { list-style: none; padding: 0; margin: 1rem 0 0; }
.linklist li { margin-bottom: .45rem; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule); margin-top: 3rem; padding: 2rem 0 2.75rem;
  color: var(--muted); font-size: .875rem;
}
.site-footer p { max-width: var(--measure); margin: 0 0 .4rem; }
.site-footer a { color: var(--muted); }

/* portrait photo — About page, floats beside the lede on wider screens */
.portrait {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 0 1.75rem;
  border: 1px solid var(--rule);
}
@media (min-width: 34rem) {
  .portrait { float: right; margin: .25rem 0 1.5rem 2rem; }
}

/* a build-time flag for placeholders Edward still owes. Visible on purpose:
   it must be impossible to publish the site with a gap still in it.
   Delete the .todo spans (and this rule) once the real values are in. */
.todo {
  background: #FFF3CD; border-bottom: 1px dashed #B7952B;
  padding: 0 .2em; font-style: normal;
}

@media (max-width: 34rem) {
  h1 { font-size: 1.75rem; }
  main { padding: 2.25rem 0 3rem; }
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
}