* { box-sizing: border-box; }
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #0f2d52; background: #fdf1cf; }
body { margin: 0; min-height: 100vh; background: #fdf1cf; }
.masthead { max-width: 940px; margin: 24px auto 0; }
.masthead a { display: block; }
.masthead img { display: block; width: 100%; height: auto; }
.masthead a:focus-visible { outline: 3px solid #007a85; outline-offset: 5px; }
main { max-width: 1230px; margin: auto; padding: 36px 28px 0; }
.intro { text-align: center; margin: 0 auto 38px; max-width: 690px; }
h1 { font-size: clamp(1.8rem, 4vw, 2.25rem); line-height: 1.2; letter-spacing: -.035em; margin: 0 0 14px; font-weight: 650; }
.intro p { margin: 0; font-size: 1.1rem; line-height: 1.65; color: #56616d; text-wrap: pretty; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card { display: flex; flex-direction: column; align-items: center; padding: 32px 26px 28px; border-radius: 30px; background: #fff; color: inherit; text-decoration: none; text-align: center; box-shadow: 0 8px 24px rgb(0 0 0 / .08), 0 2px 6px rgb(0 0 0 / .05); transition: transform .25s ease, box-shadow .25s ease; }
.art { width: 100%; height: 155px; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.art img { display: block; width: 100%; max-width: 250px; max-height: 155px; object-fit: contain; height: auto; }
.art .cinema-photo { width: 205px; height: 155px; object-fit: cover; border-radius: 16px; }
.card h2 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 16px; }
.card p { font-size: 1rem; line-height: 1.65; color: #59636d; margin: 0 0 25px; text-wrap: pretty; }
.domain { display: block; color: #007a85; font-weight: 650; font-size: .95rem; margin-top: auto; overflow-wrap: anywhere; }
.card:focus-visible { outline: 3px solid #007a85; outline-offset: 6px; }
footer { padding: 34px 20px 30px; text-align: center; font-size: .875rem; line-height: 1.6; color: #65717d; }
footer span { padding: 0 7px; }
@media (hover: hover) { .card:hover { transform: translateY(-7px); box-shadow: 0 18px 40px rgb(0 0 0 / .12), 0 6px 12px rgb(0 0 0 / .06); } }
@media (max-width: 760px) { main { padding: 28px 22px 0; } .cards { grid-template-columns: 1fr; max-width: 470px; margin: auto; gap: 24px; } .card { padding: 30px; } .card h2 { font-size: 1.6rem; } .intro { margin-bottom: 30px; } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }