/* =========================================================================
   SHALCO — shared stylesheet
   Palette: yellow primary, red-orange accent (carried over from the
   sina-darvishi portfolio), black ground, warm paper for light blocks.
   Display face: Impact, with Anton loaded as the cross-platform stand-in
   (Android and most Linux boxes don't ship Impact).
   ========================================================================= */

:root{
  --yellow:#ffd100;
  --yellow-deep:#e0b400;
  --red:#e24f2f;
  --black:#0d0c0a;
  --ink:#1a1815;
  --paper:#f3efe4;
  --white:#fff;
  --muted:rgba(255,255,255,0.55);

  --display:Impact,'Anton','Haettenschweiler','Arial Narrow Bold',sans-serif;
  --body:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  --maxw:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--yellow); color:var(--black); }

/* Impact is condensed and sits tight; Anton is slightly wider. Both want
   generous tracking control rather than the browser default. */
.display{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:0.01em; line-height:0.86;
  margin:0;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--yellow);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:20px; height:2px; background:var(--yellow); }

/* grain overlay reused on both the hero and the release art ------------- */
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  opacity:0.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================ buttons ================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); text-transform:uppercase; letter-spacing:0.04em;
  font-size:17px; padding:12px 26px; border:2px solid var(--black);
  background:var(--yellow); color:var(--black);
  transition:transform .12s ease, background .18s ease, color .18s ease;
}
.btn:hover{ background:var(--black); color:var(--yellow); border-color:var(--yellow); }
.btn:active{ transform:translateY(2px); }
.btn.ghost{ background:transparent; color:var(--yellow); border-color:var(--yellow); }
.btn.ghost:hover{ background:var(--yellow); color:var(--black); }

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