* { box-sizing: border-box }
:root { color-scheme: light; color: #17212b; background: #faf8f2; font-family: "Segoe UI", Arial, sans-serif }
body { max-width: 85rem; min-height: 100svh; margin: auto; padding: 0 clamp(1.25rem,6vw,6rem); display: flex; flex-direction: column }
header, footer { padding: 1.4rem 0 }
header { border-bottom: 1px solid #cdcac2 }
a { color: inherit }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.3rem; font-weight: 700; text-decoration: none }
.brand img { display: block; width: clamp(10rem, 18vw, 13.5rem); height: auto }
main { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 5%; padding: clamp(3rem,8vw,7rem) 0 }
.status { display: flex; align-items: center; gap: .65rem; margin: 0; font-weight: 650; color: #8f311d }
.status::before { content: ""; width: .65rem; height: .65rem; background: #ba4525; border-radius: 50% }
h1 { font-size: clamp(3rem,6.8vw,6.4rem); letter-spacing: -.075em; line-height: 1; margin: .25em 0 .34em }
h1 span { color: #b84221 }
.intro { font-size: clamp(1.3rem,2.1vw,2rem); font-weight: 550; margin: 0 }
.detail { max-width: 36ch; color: #4d5358; line-height: 1.6; margin: .8rem 0 1.7rem }
.contact { display: inline-flex; gap: 1.4rem; background: #192633; color: white; padding: .85rem 1.15rem; border-radius: .35rem; text-decoration: none; font-weight: 600 }
.contact:hover { background: #34495a }
a:focus-visible { outline: 3px solid #2267ce; outline-offset: 4px }
footer { border-top: 1px solid #cdcac2; font-size: .9rem }
footer a { text-underline-offset: 3px }
.belt-art { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1.38; background: #eee9df; border-radius: .5rem }
.sun { position: absolute; top: 12%; left: 30%; width: 43%; aspect-ratio: 1; background: #c44b30; border-radius: 50% }
.belt, .tail, .knot { position: absolute; background: repeating-linear-gradient(0deg,#172229 0 3px,#303b40 4px,#19262c 5px); box-shadow: 0 4px 5px #10181d38 }
.belt { top: 50%; left: -10%; width: 120%; height: 15%; transform: rotate(-8deg) }
.tail { top: 52%; left: 49%; width: 43%; height: 13%; transform-origin: left center }
.tail.left { transform: rotate(136deg) }
.tail.right { transform: rotate(43deg); border-right: .9rem solid #b9914d }
.knot { top: 46%; left: 43%; width: 20%; height: 23%; border-radius: 26%; transform: rotate(38deg) }
@media (max-width: 700px) { main { grid-template-columns: 1fr; gap: 2rem; padding: 2.6rem 0 } .belt-art { aspect-ratio: 2.25 } }