@font-face {
  font-family: "Homemade Apple";
  src: url("assets/homemade-apple.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Goudy Bookletter 1911";
  src: url("assets/goudy-bookletter-1911.ttf") format("truetype");
  font-display: swap;
}

:root { color: #fff; background: #101818; font-family: Georgia, "Times New Roman", serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 20rem; }
a { color: inherit; text-underline-offset: 0.2em; }
.site-header { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; padding: clamp(1.4rem, 3vw, 3rem); }
.site-logo { display: block; width: min(20rem, 44vw); mix-blend-mode: multiply; }
.site-nav { padding-top: 0.65rem; font-size: 1.05rem; text-decoration: none; }
.home { min-height: 100svh; padding: clamp(7rem, 12vw, 10rem) clamp(1.25rem, 5vw, 5rem) 2rem; background: linear-gradient(90deg, rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.38)), url("assets/spider-in-sun.webp") center / cover; }
.mural { width: min(100%, 74rem); min-height: calc(100svh - 12rem); margin-inline: auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(2rem, auto); gap: clamp(0.7rem, 2vw, 2rem); align-items: center; }
.mural img { display: block; width: 100%; box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.2); }
.mural .drawing { grid-column: 1 / span 3; grid-row: 2; }
.mural .text { grid-column: 4 / span 4; grid-row: 3; font-size: clamp(1.05rem, 1.8vw, 1.45rem); line-height: 1.06; text-shadow: 0 1px 1rem #000; }
.mural .mirror { grid-column: 9 / span 4; grid-row: 2 / span 3; }
.mural .portrait { grid-column: 10 / span 2; grid-row: 5 / span 2; transform: scale(2); }
.mural .detail { grid-column: 1 / span 2; grid-row: 5; box-shadow: none; transform: scale(1.5); }
.newsletter { grid-column: 3 / span 5; grid-row: 6; padding-top: 2rem; font-size: 1.08rem; }
.mural .text, .newsletter, .about-content { font-family: "Goudy Bookletter 1911", Georgia, serif; }
.newsletter a { display: inline-block; margin-top: 0.7rem; padding: 0.65rem 1rem; background: #fff; color: #202020; text-decoration: none; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem clamp(1.25rem, 5vw, 5rem); color: #311f1e; background: #fff; font-size: 0.95rem; }
.site-footer > a { font-family: "Homemade Apple", cursive; font-size: 1.1rem; text-decoration: none; }
.site-footer nav { display: flex; gap: 1rem; }
.social-links { align-items: center; }
.social-links a { display: grid; place-items: center; width: 1rem; height: 1rem; }
.social-links svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.social-links rect, .social-links circle { fill: none; stroke: currentColor; stroke-width: 2; }
.social-links .instagram-dot { fill: currentColor; stroke: none; }
.about { min-height: 100svh; padding: clamp(9rem, 15vw, 12rem) clamp(1.25rem, 10vw, 12rem) clamp(3rem, 8vw, 8rem); color: #241e1b; background: #f5f1e9; }
.about-content { max-width: 48rem; margin: auto; font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.25; }
.about-content p { margin: 0 0 1.4em; }
.about-content h1 { margin: 0 0 1.6em; font-size: 0.8rem; font-weight: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.about .site-header { color: #481c1e; }
@media (max-width: 42rem) { .mural { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; padding-top: 2rem; } .mural .text { order: 1; font-size: 1.25rem; } .mural img { max-width: 20rem; } .mural .mirror { align-self: flex-end; } .mural .portrait { align-self: center; max-width: 12rem; } .newsletter { order: 2; } .site-footer { flex-direction: column; } }