:root{
  --text:#111;
  --muted:#8b8b8b;
  --muted2:#a7a7a7;
  --link:#1a73e8;
  --bg:#fff;
  --col: 560px;
  --pad: 28px;
  --lh: 1.6;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-weight:400;
  line-height:var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{
  color:var(--link);
  text-decoration:none;
  text-underline-offset: 2px;
}
a:hover{ text-decoration: underline; }

a:focus-visible{
  outline:2px solid rgba(26,115,232,.35);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Layout */
.page{
  min-height:100%;
  display:flex;
  justify-content:center;
  padding: 18vh var(--pad) 10vh;
}
.col{ width: min(100%, var(--col)); }

/* Navigation */
nav{
  position: fixed;
  top: 22px;
  left: 0;
  right: 0;
  display:flex;
  justify-content:center;
  pointer-events:none;
  z-index: 10;
}
.nav-inner{
  width: min(100%, var(--col));
  padding: 0 var(--pad);
  display:flex;
  justify-content:flex-end;
  gap: 14px;
  pointer-events:auto;
  font-size: 12.5px;
  color: var(--muted);
}
.nav-inner a{
  color: var(--muted);
  text-decoration:none;
}
.nav-inner a:hover{ color: var(--text); text-decoration:none; }
.nav-inner a[aria-current="page"]{ color: var(--text); }

/* Header symbol */
.symbol{
  font-size: 30px;
  line-height: 1;
  margin: 0 0 22px;
  user-select:none;
}

/* Type */
h1{
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.meta{
  margin: 2px 0 28px;
  color: var(--muted2);
  font-size: 13px;
}

section{ margin: 0 0 26px; }
.lead{ margin: 0 0 18px; font-size: 15px; }
.block{ margin: 0 0 18px; font-size: 15px; }

/* Roster list (home page + shared styles) */
.roster{
  margin: 0;
  padding: 0;
  list-style:none;
}
.roster li{
  margin: 0 0 10px;
  font-size: 15px;
}
.desc{
  color: var(--muted);
  margin-left: 8px;
  font-size: 13px;
}
.roster a{
  color: var(--link);
  text-decoration:none;
}
.roster a:hover{
  color: var(--link);
  text-decoration: underline;
}

/* Socials */
.socials{
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}
.socials a{
  color: var(--muted);
  text-decoration:none;
}
.socials a:hover{ color: var(--text); }

/* Footer */
footer{
  margin-top: 34px;
  color: var(--muted);
  font-size: 13px;
}
.time{ margin-top: 10px; color: var(--text); }

/* Fade-in */
.fade{
  opacity: 0;
  transform: translateY(6px);
  animation: fadeIn 520ms ease-out forwards;
}
.fade.d2{ animation-delay: 80ms; }
.fade.d3{ animation-delay: 140ms; }
.fade.d4{ animation-delay: 200ms; }

@keyframes fadeIn{
  to{ opacity:1; transform: translateY(0); }
}

@media (max-width: 520px){
  .page{ padding: 16vh 20px 8vh; }
  .nav-inner{ justify-content: center; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Rotating word (home) */
#rotating-word{
  display: inline-block;
  width: 18ch; /* slightly safer to avoid clipping */
  text-align: left;
  white-space: nowrap;
  opacity: 1;
}
#rotating-word .dot{ color: var(--text); }

/* Roster page creator blocks */
.creator{ margin-bottom:18px; }
.creator > div{ margin-bottom:18px; }
.creator-name{ font-size:15px; display:inline; }
.creator-genre{ font-size:13px; color:var(--muted); margin-left:6px; display:inline; }
.creator-blurb{ font-size:15px; color:var(--text); margin:0; }

/* Contact form styles */
.contact-form{ margin-top: 6px; }
.field{ margin: 0 0 14px; }
.field.message{ margin-bottom: 4px; }
.actions{ margin: 0 0 14px; }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

input, select, textarea, button{ font: inherit; color: inherit; }
input, select, textarea{
  width: 100%;
  max-width: 520px;
  padding: 14px 16px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  outline: none;
  font-size: 14.5px;
  line-height: 1.4;
}
input::placeholder, textarea::placeholder{ color: rgba(17,17,17,.28); }

select{
  appearance:none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(17,17,17,.35) 50%),
    linear-gradient(135deg, rgba(17,17,17,.35) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

textarea{
  min-height: 120px;
  resize: vertical;
  padding-top: 16px;
  padding-bottom: 16px;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(17,17,17,.18);
  box-shadow: 0 0 0 4px rgba(17,17,17,.04);
}

/* Invalid fields — only after submit attempt */
.was-submitted input:invalid,
.was-submitted textarea:invalid,
.was-submitted select:invalid{ border-color: #e53935; }

.was-submitted input:invalid:focus,
.was-submitted textarea:invalid:focus,
.was-submitted select:invalid:focus{ box-shadow: 0 0 0 4px rgba(229,57,53,.12); }

.btn{
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn:hover{ color: var(--text); }

.is-hidden{ display:none; }