/* overrides */

* {
  box-sizing: border-box;
  margin: 0;
}
img {
  display: block;
  max-width: 100%;
}

/* global */

header { height: 100dvh; width: 100%; }
header a { height: 48px; padding: 0 16px; }

main { width: 100%; }

[aria-labelledby="history"] figure img { width: 100%; }

.card h3 { margin-bottom: 28px; }
.card dt:not(:first-of-type) { margin-top: 28px; }
.card ul { padding-left: 28px; }
.card dl.listlike dd { padding-left: 9px; }
.card dl.listlike dd:not(:last-of-type) { margin-bottom: 5px }

[aria-labelledby="certificates"] p:first-of-type { margin-bottom: 36px; }

[aria-labelledby="contact"] { max-height: min-content; }
[aria-labelledby="contact"] p { margin-bottom: 32px; }
[aria-labelledby="contact"] :not(img) { max-width: max-content; }

footer { padding: 40px 27px 15px; }
footer img { width: 164px; margin: 0 auto 40px; }

/* desktop only */
@media screen and (min-width: 900px) {
  header h1 { width: 100%; margin-bottom: 50px; }
  header p { margin-bottom: 130px; }
  header a { width: 100%; }

  [aria-labelledby="history"] { padding: 80px 120px 113px; }
  [aria-labelledby="history"] h2 { margin-bottom: 40px; }
  [aria-labelledby="history"] figure img:last-of-type { margin-bottom: 8px; }
  [aria-labelledby="history"] p:not(:last-of-type) { margin-bottom: 30px; }

  .phrase { padding: 36px 21px; }

  [aria-labelledby="expertise"] { padding: 120px 120px 0; }
  [aria-labelledby="expertise"] h2 { margin-bottom: 14px; }
  [aria-labelledby="expertise"] p { margin-bottom: 36px; }
  [aria-labelledby="expertise"] > img { width: 100%; margin-top: 36px; }

  .card { padding: 24px 28px; }
  .card img { margin-bottom: 18px; }
  .card dt { margin-bottom: 4px; }
  .card ul:not(:last-child) { margin-bottom: 28px; }
  .card li:not(:last-child) { margin-bottom: 16px; }

  [aria-labelledby="certificates"] {
    box-sizing: content-box;
    max-width: 1040px;
    padding: 0 120px;
    margin: 120px auto 0;
  }
  [aria-labelledby="certificates"] h2 { margin-bottom: 18px; }
  [aria-labelledby="certificates"] dl { margin-left: 40px; margin-bottom: 36px; }
  [aria-labelledby="certificates"] dd:not(:last-of-type) { margin-bottom: 32px; }

  [aria-labelledby="contact"] { padding: 120px; }
  [aria-labelledby="contact"] h2 { margin-bottom: 14px; }
}

@media screen and (max-width: 899px) {
  header { padding: 30px 0; }
  header > * { width: 272px; }

  [aria-labelledby="history"] { padding: 50px 0 115px; }
  [aria-labelledby="history"] > :not(figure) { margin: 0 20px; }
  [aria-labelledby="history"] h2 { margin-bottom: 28px; }
  [aria-labelledby="history"] p:not(:last-child) { margin-bottom: 32px; }
  [aria-labelledby="history"] figure { margin: 32px 0; }
  [aria-labelledby="history"] figure img:last-of-type { margin-bottom: 10px; }
  [aria-labelledby="history"] figcaption { margin: 0 20px; }

  .phrase { padding: 36px 24px; }

  [aria-labelledby="expertise"] { padding-top: 80px; }
  [aria-labelledby="expertise"] > :not(img) { margin: 0 24px; }
  [aria-labelledby="expertise"] h2 { margin-bottom: 20px; }
  [aria-labelledby="expertise"] p { margin-bottom: 32px; }
  [aria-labelledby="expertise"] > img { margin-top: 32px; }

  .card { padding: 24px; }
  .card:not(:last-of-type) { margin-bottom: 24px; }
  .card img { margin-bottom: 18px; }
  .card dt { margin-bottom: 6px; }
  .card li:not(:last-child) { margin-bottom: 12px; }

  [aria-labelledby="certificates"] { padding: 69px 21px 0; }
  [aria-labelledby="certificates"] h2 { margin-bottom: 18px; }
  [aria-labelledby="certificates"] dl { margin-left: 40px; margin-bottom: 32px; }
  [aria-labelledby="certificates"] dd:not(:last-of-type) { margin-bottom: 24px; }

  [aria-labelledby="contact"] { padding: 80px 21px; }
  [aria-labelledby="contact"] h2 { margin-bottom: 20px; }
  [aria-labelledby="contact"] > img { margin-bottom: 32px; }
}