/* Basic modern reset */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;line-height:1.6;-webkit-font-smoothing:antialiased; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:#1f2937; background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url('/assets/photo-1547592180-85f173990554.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;}
img,svg{display:block;max-width:100%}

:root{
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --text:#1f2937; /* slate-800 */
  --muted:#334155; /* slate-700 */
  --accent:#0ea5e9; /* sky-500 */
}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem 1rem;background:#fff;color:#111;border-radius:.375rem;z-index:1000}

.site-header{display:flex;align-items:center;justify-content:center;padding:2rem}
.logo{height:150px;width:auto;filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));}

.container{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:2rem}
.card{display:grid;grid-template-columns: 1fr;gap:1.25rem;align-items:center;text-align:center;background: rgba(255,255,255,0.85);backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border:1px solid rgba(0,0,0,.06); box-shadow: var(--shadow); border-radius:16px; padding:2rem; max-width:900px; color:var(--text)}
.card .art{}
.card .content{max-width:62ch;margin-inline:auto}

h1{font-size:clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem);line-height:1.2;margin:0 0 .5rem;color:#0b1220}
p{margin:.5rem 0 1rem;color:var(--muted)}
.quip{font-style:italic;color:#0ea5e9}

.contact h2{font-size:1.1rem;margin:1rem 0 .25rem;color:#0b1220}
.contact ul{list-style:none;padding:0;margin:0}
.contact a{color:var(--accent);text-decoration:none}
.contact a:hover{text-decoration:underline}

.site-footer{color:#e5e7eb; text-align:center; padding:0 1.5rem}
.site-footer a{color:var(--accent);text-decoration:underline dotted}

@media (min-width: 840px){
  .card{padding:3rem}
}