:root { --ink: #17352c; --sea: #dce8e6; --sun: #efd596; }
* { box-sizing: border-box; }
body { margin: 0; color: #fffdf6; background: #17352c; font-family: Georgia, 'Times New Roman', serif; }
.hero { min-height: 100svh; display: grid; place-items: center; overflow: hidden; position: relative; padding: 4rem 1.5rem 6rem; background: linear-gradient(rgba(7, 25, 28, .38), rgba(8, 34, 34, .68)), url('https://commons.wikimedia.org/wiki/Special:FilePath/Baia_cartaromana_ischia.jpg?width=1920') center/cover no-repeat; }
.hero__wash { position: absolute; inset: 1.2rem; border: 1px solid rgba(255,255,255,.5); pointer-events: none; }
.welcome { max-width: 720px; position: relative; text-align: center; text-shadow: 0 1px 16px rgba(0,0,0,.25); z-index: 1; animation: appear 1.1s ease-out both; }
.eyebrow, .host, .details, .weather, footer { font-family: Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; font-size: .67rem; }
.eyebrow { color: var(--sun); margin: 0 0 1.5rem; }
h1 { font-size: clamp(3.6rem, 11vw, 7.2rem); font-weight: 400; letter-spacing: -.075em; line-height: .78; margin: 0; }
h1 em { color: var(--sea); font-weight: 400; }.host { color: var(--sun); margin: 1.3rem 0 0; }
.intro { font-size: clamp(1.05rem, 2vw, 1.24rem); font-style: italic; line-height: 1.65; margin: 2.5rem auto 1.7rem; max-width: 590px; }
.rule { width: 46px; height: 1px; background: var(--sun); margin: 0 auto 1.5rem; }
.details { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; justify-content: center; line-height: 1.6; }.details span { white-space: nowrap; }.details span + span::before { color: var(--sun); content: '•'; margin-right: 1.2rem; }
.cta { background: #fffdf6; color: #17352c; display: inline-block; font-family: Arial, sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .1em; margin-top: 2.3rem; padding: 1rem 1.25rem; text-decoration: none; text-transform: uppercase; transition: background .2s, transform .2s; }.cta:hover { background: var(--sun); transform: translateY(-2px); }
.weather { backdrop-filter: blur(8px); background: rgba(11, 41, 40, .55); border: 1px solid rgba(255,255,255,.35); display: inline-flex; flex-direction: column; gap: .55rem; margin-top: 2rem; min-width: 210px; padding: 1rem 1.3rem; }.weather__label { color: var(--sun); font-size: .59rem; }.weather strong { font-family: Georgia, serif; font-size: 2.2rem; font-weight: 400; letter-spacing: 0; }.weather span:last-child { font-size: .58rem; }
.hero footer { bottom: 2.2rem; color: rgba(255,255,255,.78); left: 0; position: absolute; right: 0; text-align: center; font-size: .51rem; z-index: 1; }.hero footer a { color: inherit; }
@media (max-width: 540px) { .details { display: grid; gap: .4rem; }.details span + span::before { display: none; }.hero { padding-top: 3.5rem; } }
@keyframes appear { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }