/* ============================================================
   Emmanuelle Sirois — personal site
   One stylesheet shared by both languages (index.html & fr/).
   You should rarely need to touch this file.
   ============================================================ */

:root {
  --ink: #1c1b18;        /* main text */
  --soft: #6b6862;       /* secondary text */
  --accent: #7a2e2e;     /* deep madder red — years, links, toggle */
  --paper: #fdfdfb;      /* background */
  --rule: #e4e2dc;       /* hairlines */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 17px; }

body {
  font-family: "EB Garamond", Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  padding: 4.5rem 1.5rem 6rem;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 41rem; margin: 0 auto; }

/* ---- header ---- */

.lang {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
  margin-bottom: 3.5rem;
}
.lang a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.lang a:hover, .lang a:focus { border-bottom-color: var(--accent); }
.lang span { color: var(--soft); }

h1 {
  font-weight: 500;
  font-size: 2.3rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}

.role {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--soft);
  margin-bottom: 2.6rem;
}

.bio p { margin-bottom: 1rem; max-width: 36rem; }

/* ---- sections ---- */

section { margin-top: 3.4rem; }

h2 {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-bottom: 1.5rem;
}

/* An entry: a year hanging in the left margin, text on the right.
   To add one, copy a whole <div class="item"> block in the HTML. */
.item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0 1rem;
  margin-bottom: 1.05rem;
}

.year {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  color: var(--accent);
  padding-top: 0.22rem;
  letter-spacing: 0.03em;
}

.item .what { max-width: 34rem; }
.item .where { color: var(--soft); font-size: 0.95rem; }

.plain li { list-style: none; margin-bottom: 0.55rem; max-width: 36rem; }
.plain .where { color: var(--soft); font-size: 0.95rem; }

em, cite { font-style: italic; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
a:hover, a:focus { border-bottom-color: var(--accent); }

/* ---- footer ---- */

footer {
  margin-top: 4.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  font-size: 0.95rem;
  color: var(--soft);
}

/* ---- small screens: year moves above the entry ---- */
@media (max-width: 540px) {
  body { padding-top: 2.5rem; }
  .item { grid-template-columns: 1fr; }
  .year { padding-top: 0; margin-bottom: 0.1rem; }
  h1 { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- sub-pages & "more" links ---- */

.crumb {
  display: flex;
  justify-content: space-between;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 3.5rem;
}
.crumb span { color: var(--soft); }

.page-title {
  font-weight: 500;
  font-size: 1.7rem;
  margin-bottom: 2.2rem;
}

.more {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- two-line role under the name ---- */
.role { margin-bottom: 0.15rem; }
.role-sub {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 2.6rem;
}

/* ---- location line under the title block ---- */
.role-sub { margin-bottom: 0.55rem; }
.location {
  font-size: 0.98rem;
  font-style: italic;
  color: var(--soft);
  margin-bottom: 2.6rem;
}

/* ---- abstract light figure ---- */
.light { margin: 3rem 0 0.5rem; }
.light img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* ---- photo bands ---- */
.light.sub { margin: 0 0 2.6rem; }
.light.sub img { height: 105px; }

/* ---- extra breathing room after the title block ---- */
.role-sub { margin-bottom: 3.2rem; }

/* ---- numbered research projects in the bio ---- */
.axes { margin: 1.1rem 0 1.3rem; }
.axes .item { margin-bottom: 0.7rem; }
.axes .year { letter-spacing: 0.12em; }

/* ---- interests as a dotted, scannable line ---- */
.interests { line-height: 1.9; }

/* ---- contact form ---- */
.cform { max-width: 30rem; margin-top: 0.5rem; }
.cform label {
  display: block;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 1.4rem 0 0.4rem;
}
.cform input, .cform textarea {
  width: 100%;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0.35rem 0;
}
.cform textarea { min-height: 9rem; resize: vertical; }
.cform input:focus, .cform textarea:focus { outline: none; border-bottom-color: var(--accent); }
.cform button {
  margin-top: 1.8rem;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  border: none;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
}
.cform button:hover { opacity: 0.9; }
.hidden-field { display: none; }