/* rinji.net */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700;800&family=Work+Sans:wght@400;500&family=IBM+Plex+Mono:wght@500&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #FFFDF7; color: #4A4A4A; font-family: 'Work Sans', sans-serif; font-weight: 400; line-height: 1.6; }
.billboard { text-align: center; padding: 5rem 2rem 3rem; }
.hero-box { display: inline-block; border: 4px solid #1A1A1A; padding: 1.5rem 2.5rem; transform: rotate(-1deg); margin-bottom: 1.5rem; }
.hero-title { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(2rem, 6vw, 4rem); color: #1A1A1A; }
.hero-tagline { font-size: 1rem; color: #4A4A4A; margin-bottom: 1.5rem; }
.neo-button { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9rem; background: #FFE14D; color: #1A1A1A; border: 3px solid #1A1A1A; box-shadow: 3px 3px 0 #1A1A1A; padding: 0.75rem 1.5rem; cursor: pointer; }
.neo-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1A1A1A; }
.thick-rule { border-top: 4px solid #1A1A1A; }
.section-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.5rem; color: #1A1A1A; margin-bottom: 1.5rem; }
.board { max-width: 600px; margin: 0 auto; padding: 2rem; }
.gig-list { display: flex; flex-direction: column; gap: 0.75rem; }
.neo-card { background: #FFFDF7; border: 3px solid #1A1A1A; box-shadow: 4px 4px 0 #1A1A1A; padding: 1.25rem; }
.gig-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; color: #1A1A1A; margin-bottom: 0.5rem; }
.gig-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.loc-tag { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.7rem; color: #1A1A1A; border: 2px solid #1A1A1A; padding: 0.15rem 0.5rem; }
.dur-tag { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.7rem; color: #1A1A1A; border: 2px solid #1A1A1A; padding: 0.15rem 0.5rem; }
.dur-tag.yellow { background: #FFE14D; }
.dur-tag.pink { background: #FF90B3; }
.dur-tag.mint { background: #A8F0C6; }
.pay-range { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.75rem; color: #1A1A1A; }
.detail-btn { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.75rem; background: transparent; color: #6C63FF; border: 2px solid #6C63FF; padding: 0.3rem 0.8rem; cursor: pointer; }
.skills { max-width: 600px; margin: 0 auto; padding: 2rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.skill-tag { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.75rem; color: #1A1A1A; border: 2px solid #1A1A1A; padding: 0.3rem 0.8rem; }
.skill-tag.yellow { background: #FFE14D; }
.skill-tag.pink { background: #FF90B3; }
.skill-tag.mint { background: #A8F0C6; }
.warm-bone { background: #F0ECE4; }
.stats { max-width: 600px; margin: 0 auto; padding: 2rem; }
.stat-row { display: flex; justify-content: center; align-items: center; gap: 1.5rem; text-align: center; }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); color: #1A1A1A; display: block; border-bottom: 4px solid #FFE14D; padding-bottom: 0.25rem; }
.stat-label { font-size: 0.8rem; color: #4A4A4A; margin-top: 0.25rem; display: block; }
.stat-squiggle { font-size: 1.5rem; color: #FF90B3; }
.footer { text-align: center; padding: 2rem; }
.footer-mark { font-size: 1.5rem; color: #1A1A1A; margin-top: 1rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }