:root { color-scheme: light; font-family: Helvetica, Arial, sans-serif; color: #272525; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 30px 36px 32px; }
.wordmark { margin: 0; }
.wordmark img { display: block; width: 210px; height: auto; }
.main { display: grid; place-items: center; position: relative; min-height: 420px; }
.artwork { position: relative; width: min(320px, 60.8vw, 41.6svh); aspect-ratio: 1; }
.artwork__image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; }
.artwork__image--sculpture { width: 100%; height: 100%; opacity: 0; }
.artwork__image--texture { width: 100%; height: 100%; filter: saturate(.55) hue-rotate(165deg); }
.footer { color: #514f4f; }
.description { width: 51%; margin: 0 0 18px auto; text-align: center; }
.description p { margin: 0; font-size: 12px; line-height: 1.5; text-transform: uppercase; font-weight: 300; }
.description .founder { margin-top: 5px; font-size: 11px; text-transform: none; }
.footer__baseline { display: flex; align-items: center; gap: 54px; }
.line { height: 5px; flex: 1; display: grid; margin-left: 6.2%; grid-template-columns: .46fr 1fr .25fr .5fr .75fr .25fr 4fr; }
.line i { width: 10px; height: 5px; background: #514f4f; }
.line i:last-child { width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1600px) { body { padding: 40px 48px; } }
@media (max-width: 700px) {
  body { padding: 24px 22px; }
  .wordmark img { width: 180px; }
  .main { min-height: 340px; }
  .artwork { width: min(272px, 68vw, 37.6svh); }
  .description { width: 100%; text-align: left; margin-bottom: 26px; max-width: 340px; margin-left: 0; }
  .description p { font-size: 11px; }
  .footer__baseline { gap: 26px; }
  .line { margin-left: 0; grid-template-columns: .4fr .6fr .4fr .6fr .6fr .4fr 2fr; }
  .line i { width: 6px; }
}

.mouskos-link { display: block; flex: 0 0 139.75px; margin-left: -30px; border-radius: 2px; transform: translateY(-15px); }
.mouskos-link img { display: block; width: 100%; height: auto; }
.mouskos-link:hover { opacity: .65; }
.mouskos-link:focus-visible { outline: 2px solid #272525; outline-offset: 5px; }
@media (max-width: 700px) { .mouskos-link { flex-basis: 110.5px; margin-left: -12px; } }

.tagline { margin: 15px 0 0; font-size: 12px; line-height: 1.5; font-weight: 300; text-transform: uppercase; }