/* Aether — Sofia City Air Quality Monitoring Volunteer Network
   Layout concept: the PowerPoint deck, one slide per scroll section.
   Every slide is a 10in × 7.5in stage. 1in = 10cqw, 1pt = (100/720)cqw, so every
   position, size and type size from the deck scales together with the stage. */

:root {
  --page:   #eaf5f0;   /* one soft mint-white every slide background fades into */
  --ink:    #000000;   /* all deck text is black */
  --frame:  #ffffff;   /* map border (deck: lt1) */
  --accent: #156082;   /* deck accent1, shown while the map loads */

  --font-deck:  "Carlito", "Calibri", "Source Sans 3", "Segoe UI", sans-serif;           /* deck runs set in Calibri */
  --font-theme: "Aptos", "Figtree", "Open Sans", "Segoe UI", sans-serif;           /* deck runs with no face = theme font */

  --pt:  calc(100cqw / 720);   /* one point on the stage */
  --in:  10cqw;                /* one inch on the stage */
  --max: 1280px;
  --fade-y: 14%;       /* how far each slide's artwork melts into the page colour, top and bottom */
  --fade-x: 12%;       /* ...and left and right, once the window is wider than the stage */
}

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

html { background: var(--page); color-scheme: light; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-deck);
  -webkit-text-size-adjust: 100%;
}

main { display: block; }

/* ---------- band: full-width strip behind each stage ---------- */
/* On windows wider than the stage, the slide's own art is stretched across the whole strip and blurred,
   so the picture seems to continue sideways. The sharp stage fades into it. */
.band { position: relative; width: 100%; overflow: hidden; }
.backdrop {
  --mask-y: linear-gradient(to bottom, transparent 0, #000 var(--fade-y), #000 calc(100% - var(--fade-y)), transparent 100%);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: scale(1.06);
  filter: blur(calc(var(--blur, 3) * 1vmin)) saturate(1.05);
  pointer-events: none;
  -webkit-mask-image: var(--mask-y);
          mask-image: var(--mask-y);
}
.band:first-of-type .backdrop { --mask-y: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--fade-y)), transparent 100%); }

/* ---------- stage ---------- */
.slide {
  position: relative;
  width: min(100%, var(--max));
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
  overflow: hidden;
  background: transparent;
}

/* full-bleed background, stretched like the deck does.
   Its edges fade out so each slide melts into the page colour and into its neighbours. */
.fill {
  --mask-y: linear-gradient(to bottom, transparent 0, #000 var(--fade-y), #000 calc(100% - var(--fade-y)), transparent 100%);
  --mask-x: linear-gradient(to right,  transparent 0, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), transparent 100%);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-mask-image: var(--mask-y);
          mask-image: var(--mask-y);
}
/* the first slide keeps a solid top and the last a solid bottom: nothing to blend into there */
.band:first-of-type .fill { --mask-y: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--fade-y)), transparent 100%); }

