/* ============================================================
   Humanities Innovation Lab
   University of Lethbridge

   Rebuilt to match the Wix site it replaces. Every value below was
   measured off the live site: black ground, white Raleway 40px section
   headings (underlined where they linked), Avenir Light 15px/1.875 body
   copy, #1f1f1f panels, white cards, 980px content column.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  --bg: #000000;
  --panel: #1f1f1f;          /* ABOUT panel, project caption bars */

  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --rule: rgba(255, 255, 255, 0.32);

  --card-bg: #ffffff;
  --card-text: #16181a;
  --card-muted: #5b6066;
  --card-rule: #e6e6e6;

  /* Wix used Raleway for display and Avenir LT 35 Light for body copy.
     Avenir is not freely licensed; Nunito Sans at 300 stands in for it. */
  --font-head: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Nunito Sans', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --content: 980px;
  --prose-w: 720px;

  --h-sec: clamp(1.9rem, 4.4vw, 2.5rem);   /* 40px section headings */
  --h-name: clamp(1.15rem, 2vw, 1.375rem); /* 22px member names */
  --body: 0.9375rem;                       /* 15px */
  --lh: 1.875;                             /* 28.125px on 15px */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   RESET
   ============================================================ */

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

html { font-size: 16px; scroll-behavior: smooth; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--body);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* The blog filter toggles the `hidden` attribute. Components below set
   `display: flex`, which would otherwise beat the UA stylesheet's
   `[hidden] { display: none }` and leave hidden cards visible. */
[hidden] { display: none !important; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; color: #000; padding: 0.75rem 1.25rem; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: normal;
}

p { margin-bottom: 1.05rem; }
p:last-child { margin-bottom: 0; }

/* Section headings: Raleway 40px, centred. Those that were links on the
   Wix site keep their underline. */
.sec-title {
  font-size: var(--h-sec);
  text-align: center;
  margin-bottom: 2.5rem;
}
.sec-title a,
.sec-title--underline { text-decoration: underline; text-underline-offset: 0.12em; }
.sec-title a:hover { opacity: 0.72; }

/* ============================================================
   LAYOUT
   ============================================================ */

.wrap { width: min(var(--content), calc(100% - 2.5rem)); margin: 0 auto; }
.wrap--prose { width: min(var(--prose-w), calc(100% - 2.5rem)); }

.section { padding: 4.5rem 0; }
.section--flush-top { padding-top: 2.5rem; }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */

.nav { background: var(--bg); padding: 1.75rem 0 0; }
.nav__inner { width: min(var(--content), calc(100% - 2.5rem)); margin: 0 auto; }

.nav__logo { display: inline-block; }
.nav__logo img { width: 315px; max-width: 78vw; height: auto; }

.nav__rule { border: 0; border-top: 1px solid var(--rule); margin: 0.75rem 0 0; }

.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0 1.25rem; }

.nav__links { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

.nav__links a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--text);
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease);
  white-space: nowrap;
}
.nav__links a:hover { opacity: 0.7; }
.nav__links a.is-current { border-bottom-color: var(--text); }

.nav__toggle { display: none; width: 28px; height: 20px; flex-direction: column; justify-content: space-between; }
.nav__toggle span { display: block; height: 1px; background: var(--text); }

@media (max-width: 760px) {
  .nav__toggle { display: flex; }
  .nav__links { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0; }
  .nav__links.open { display: flex; }
  .nav__links a { width: 100%; padding: 0.7rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .nav__bar { flex-wrap: wrap; }
}

/* ============================================================
   ABOUT SPLIT (home) — #1f1f1f panel beside a flush image
   ============================================================ */

.about-split { display: grid; grid-template-columns: 0.88fr 1fr; min-height: 470px; }

.about-split__panel {
  background: var(--panel);
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.about-split__panel h2 { font-size: var(--h-sec); margin-bottom: 1.5rem; }
.about-split__panel p { color: var(--text); }

.about-split__media { overflow: hidden; }
.about-split__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 800px) {
  .about-split { grid-template-columns: 1fr; min-height: 0; }
  .about-split__panel { padding: 2.75rem 1.75rem; }
  .about-split__media img { height: 320px; }
}

/* ============================================================
   POST CARDS — white cards on black
   ============================================================ */

.postcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; }

