/* European Laser Academy
   Layout: a masthead built from the logo (the mark sits on a red line that runs the full width of the page,
   with the name above the line and the place below it), then text in one or two columns within 72rem. */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-italic-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #1d2230;     /* blue-black, from the dusk in the Grand-Place photograph */
  --navy: #1b2d5b;    /* the name */
  --muted: #5a6073;
  --rule: #d9dce4;
  --beam: #fb031e;    /* the red of the logo */
  --red: #b3112a;     /* darker red for text and focus, AA on white */
  --display: "EB Garamond", Garamond, "Times New Roman", serif;
  --text: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --wrap: 72rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
img { max-width: 100%; height: auto; }
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--beam);
}
a:hover { color: var(--red); }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
cite { font-style: italic; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--paper); padding: 0.5rem 1rem; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* A hairline that stops at the side gutters */
.ruled { position: relative; }
.ruled::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  height: 1px;
  background: var(--rule);
}

/* Masthead. The mark's own beam occupies rows 149 to 157 of its 320-unit height; the line is drawn at the same
   height so the two join. As in the logo, it starts at the mark (under its centre) and runs to the right edge
   of the page. Row 1 holds the name, and the line runs along its bottom edge. */
.masthead {
  --mark-h: 88px;
  --name-size: 2rem;
  --name-gap: 0.3rem;
  --pad: 2rem;
  --mark-w: calc(var(--mark-h) * 0.9375);
  --beam-top: calc(var(--mark-h) * 0.465625);
  --beam-t: calc(var(--mark-h) * 0.028125);
  --row1: calc(var(--name-size) * 1.2 + var(--name-gap));
  position: relative;
  padding-top: var(--pad);
}
.masthead--home { --mark-h: 128px; --name-size: 3.5rem; --name-gap: 0.45rem; --pad: 3rem; }
.masthead::before {
  content: "";
  position: absolute;
  left: calc(max(0px, (100% - var(--wrap)) / 2) + max(16px, env(safe-area-inset-left, 0px)) + var(--mark-w) / 2);
  right: 0;
  top: calc(var(--pad) + var(--row1));
  height: var(--beam-t);
  background: var(--beam);
}
.masthead .wrap {
  display: grid;
  grid-template-columns: var(--mark-w) minmax(0, 1fr) auto;
  grid-template-rows: var(--row1) auto;
  column-gap: 1.25rem;
}
.mark {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  display: block;
  width: var(--mark-w);
  height: var(--mark-h);
  margin-top: calc(var(--row1) - var(--beam-top));
}
.mark img { display: block; width: 100%; height: 100%; }
.name {
  grid-column: 2 / span 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: var(--name-gap);
  font: 500 var(--name-size)/1.2 var(--display);
  letter-spacing: -0.01em;
  color: var(--navy);
}
.name a { color: inherit; text-decoration: none; }
.place, .nav { grid-row: 2; align-self: start; margin-top: calc(var(--beam-t) + 0.55rem); }
.place { grid-column: 2; font: italic 400 1.1875rem/1.4 var(--display); color: var(--muted); }
.nav {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  font-size: 0.8125rem;
  line-height: calc(1.1875rem * 1.4);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--beam);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* Home */
.statement { padding-block: 3.25rem 2.25rem; }
.statement p { font: italic 400 1.75rem/1.35 var(--display); color: var(--muted); max-width: 40rem; text-wrap: pretty; }

.plate { display: grid; gap: 0.75rem; }
.plate img { display: block; width: 100%; }
.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 4.5rem; padding-block: 3.5rem; }
.flow { display: grid; gap: 1rem; align-content: start; text-wrap: pretty; }
.flow h2:not(:first-child) { margin-top: 1rem; }
h2 { font: 500 1.75rem/1.2 var(--display); letter-spacing: -0.005em; text-wrap: balance; }

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.facts dt { color: var(--muted); }

.president { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 4.5rem; padding-block: 3.5rem; }
.president blockquote { display: grid; gap: 1.1rem; font: 400 1.4375rem/1.5 var(--display); text-wrap: pretty; }
.sig { display: grid; gap: 0.1rem; margin-top: 0.75rem; }
.sig a { font-weight: 600; }
.sig span { color: var(--muted); }

.enquiries {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 3rem;
  padding-block: 2.25rem;
}
.enquiries p { font: 400 1.375rem/1.4 var(--display); }
.enquiries a { overflow-wrap: anywhere; }

/* Inner pages */
.page-head { display: grid; gap: 1rem; padding-block: 3.5rem 2.5rem; }
.page-head h1 { font: 400 3.25rem/1.05 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.page-head p { max-width: 40rem; font: italic 400 1.5rem/1.4 var(--display); color: var(--muted); text-wrap: pretty; }

.prose { display: grid; gap: 1rem; max-width: 42rem; padding-bottom: 4.5rem; text-wrap: pretty; }
.prose h2 { margin-top: 1.5rem; }
.prose ol, .prose ul { display: grid; gap: 0.35rem; padding-left: 1.35em; }
.prose li { padding-left: 0.25em; }
li::marker { color: var(--muted); }
.note { color: var(--muted); }

.terms { display: grid; gap: 0.15rem; }
.terms dt { font-weight: 600; }
.terms dd + dt { margin-top: 0.75rem; }

.timeline { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); border-top: 1px solid var(--rule); }
.timeline dt, .timeline dd { padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.timeline dt { font: 500 1.5rem/1.15 var(--display); color: var(--navy); font-variant-numeric: lining-nums; }
.timeline dd { display: grid; gap: 1rem; align-content: start; }
.archive { display: grid; gap: 0.5rem; }
.archive img { display: block; width: 100%; max-width: 30rem; border: 1px solid var(--rule); }
.archive figcaption { font-size: 0.8125rem; color: var(--muted); }

.address { font: 400 2rem/1.25 var(--display); overflow-wrap: anywhere; }

/* Footer */
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.25rem 3rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.site-footer nav { display: flex; gap: 1.5rem; }

@media (max-width: 900px) {
  .masthead--home { --mark-h: 100px; --name-size: 2.625rem; --pad: 2.5rem; }
  .columns, .president { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .masthead, .masthead--home { --mark-h: 64px; --name-size: min(1.5rem, 6.6vw); --name-gap: 0.2rem; --pad: 1.5rem; }
  .masthead .wrap { grid-template-columns: var(--mark-w) minmax(0, 1fr); column-gap: 1rem; }
  .name { grid-column: 2; }
  .place { font-size: 1rem; }
  .nav { grid-column: 1 / -1; grid-row: 3; margin-top: 1.25rem; gap: 0.25rem 1.25rem; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .statement { padding-block: 2rem 1.5rem; }
  .statement p { font-size: 1.3125rem; }
  .columns, .president { gap: 2.5rem; padding-block: 2.5rem; }
  .president blockquote { font-size: 1.25rem; }
  .enquiries p { font-size: 1.1875rem; }
  .page-head { padding-block: 2.25rem 1.75rem; }
  .page-head h1 { font-size: 2.375rem; }
  .page-head p { font-size: 1.25rem; }
  .timeline { grid-template-columns: 5.25rem minmax(0, 1fr); }
  .timeline dt { font-size: 1.25rem; }
  .address { font-size: 1.375rem; }
}

@media print {
  .nav, .skip { display: none; }
  body { font-size: 11pt; }
  .masthead::before, .mark img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}