/* wider than the stage: blend the sides into the page colour too */
@media (min-width: 1281px) {
  .fill {
    -webkit-mask-image: var(--mask-y), var(--mask-x);
            mask-image: var(--mask-y), var(--mask-x);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}

/* anything placed from the deck: --x --y --w --h in inches */
.box, .pic, .map {
  position: absolute;
  left:   calc(var(--x) * var(--in));
  top:    calc(var(--y) * var(--in));
  width:  calc(var(--w) * var(--in));
  height: calc(var(--h) * var(--in));
  margin: 0;
}
.pic { display: block; }
.pic img { width: 100%; height: 100%; object-fit: fill; display: block; }
img.pic { object-fit: fill; }

/* text boxes: PowerPoint's default 0.1in / 0.05in inset */
.box {
  padding: calc(.05 * var(--in)) calc(.1 * var(--in));
  line-height: 1.2;
  overflow: visible;
}
.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- type ---------- */
.t-hero, .t-title { font-family: var(--font-deck); font-style: italic; font-weight: 400; text-align: center; }

.t-hero__main { display: block; font-size: calc(48 * var(--pt)); font-weight: 700; }
.t-hero__sub  { display: block; font-size: calc(40 * var(--pt)); }

.t-title        { font-size: calc(48 * var(--pt)); }
.t-title--bold  { font-weight: 700; }
.t-title--left  { text-align: left; }

/* slide 2 description under the title */
.desc { font-family: var(--font-deck); font-size: calc(13 * var(--pt)); font-style: italic; line-height: 1.3; text-align: left; text-wrap: pretty; }

/* slide 2 is taller than the others: the map, then the explanation below it */
.slide--map { aspect-ratio: 10 / 10.1; }
.slide--map .fill { bottom: auto; height: calc(100% * 7.5 / 10.1); }   /* the art keeps its deck proportions */
.prose { font-family: var(--font-deck); font-size: calc(13 * var(--pt)); font-style: italic; line-height: 1.3; text-align: left; text-wrap: pretty; }
.prose p { margin: 0 0 .75em; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin: 1.1em 0 .35em; font-size: 1em; font-weight: 700; font-style: italic; }

/* slide 4 is taller too: the sensors, then a short explanation below */
.slide--sensors { aspect-ratio: 10 / 11; }
.slide--sensors .fill { bottom: auto; height: calc(100% * 7.5 / 11); }

/* slide 3 captions */
.cap-sm  { font-family: var(--font-deck); font-size: calc(11 * var(--pt)); line-height: 1.22; text-align: left; }
.cap-sm--c { text-align: center; font-style: italic; }
.cap-sm--j { text-align: justify; }
.cap-lg  { letter-spacing: -.025em; font-family: var(--font-theme); font-size: calc(18 * var(--pt)); font-weight: 700; font-style: italic; text-align: justify; line-height: 1.2; }

/* slide 4 spec blocks */
.spec { font-family: var(--font-deck); font-size: calc(18 * var(--pt)); font-style: italic; text-align: center; line-height: 1.22; }
.spec b { display: block; font-weight: 700; }
.spec p { margin: 0; }

/* slide 5 links */
.link { font-family: var(--font-deck); font-size: calc(18 * var(--pt)); line-height: 1.22; color: var(--ink); text-decoration: none; text-align: left; }
.link--c { text-align: center; }
.link--sm { font-size: calc(16 * var(--pt)); }
.link:hover { text-decoration: underline; }
a.pic:hover { filter: brightness(1.05); }
a:focus-visible, iframe:focus-visible {
  outline: calc(.04 * var(--in)) solid var(--accent);
  outline-offset: calc(.04 * var(--in));
}

/* ---------- map ---------- */
/* same card treatment as the tables: rounded corners, white hairline ring, soft shadow */
.map {
  background: var(--accent);
  overflow: hidden;
  border-radius: calc(.12 * var(--in));
  box-shadow: 0 calc(.04 * var(--in)) calc(.2 * var(--in)) rgb(20 60 80 / .28),
              0 0 0 calc(.015 * var(--in)) rgb(255 255 255 / .9);
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* ---------- slide 5 tables ---------- */
.tables {
  position: absolute;
  left:  calc(var(--x) * var(--in));
  top:   calc(var(--y) * var(--in));
  width: calc(var(--w) * var(--in));
  display: grid;
  gap: calc(.28 * var(--in));
}

.tbl {
  --head:   #214a5c;                 /* deep teal, from the tree art */
  --head-2: #2d6076;
  --line:   rgb(255 255 255 / .75);
  --sev-5:  #ff5252;                 /* the deck's five rating colors */
  --sev-4:  #ffa000;
  --sev-3:  #ffd600;
  --sev-2:  #8fe388;
  --sev-1:  #7fdcff;

  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: calc(.12 * var(--in));
  background: #fff;
  box-shadow: 0 calc(.04 * var(--in)) calc(.2 * var(--in)) rgb(20 60 80 / .28),
              0 0 0 calc(.015 * var(--in)) rgb(255 255 255 / .9);
  font-family: var(--font-deck);
  font-size: calc(10 * var(--pt));
  line-height: 1.22;
  color: #10242d;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tbl th, .tbl td {
  padding: calc(.06 * var(--in)) calc(.08 * var(--in));
  border-bottom: calc(.01 * var(--in)) solid var(--line);
  border-right:  calc(.01 * var(--in)) solid var(--line);
  vertical-align: middle;
}
.tbl tr > :last-child { border-right: 0; }
.tbl tbody tr:last-child > * { border-bottom: 0; }

/* header */
.tbl thead th {
  background: var(--head);
  color: #fff;
  font-weight: 700;
  font-size: calc(10.5 * var(--pt));
  letter-spacing: .02em;
  border-color: rgb(255 255 255 / .22);
}
.tbl thead .grp { background: var(--head-2); text-transform: uppercase; font-size: calc(9 * var(--pt)); letter-spacing: .12em; }
.tbl thead tr:nth-child(2) th:not([rowspan]) { background: var(--head); }
.tbl .unit { font-weight: 400; opacity: .75; }
.tbl sub { font-size: .7em; line-height: 0; }

/* body: row tinted by severity, first cell carries the strong color */
.tbl tbody tr { --sev: #fff; background: color-mix(in srgb, var(--sev) 38%, #fff); }
.tbl .sev-5 { --sev: var(--sev-5); }
.tbl .sev-4 { --sev: var(--sev-4); }
.tbl .sev-3 { --sev: var(--sev-3); }
.tbl .sev-2 { --sev: var(--sev-2); }
.tbl .sev-1 { --sev: var(--sev-1); }

.tbl tbody th {
  background: var(--sev);
  font-weight: 700;
  font-size: calc(11 * var(--pt));
  text-align: center;
}
.tbl td { color: #10242d; }
.tbl tbody td:nth-child(2) { font-weight: 700; }
.tbl .c-num   { width: 9%; }
.tbl .c-range { width: 28%; white-space: nowrap; }
.tbl tbody th.c-range { font-variant-numeric: tabular-nums; }

/* ---------- slide 3 diagram: elements placed by diagram.js in diagram units ---------- */
.diagram { position: absolute; }
.dg { position: absolute; margin: 0; user-select: none; }
.dg-img { display: block; object-fit: fill; }
.dg-text {
  font-family: var(--font-deck);
  font-style: italic;
  font-weight: 700;
  font-size: calc(33.5 * var(--du));      /* 1 diagram unit = 1/16 cqw */
  line-height: 1.28;
  white-space: nowrap;
  color: var(--ink);
  transform: translateY(-.16em);
}
.dg-text--c { transform: translate(-50%, -.16em); text-align: center; }
.slide--network { --du: calc(100cqw / 1600); }

/* arrows between icons: HTML/CSS, sized in diagram units (1 unit = --du) */
.dg-arrow {
  position: absolute;
  width: calc(var(--len) * var(--du));
  height: 0;
  transform-origin: 0 0;
  transform: rotate(var(--angle));
  pointer-events: none;
}
.dg-arrow__shaft {
  position: absolute;
  left:  calc((var(--hl) - 1) * var(--du));
  right: calc((var(--hl) - 1) * var(--du));
  top:   calc(var(--thick) * var(--du) / -2);
  height: calc(var(--thick) * var(--du));
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 calc(var(--dash) * var(--du)),
    transparent calc(var(--dash) * var(--du)) calc(var(--pitch) * var(--du)));
  border-radius: calc(var(--thick) * var(--du) / 2);
}
.dg-arrow__head {
  position: absolute;
  top: calc(var(--hw) * var(--du) / -2);
  width:  calc(var(--hl) * var(--du));
  height: calc(var(--hw) * var(--du));
  background: var(--ink);
}
.dg-arrow__head--a { left: 0;  clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.dg-arrow__head--b { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }

/* the two explanation texts under the sensors */
.slide--sensors .prose { text-align: justify; }
.slide--sensors .prose h3 { text-align: left; }

/* the description and explanation on the map slide */
.slide--map .desc, .slide--map .prose { text-align: justify; }

/* ---------- footer: disclaimer and contacts, on the page colour ---------- */
.foot {
  width: min(100%, var(--max));
  margin-inline: auto;
  container-type: inline-size;
  padding-block: 1cqw 6cqw;
  font-family: var(--font-deck);
  color: var(--ink);
}
.foot__inner { padding-inline: 6cqw; display: grid; gap: 3.2cqw; }
.foot h2 { margin: 0 0 .5em; font-size: calc(13 * var(--pt)); font-style: italic; font-weight: 700; }
.foot p  { margin: 0; font-size: calc(11 * var(--pt)); font-style: italic; line-height: 1.35; text-align: justify; text-wrap: pretty; }

.contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.6cqw 2.4cqw; }
.contact {
  display: inline-flex;
  align-items: center;
  gap: .9cqw;
  padding: .9cqw 1.8cqw .9cqw 1.2cqw;
  border-radius: 1.2cqw;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: calc(14 * var(--pt));
  font-variant-numeric: tabular-nums;
  box-shadow: 0 .4cqw 2cqw rgb(20 60 80 / .22), 0 0 0 .15cqw rgb(255 255 255 / .9);
}
.contact:hover .contact__text { text-decoration: underline; }
.contact:focus-visible { outline: .4cqw solid var(--accent); outline-offset: .4cqw; }
.contact__icon {
  flex: none;
  width: 3cqw;
  height: 3cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact__text { overflow-wrap: anywhere; }

/* ---------- language switch ---------- */
.lang {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 20;
  display: flex;
  padding: 3px;
  gap: 2px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgb(20 60 80 / .22), 0 0 0 1px rgb(255 255 255 / .9);
  font: 700 14px/1 var(--font-deck);
  letter-spacing: .04em;
}
.lang__item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 9px; color: var(--ink); text-decoration: none; }
.lang__flag { width: 22px; height: 15px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .18); }
.lang__item--current { background: #214a5c; color: #fff; }
a.lang__item:hover { background: #e3f1ee; }
a.lang__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Bulgarian page: where the Bulgarian deck differs from the English one ---------- */
.t-title--sm { font-size: calc(32 * var(--pt)); }
.t-title--md { font-size: calc(36 * var(--pt)); }
.cap-lg--l { text-align: left; }
.t-line { display: block; }
.t-line--r { text-align: right; }