.postcard {
  background: var(--card-bg);
  color: var(--card-text);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease);
}
.postcard:hover { transform: translateY(-3px); }
.postcard > a { display: flex; flex-direction: column; height: 100%; }

.postcard__thumb { overflow: hidden; }
.postcard__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.postcard__body { padding: 1.35rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }

.postcard__byline { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.postcard__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: #eee; }
.postcard__who { font-size: 0.8125rem; line-height: 1.45; color: var(--card-muted); }
.postcard__who strong { display: block; font-weight: 400; color: var(--card-text); }

.postcard__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--card-text);
  margin-bottom: 0.7rem;
}
.postcard__excerpt { font-size: 0.9375rem; line-height: 1.65; color: var(--card-muted); }

.view-all { text-align: center; margin-top: 2.75rem; }

/* ============================================================
   LAB MEMBERS
   ============================================================ */

/* Co-directors: 287x486 portrait beside a centred text block, two per row. */
.directors { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 3rem; margin-bottom: 4rem; }

.director { display: grid; grid-template-columns: 287px 1fr; gap: 1.75rem; align-items: center; }
.director__photo { width: 100%; aspect-ratio: 287 / 486; object-fit: cover; }
.director__text { text-align: center; }
/* Wix set the two co-director names in caps here. */
.director__name { font-size: var(--h-name); text-transform: uppercase; margin-bottom: 1.4rem; }
.director__role { color: var(--text); margin-bottom: 1.4rem; }
.director__more { text-decoration: underline; text-underline-offset: 0.15em; }
.director__more:hover { opacity: 0.7; }

@media (max-width: 900px) {
  .directors { grid-template-columns: 1fr; }
  .director { grid-template-columns: 200px 1fr; gap: 1.25rem; }
}
@media (max-width: 520px) {
  .director { grid-template-columns: 1fr; }
  .director__photo { max-width: 240px; margin: 0 auto; }
}

/* Everyone else: 210px circular avatars, four per row, last row centred. */
.avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.75rem 2.375rem;
}

.avatar { width: 210px; text-align: center; }
.avatar__photo {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.5rem;
}
.avatar__name { font-size: var(--h-name); line-height: 1.3; margin-bottom: 0.35rem; }
.avatar__name a { text-decoration: underline; text-underline-offset: 0.15em; }
.avatar__name a:hover { opacity: 0.7; }
.avatar__role { color: var(--text); line-height: 1.6; }

@media (max-width: 520px) {
  .avatars { gap: 2.25rem 1.5rem; }
  .avatar, .avatar__photo { width: 150px; }
  .avatar__photo { height: 150px; }
}

/* ============================================================
   PROJECT CARDS — image with a dark caption bar
   ============================================================ */

.projcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.25rem; }

.projcard { background: var(--panel); transition: transform 0.25s var(--ease); }
.projcard:hover { transform: translateY(-3px); }
.projcard img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.projcard__cap { padding: 1rem 1.1rem; text-align: center; color: var(--text); }

/* ============================================================
   LAND ACKNOWLEDGEMENT
   ============================================================ */

.land { padding: 4rem 0 3rem; }
.land__inner { width: min(1050px, calc(100% - 2.5rem)); margin: 0 auto; text-align: center; }
.land h2 { font-size: var(--h-sec); margin-bottom: 1.25rem; }
.land p { color: var(--text); }

/* ============================================================
   INTERIOR PAGE HEADER
   ============================================================ */

.phead { padding: 2.5rem 0 2rem; }
.phead h1 { font-size: var(--h-sec); }
.phead__sub { color: var(--muted); margin-top: 0.6rem; }

/* ============================================================
   BIOS (About us) — text and photo alternating sides
   ============================================================ */

.bio { display: grid; grid-template-columns: 1fr 390px; gap: 3rem; align-items: start; }
.bio + .bio { margin-top: 4.5rem; }

.bio__photo { width: 100%; aspect-ratio: 390 / 512; object-fit: cover; }

/* On flipped rows the photo moves to the left. `order` alone would only move it
   into the *other* grid cell, handing it the wide 1fr column and squeezing the
   text into 390px, so the track sizes are swapped to match. */
.bio--flip { grid-template-columns: 390px 1fr; }
.bio--flip .bio__text { order: 2; }
.bio--flip .bio__media { order: 1; }

/* Justified prose, with hyphenation so the extra word spacing stays even. */
.bio__body { text-align: justify; hyphens: auto; }

/* Wix set most (not all) of these headings in caps; normalised to caps so the
   page reads consistently rather than reproducing the authoring drift. */
.bio__name { font-size: var(--h-sec); text-transform: uppercase; margin-bottom: 0.9rem; }
.bio__role { color: var(--muted); margin-bottom: 1.1rem; }
.bio__body a { text-decoration: underline; text-underline-offset: 0.15em; }
.bio__body a:hover { opacity: 0.7; }
.bio__body ul { margin: 0.4rem 0 1.05rem 0; }
.bio__body li { padding-left: 1.1rem; position: relative; }
.bio__body li::before { content: "•"; position: absolute; left: 0.15rem; }
.bio__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.4rem; }
.bio__links a { text-decoration: underline; text-underline-offset: 0.15em; }
.bio__links a:hover { opacity: 0.7; }

/* Alumni: a two-sentence bio doesn't need a full-height portrait beside it,
   so the photo column narrows and the vertical rhythm tightens. */
.alumni { padding-top: 0; }
.bio--alum { grid-template-columns: 1fr 240px; gap: 2.5rem; align-items: center; }
.bio--alum + .bio--alum { margin-top: 3rem; }
.bio--alum.bio--flip { grid-template-columns: 240px 1fr; }
.bio--alum .bio__photo { aspect-ratio: 240 / 300; }
.bio--alum .bio__name { font-size: var(--h-name); }

@media (max-width: 860px) {
  .bio--alum, .bio--alum.bio--flip { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .bio--alum .bio__photo { max-width: 240px; }
}

@media (max-width: 860px) {
  .bio, .bio--flip { grid-template-columns: 1fr; gap: 1.75rem; }
  .bio--flip .bio__text, .bio--flip .bio__media { order: initial; }
  .bio__photo { max-width: 340px; }
}

/* ============================================================
   SIMPLE LISTS (publications, events, resources)
   ============================================================ */

.plist { }
.pitem { padding: 1.6rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.pitem:first-child { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pitem__links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 0.75rem; }
.pitem__links a, .pitem a.u { text-decoration: underline; text-underline-offset: 0.15em; }
.pitem__links a:hover { opacity: 0.7; }
.pitem__meta { color: var(--muted); }
.pitem__title { font-family: var(--font-head); font-size: 1.25rem; margin-bottom: 0.4rem; }
.pitem__status { color: var(--muted); font-style: italic; margin-top: 0.35rem; }

/* ============================================================
   EVENTS BY YEAR (collapsible groups under the calendar)
   ============================================================ */

.evyear { border-top: 1px solid var(--rule); }
.evyear:last-of-type { border-bottom: 1px solid var(--rule); }

.evyear__summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
}
.evyear__summary::-webkit-details-marker { display: none; }
.evyear__summary:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.evyear__summary:hover .evyear__year { opacity: 0.7; }

.evyear__year {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-head); font-size: 1.375rem;
}
/* Chevron: a bare corner of two borders, rotated. Right when shut, down when open. */
.evyear__year::before {
  content: ""; width: 0.46rem; height: 0.46rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transform-origin: center;
  transition: transform 0.2s ease; flex: none;
}
.evyear[open] .evyear__year::before { transform: rotate(45deg); }

.evyear__count { color: var(--muted); font-size: 0.875rem; }

.evyear__body { padding-bottom: 0.75rem; }
/* The group’s own rules already fence the list, so drop the outer item borders. */
.evyear__body .pitem:first-child { border-top: none; }
.evyear__body .pitem:last-child { border-bottom: none; }

@media (prefers-reduced-motion: reduce) {
  .evyear__year::before { transition: none; }
}

/* ============================================================
   EVENTS CALENDAR
   ============================================================ */

.cal { margin-bottom: 3.5rem; }

.cal__bar { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.cal__month { font-size: 1.5rem; min-width: 12ch; text-align: center; }
.cal__nav {
  width: 40px; height: 40px;
  border: 1px solid var(--rule);
  color: var(--text);
  font-size: 1rem;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cal__nav:hover { background: var(--panel); border-color: var(--text); }

.cal__caption { position: absolute; left: -9999px; }

.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__grid th {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 0.65rem;
}
.cal__grid th abbr { text-decoration: none; }
.cal__grid td { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0; height: 76px; vertical-align: top; }
.cal__pad { background: rgba(255, 255, 255, 0.02); }

.cal__day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.6rem;
  color: var(--muted);
  text-align: left;
}
.cal__num { font-size: 0.875rem; line-height: 1; }

.cal__day--has { color: var(--text); cursor: pointer; transition: background 0.2s var(--ease); }
.cal__day--has:hover { background: var(--panel); }
.cal__day--has .cal__num { font-weight: 400; }
.cal__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.cal__day--on { background: var(--text); color: var(--bg); }
.cal__day--on .cal__dot { background: var(--bg); }

.cal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.cal__hint { color: var(--muted); font-size: 0.875rem; }
.cal__ics { font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.15em; }
.cal__ics:hover { opacity: 0.7; }

.evlist-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.evlist-head .rgroup__title { margin-bottom: 1.25rem; }

@media (max-width: 620px) {
  .cal__grid td { height: 56px; }
  .cal__day { padding: 0.35rem 0.4rem; }
  .cal__num { font-size: 0.78rem; }
}

.rgroup + .rgroup { margin-top: 3rem; }
.rgroup__title { font-size: 1.375rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.res { background: var(--panel); padding: 1.4rem; display: flex; flex-direction: column; }
.res__name { font-family: var(--font-head); font-size: 1.125rem; margin-bottom: 0.4rem; }
.res__desc { color: var(--muted); margin-bottom: 1.1rem; }
.res__link { margin-top: auto; text-decoration: underline; text-underline-offset: 0.15em; }
.res__link:hover { opacity: 0.7; }

/* ============================================================
   BLOG INDEX FILTER
   ============================================================ */

.blog-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.25rem; }
.blog-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.blog-chip {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--rule);
  color: var(--text);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.blog-chip:hover { border-color: var(--text); }
.blog-chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }

.blog-count { color: var(--muted); font-size: 0.875rem; }
.blog-empty { text-align: center; color: var(--muted); padding: 3rem 0; }

/* ============================================================
   POST (single)
   ============================================================ */

.post__head { padding: 2.5rem 0 1.25rem; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; color: var(--muted); font-size: 0.875rem; margin-bottom: 0.9rem; }
.post__tag { border: 1px solid var(--rule); padding: 0.1rem 0.6rem; }
.post__title { font-size: clamp(1.7rem, 3.6vw, 2.35rem); line-height: 1.28; }
.post__author { color: var(--muted); margin-top: 0.7rem; }
/* Post photographs sit at the foot of the post. A single one runs full width;
   several share a row rather than stacking. */
.post__figures { display: grid; gap: 1.5rem; margin: 2.5rem 0 0; }
.post__figures--1 { grid-template-columns: 1fr; }
.post__figures--2 { grid-template-columns: 1fr 1fr; }
.post__figures--many { grid-template-columns: repeat(3, 1fr); }
.post__figures figure { margin: 0; }
.post__figures img { width: 100%; object-fit: cover; display: block; }
/* A lone photograph keeps its own proportions at its own size, capped in height.
   Without the cap a 780x1024 portrait runs 945px down a 720px column; without
   `width: auto` a 420px head crop is stretched to 720 and goes soft. */
.post__figures--1 img {
  width: auto; max-width: 100%; max-height: 620px;
  margin-inline: auto; object-fit: contain;
}
.post__figures--2 img, .post__figures--many img { aspect-ratio: 1 / 1; }
.post__figures figcaption { color: var(--muted); margin-top: 0.5rem; text-align: center; }
@media (max-width: 560px) {
  .post__figures--2, .post__figures--many { grid-template-columns: 1fr; }
}

