/* NomadSorted — ported from the Claude Design handoff (dark slate + brass).
   Tokens and values are verbatim from the design files; hover rules here
   replace the prototype's style-hover attributes. */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0F1216;
  color: #EDEFF3;
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
a { color: #C9A45C; text-decoration: none; }
a:hover { color: #E3C77F; }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
[data-reveal="stamp"] { transform: scale(1.12) rotate(2.5deg); }
[data-revealed] { opacity: 1; transform: none; }

@keyframes stampIn { from { transform: scale(1.7) rotate(-14deg); opacity: 0; } 70% { transform: scale(.96) rotate(-5deg); opacity: 1; } to { transform: scale(1) rotate(-6deg); opacity: .95; } }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes roseIn { from { transform: scale(.82) rotate(-28deg); opacity: 0; } 70% { opacity: 1; } to { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes needleFind { 0% { transform: rotate(-150deg); } 48% { transform: rotate(22deg); } 68% { transform: rotate(-9deg); } 84% { transform: rotate(3.5deg); } 100% { transform: rotate(0deg); } }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes orbitDash { to { stroke-dashoffset: -120; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(201,164,92,.45); } 70% { box-shadow: 0 0 0 14px rgba(201,164,92,0); } 100% { box-shadow: 0 0 0 0 rgba(201,164,92,0); } }
@keyframes floatY { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }

/* Hover states (from the prototype's style-hover attributes) */
.nav-a { color: #99A1AE; }
.nav-a:hover { color: #EDEFF3; }
.btn-gold {
  background: linear-gradient(135deg,#E3C77F,#C9A45C 55%,#A9853F);
  color: #171204;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.btn-gold:hover { filter: brightness(1.08); color: #171204; }
.btn-gold-lift { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; }
.btn-gold-lift:hover { transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  color: #EDEFF3;
  border-radius: 999px;
  font-weight: 600;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.btn-ghost:hover { border-color: #C9A45C; color: #E3C77F; transform: translateY(-2px); }
.btn-outline {
  background: none;
  color: #C9A45C;
  border: 1.5px solid #C9A45C;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.btn-outline:hover { background: rgba(201,164,92,.1); }
.btn-copper {
  align-self: flex-start;
  background: #C88A4E;
  color: #171204;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.btn-copper:hover { filter: brightness(1.1); }
.chip-btn:hover { border-color: #C9A45C !important; }
.hd-chip { border: 1px solid rgba(255,255,255,.14); }
.hd-chip:hover { border-color: #C9A45C; }
.dl-row-btn { background: none; }
.dl-row-btn:hover { background: #1B2029; }
.ghost-link { border: 1px solid rgba(255,255,255,.2); color: #EDEFF3; }
.ghost-link:hover { border-color: #E3C77F; color: #E3C77F; }

input[type="search"], input[type="email"] { outline-color: #C9A45C; }
:focus-visible { outline: 2px solid #C9A45C; outline-offset: 2px; }

/* Mobile: single prototype breakpoint plus the production overlay menu */
.menu-btn { display: none; }
@media (max-width: 600px) {
  .cd-row { gap: 8px !important; }
  #cd-d, #cd-h, #cd-m, #cd-s { font-size: 28px !important; }
  .cd-row > div:nth-child(even) { font-size: 20px !important; }
  .dl-row-btn { grid-template-columns: 86px 1fr auto !important; padding: 16px !important; }
  .dl-row-btn > span:first-child { font-size: 15px !important; }
  .next-card { padding: 22px !important; }
}
@media (max-width: 860px) {
  [data-cols] { grid-template-columns: 1fr !important; }
  [data-hide-m] { display: none !important; }
  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: #EDEFF3;
    cursor: pointer;
  }
}
.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12,14,18,.97);
  backdrop-filter: blur(10px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.overlay-menu[data-open] { display: flex; }
.overlay-menu a {
  font-family: 'Instrument Serif', serif;
  font-size: 30px;
  color: #EDEFF3;
}
.overlay-menu a:hover { color: #E3C77F; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}