:root { color-scheme: light; }
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: #fbfaf7; color: #4c4a47; -webkit-font-smoothing: antialiased; }
main { width: min(100%, 982.8px); margin: auto; }
.introduction { text-align: center; padding-top: clamp(34.2px, 3.91vw, 63.9px); }
h1 { margin: 0; line-height: 0; }
.logo { display: inline-block; width: clamp(110.7px, 9.58vw, 152.1px); height: auto; }
.tagline { margin: clamp(34.2px, 3.4vw, 54px) 9px 0; font: 500 clamp(13.5px, .92vw, 15.3px)/1.4 'Abhaya Libre', Georgia, serif; letter-spacing: .23em; }
.materials { display: grid; width: 93.5%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10.95px, 1.53vw, 24.41px); margin: clamp(77.43px, calc(3.91vw + 30px), 93.5px) auto 0; padding: 0 clamp(21.04px, 2.95vw, 47.12px); }
.material { min-width: 0; text-align: center; }
.illustration { height: clamp(121.18px, 12.07vw, 194.39px); display: flex; align-items: center; justify-content: center; }
.illustration img { display: block; width: 70%; height: 70%; object-fit: contain; mix-blend-mode: multiply; }
.material h2 { margin: 15.15px 0 0; font: 500 clamp(14.3px, .97vw, 16.83px)/1.2 'Abhaya Libre', Georgia, serif; text-transform: uppercase; letter-spacing: .37em; padding-left: .37em; }
.divider { display: block; width: 36px; height: 2px; background: url('assets/divider.svg') center / contain no-repeat; margin: 16.83px auto 14.3px; }
.material p { margin: 0; font: 500 clamp(13.86px, .85vw, 16.83px)/1.35 'Abhaya Libre', Georgia, serif; letter-spacing: .12em; white-space: nowrap; }
.landscape { margin: clamp(31.5px, 2.83vw, 45px) auto 0; width: min(100%, 869.4px); }
.landscape img { display: block; width: 100%; height: auto; mix-blend-mode: darken; }
footer { padding: 12.6px 12.6px 18.9px; text-align: center; font: 400 clamp(12.6px, .77vw, 15.3px)/1.5 'Inconsolata', monospace; }
footer span { margin: 0 .6em; }
a { color: inherit; text-underline-offset: .2em; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
@media (max-width: 960px) {
  .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 760px) {
  .introduction { padding-top: 30.6px; }
  .logo { width: 138.4px; }
  .tagline { max-width: 378px; margin: 30.6px auto 0; padding: 0 9.9px; letter-spacing: .12em; }
  .materials { grid-template-columns: minmax(0, 1fr); row-gap: 58px; padding: 0 11.78px; margin-top: 78px; }
  .illustration { height: auto; }
  .illustration img { width: max(50vw, min(56vw, 320px)); height: auto; }
  .material h2 { margin-top: 20px; font-size: 18px; letter-spacing: .23em; padding-left: .23em; }
  .divider { margin: 17px auto 15px; width: 36px; }
  .material p { font-size: 16px; letter-spacing: .08em; white-space: normal; }
  .landscape { margin-top: 72px; }
  footer { padding: 11.7px 7.2px 18px; }
}
@media (max-width: 380px) { footer span { margin: 0 .22em; } }