.prose { font-size: 1rem; line-height: 1.85; color: var(--text); }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-head); margin: 2.25rem 0 0.9rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose p { margin-bottom: 1.25rem; }
.prose a { text-decoration: underline; text-underline-offset: 0.15em; }
.prose a:hover { opacity: 0.72; }
.prose img { margin: 1.75rem auto; }
.prose ul, .prose ol { margin: 0 0 1.25rem 1.3rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4rem; }
.prose blockquote { border-left: 2px solid var(--rule); padding: 0.6rem 1.25rem; margin: 1.6rem 0; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); margin: 2.25rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 0.9375rem; }
.prose th, .prose td { border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.6rem 0.8rem; text-align: left; }
.prose code { background: var(--panel); padding: 0.15em 0.4em; font-size: 0.9em; }
.prose pre { background: var(--panel); padding: 1rem 1.2rem; overflow-x: auto; margin: 1.6rem 0; }
.prose pre code { background: none; padding: 0; }
.prose iframe { max-width: 100%; margin: 1.6rem 0; }

.post__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 3.5rem 0 1.75rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.post__nav-link span { display: block; color: var(--muted); font-size: 0.8125rem; margin-bottom: 0.3rem; }
.post__nav-link:hover { opacity: 0.72; }
.post__nav-link--next { text-align: right; grid-column: 2; }
.post__back { margin-bottom: 3.5rem; text-decoration: underline; text-underline-offset: 0.15em; }

@media (max-width: 620px) {
  .post__nav { grid-template-columns: 1fr; }
  .post__nav-link--next { text-align: left; grid-column: 1; }
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.contact-block h2 { font-size: 1.375rem; margin-bottom: 1rem; }
.contact-block a { text-decoration: underline; text-underline-offset: 0.15em; }
.contact-list { display: grid; gap: 0.5rem; }
.contact-note { color: var(--muted); font-size: 0.875rem; margin-top: 1rem; }

/* OpenStreetMap's tiles are light, so the map sits in a white mat — the same
   card idiom the rest of the site uses for light content on the black ground.
   Leaflet, rather than OSM's own iframe embed, because the embed renders at a
   fixed size off the bbox and will not fill a responsive box. */
.contact-map { margin-top: 4rem; }
.contact-map__frame { background: var(--card-bg); border: 1px solid var(--card-rule); padding: 0.5rem; }
.contact-map__canvas { height: clamp(320px, 44vw, 470px); background: #eef0f2; }
.contact-map__fallback { display: grid; place-content: center; height: 100%; color: var(--card-text); }
.contact-map__fallback a { text-decoration: underline; text-underline-offset: 0.15em; }
.contact-map figcaption { color: var(--muted); font-size: 0.8125rem; line-height: 1.7; margin-top: 1rem; }
.contact-map figcaption a { text-decoration: underline; text-underline-offset: 0.15em; }

/* Leaflet's own chrome, nudged towards the site's type and weight. */
.contact-map .leaflet-container { background: #eef0f2; font-family: var(--font-body); }
/* OpenStreetMap's standard tiles are far more colourful than the rest of the
   site. Desaturating the tile pane alone keeps the marker, tooltip, controls
   and attribution at full contrast. */
.contact-map .leaflet-tile-pane { filter: grayscale(1) contrast(0.92) brightness(1.04); }
.contact-map .leaflet-control-attribution { font-size: 0.6875rem; }
.contact-map .leaflet-tooltip { border: 0; font-family: var(--font-body); font-size: 0.8125rem; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .contact-map { margin-top: 3rem; }
  .contact-map iframe { aspect-ratio: 4 / 3; }
}

/* ============================================================
   FOOTER — centred social marks over the copyright line
   ============================================================ */

.footer { padding: 2rem 0 2.5rem; text-align: center; }
.footer__socials { display: flex; justify-content: center; align-items: center; gap: 1.75rem; margin-bottom: 1.1rem; }
.footer__socials a { display: inline-flex; opacity: 0.92; transition: opacity 0.2s var(--ease); }
.footer__socials a:hover { opacity: 0.6; }
.footer__socials svg { width: 26px; height: 26px; fill: var(--text); }
.footer__copy { color: var(--text); font-size: 0.875rem; }
.footer__copy a { text-decoration: underline; text-underline-offset: 0.15em; }

/* ============================================================
   404
   ============================================================ */

.notfound { text-align: center; padding: 6rem 0; }
.notfound h1 { font-size: clamp(3.5rem, 11vw, 7rem); }
.notfound p { color: var(--muted); margin-top: 0.9rem; }
.notfound__links { display: flex; justify-content: center; gap: 1.75rem; margin-top: 2rem; }
.notfound__links a { text-decoration: underline; text-underline-offset: 0.15em; }

/* ============================================================
   MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}