/************************************************************************************
The fonts have been licenced from Rosetta Type Foundry: https://rosettatype.com/
Use and distribution is limited by the fonts EULA: https://rosettatype.com/license
Please, keep this notice included next to all @font-face rules which use the fonts.
*************************************************************************************/
@font-face {
  font-family: "Adapter PE Variable Web";
  src: url('AdapterPEVFWeb-All.woff2') format('woff2');
  font-weight: 100 900; /* the file carries the whole weight axis */
  font-style: normal;
}

* {
  font-family: "Adapter PE Variable Web";
  font-synthesis: none; /* never fake a weight or an italic the font doesn't provide */
  font-variant-alternates: styleset(ss04), styleset(ss14);

  /* Activate basic OpenType features */
  font-kerning: normal;
  /*font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss04" 1, "ss14" 1;*/
  font-feature-settings: "ss04" 1, "ss14" 1;
}

html {
  background-color: #f1e9d2;
}

header {
  /*position: fixed;*/
  font-size: 1.5em;
  text-align: right;
  top: 1rem;
  width: 100%;
}

body {
  /*font-size: 48px;*/
  /*font-size: 24px;*/
  font-style: normal;
  line-height: 2em;

  /* Fill the viewport as a column so the footer sits at the bottom, but let
     everything flow (and scroll) when the content is taller than a small screen. */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 8px;
}

footer {
  font-size: 0px;
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
}

@scope (footer) {
  span:not(:last-child)::after {
    content: "❦";
    padding-left: 1em;
    padding-right: 1em;
  }
  span {
    font-size: 0.8rem;
  }
}

h1 {
  margin-block: 0.67em;
  font-size: 2rem; /* 2rem; */
}

.homepage {
  text-align: center;
  /* The title block shrinks with the viewport on phones; from ~533px up this
     resolves to 4rem, so the h1 is 4rem, the h2 3rem and the h3 2rem. */
  --title-size: clamp(2.25rem, 12vw, 4rem);
  --h2-size: calc(var(--title-size) * 0.75);
  --h3-size: calc(var(--title-size) * 0.5);

  /* Everything inherits the body's 32px line height, so the headings' glyphs
     overhang their line boxes and a box gap is not the gap you see. These are
     the overhangs (measured for this font) that the gaps below correct for:
     the h1's ascenders above it; the h1's descenders and the h2's ascenders
     between them; the h2's baseline and the h3's ascenders. */
  --top-overhang: calc(0.379 * var(--title-size) - 0.706rem);
  --title-overhang: calc(0.844 * var(--title-size) - 2rem);
  --group-overhang: calc(0.407 * var(--h2-size) + 0.673 * var(--h3-size) - 2.275rem);
  /* Smallest visible gap the four big gaps may shrink to (as padding) on screens
     too short for any spare space; elsewhere the auto margins set them. */
  --min-gap: 2rem;

  /* A column that fills the height above the footer. The four auto margins
     below (h1 top, h2 bottom, contact top and bottom) share its spare space
     equally, so top -> h1, h2 -> h3, services -> contact and contact -> footer
     are the same gap. */
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.homepage h1,
.homepage h2,
.homepage h3 {
  font-weight: 700;
}

.homepage h1 {
  font-size: var(--title-size);
  margin-top: auto;
  padding-top: calc(var(--min-gap) + var(--top-overhang)); /* minimum gap to the top of the page */
  margin-bottom: 0; /* flex items' margins don't collapse; the h2's margin-top sets the gap */
}

.homepage h2 {
  font-size: var(--h2-size);
  /* Visible gap to the h1: 3/4 of what a box gap of one title size gave. */
  margin-top: calc(0.75 * (var(--title-size) - var(--title-overhang)) + var(--title-overhang));
  margin-bottom: auto;
  padding-bottom: calc(var(--min-gap) + var(--group-overhang)); /* minimum gap to the h3 */
}

.homepage h3 {
  font-size: var(--h3-size);
  margin-top: 0;
  margin-bottom: 0.2em;
}

.homepage p {
  font-size: 1.5rem;
}

/* Contact line: see the note on .homepage for how it is spaced. The 16px lines
   either side of each of its gaps already hold 1.125rem of leading between them. */
.contact {
  font-style: normal;
  margin-block: auto;
  padding-block: calc(var(--min-gap) - 1.125rem);
}

.contact a {
  color: inherit;
}

/* Narrow screens (below ~672px): the footer no longer fits on one line,
   so stack its parts with the fleuron centred between them. */
@media (max-width: 42em) {
  footer {
    padding-top: 0.375rem; /* stacked lines have less leading; keeps the visible gap above the footer equal to the others */
  }
  @scope (footer) {
    span {
      display: block;
      line-height: 1.6;
    }
    span:not(:last-child)::after {
      display: block;
      line-height: 1;
      padding: 0;
    }
  }
}