/* brianhall.ca: one stylesheet for every page.
   Fonts and colours come from the original site: Bree Serif for the name and headings, Lato for text. */

@font-face { font-family: "Bree Serif"; src: url("../fonts/bree-serif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --field: #99b578;       /* ground of the circuit-tree artwork */
  --strip: #689c4d;       /* link strip under the header */
  --strip-dark: #4a802e;  /* current page in the strip */
  --strip-rule: #015826;
  --navy: #34495e;        /* footer and headings */
  --text: #4f5d70;
  --link: #222a87;
  --page: #f1f4ed;        /* subtle tint behind articles */
  --rule: #d6dccf;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 400 1.0625rem/1.65 "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--text); background: var(--page); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
a:hover { color: #313dc4; }
:focus-visible { outline: 3px solid var(--strip-dark); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: #fff; padding: 8px 12px; }

/* ---------- home ---------- */
body.home { background: var(--field); }
.home-hero {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--field) url("../img/circuit-trees-mobile.png") top center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 12vh;
  text-align: center;
}
@media (min-width: 768px) and (orientation: landscape) {
  .home-hero { background-image: url("../img/circuit-trees.png"); }
}
.home-hero h1 {
  margin: 0;
  font: 400 clamp(3.4rem, 9vw, 5.5rem)/1 "Bree Serif", Georgia, serif;
  color: #fff;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, .4);
}
.home-links { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 40px; }
.home-links a {
  font: 400 clamp(1.5rem, 3.2vw, 1.9rem)/1.5 "Bree Serif", Georgia, serif;
  color: #fff;
  text-decoration: none;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .45), 0 0 12px rgba(30, 60, 20, .55);
  border-bottom: 2px solid transparent;
}
.home-links a:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 480px) { .home-links { flex-direction: column; gap: 10px; } }

/* ---------- inner page header ---------- */
.band {
  background: var(--field) url("../img/circuit-trees.png") center 30% / cover no-repeat;
  height: 220px;
  display: flex;
  align-items: flex-end;
}
.band a {
  margin: 0 0 22px clamp(20px, 6vw, 80px);
  font: 400 clamp(2.4rem, 6vw, 3.6rem)/1 "Bree Serif", Georgia, serif;
  color: #fff;
  text-decoration: none;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .4);
}
@media (max-width: 767px) {
  .band { height: 130px; background-image: url("../img/circuit-trees-mobile.png"); background-position: center 20%; justify-content: center; }
}
.strip { background: var(--strip); border-top: 2px solid var(--strip-rule); }
.strip ul { list-style: none; margin: 0 auto; padding: 0 16px; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; }
.strip a { display: block; padding: 12px 20px; color: #fff; font-weight: 700; text-decoration: none; }
.strip a:hover { background: #72ab54; color: #fff; }
.strip a[aria-current="page"] { background: var(--strip-dark); }
@media (max-width: 480px) { .strip a { padding: 10px 12px; } }

/* ---------- content ---------- */
main { display: block; flex: 1 0 auto; padding: 48px 20px 72px; }
.col { max-width: 900px; margin: 0 auto; }
.read > p, .read > h1, .read > h2, .read > .facts { max-width: 46em; }
h1, h2, h3 { color: var(--navy); font-weight: 400; line-height: 1.25; }
h1 { font: 400 clamp(2rem, 4.5vw, 2.6rem)/1.2 "Bree Serif", Georgia, serif; margin: 0 0 .3em; }
h2 { font: 400 1.6rem/1.3 "Bree Serif", Georgia, serif; margin: 1.8em 0 .5em; }
h3 { font-size: 1.2rem; font-weight: 700; margin: 1.6em 0 .4em; }
p { margin: 0 0 1em; }
.lede { font-style: italic; font-size: 1.1rem; }

/* Project list (each section's landing page) */
.list { list-style: none; margin: 24px 0 0; padding: 0; }
.list li { border-top: 1px solid var(--rule); }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list a { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; padding: 26px 0; color: inherit; text-decoration: none; }
.list img { width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: #fff; }
.list h2 { margin: 0 0 .35em; font-size: 1.45rem; color: var(--navy); }
.list a:hover h2 { text-decoration: underline; }
.list p { margin: 0; }
@media (max-width: 600px) {
  .list a { grid-template-columns: 1fr; gap: 14px; }
  .list img { width: 100%; }
}

/* Reading pages */
figure { margin: 28px 0; }
figure img { border: 1px solid var(--rule); border-radius: 3px; background: #fff; }
figcaption { font-size: .95rem; margin-top: 8px; color: #6a7686; }
.narrow { max-width: 360px; }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.phones figure { margin: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 14px 0; margin: 20px 0 28px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts div { line-height: 1.3; }
.facts strong { display: block; font: 400 1.5rem/1.2 "Bree Serif", Georgia, serif; color: var(--navy); }
.facts span { font-size: .9rem; }
.side-img { float: right; margin: 0 0 16px 24px; width: 120px; }
@media (max-width: 600px) { .side-img { float: none; margin: 0 0 16px; } }
.portrait { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; float: right; margin: 0 0 16px 28px; }
@media (max-width: 600px) { .portrait { float: none; margin: 0 0 20px; } }
.back { margin-top: 40px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; margin-top: 16px; }
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery figcaption { font-size: .9rem; }
.video { aspect-ratio: 16 / 9; margin: 24px 0; }
.video iframe { width: 100%; height: 100%; border: 0; }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
dialog.lightbox::backdrop { background: rgba(20, 28, 22, .88); }
dialog.lightbox img { max-width: 94vw; max-height: 86vh; width: auto; margin: 0 auto; border: 0; }
dialog.lightbox p { color: #fff; text-align: center; margin: 10px auto 0; max-width: 70ch; }
dialog.lightbox button { position: fixed; top: 14px; right: 18px; font: 700 1rem "Lato", sans-serif; background: #fff; color: var(--navy); border: 0; border-radius: 4px; padding: 8px 14px; cursor: pointer; }

/* ---------- footer ---------- */
.footer { background: var(--navy); color: #dfe6ec; padding: 22px 20px; }
.footer .col { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer p { margin: 0; }
.footer a { color: #fff; }
.map { aspect-ratio: 4 / 3; max-width: 600px; margin-top: 24px; }
.map iframe { width: 100%; height: 100%; border: 0; border-radius: 3px; }