*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --paper: #f0ebe3; --paper2: #e8e1d6; --ink: #2a2520; --ink2: #4a423a; --rule: rgba(42,37,32,0.13); --terra: #9e6b58; --terra-l: rgba(158,107,88,0.12); --mono: 'DM Mono', monospace; --serif: 'Playfair Display', serif; --body: 'Lora', serif; --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); } /* ── DARK THEME (toggled via [data-theme="dark"] on ) ── */ :root[data-theme="dark"]{ --paper: #1c1a18; --paper2: #252320; --ink: #e9e3da; --ink2: #b6ac9f; --rule: rgba(233,227,218,0.14); --terra: #c98668; --terra-l: rgba(201,134,104,0.16); } html{scroll-behavior:smooth} body{ background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; min-height:100vh; display: flex; flex-direction: column; background-image: var(--noise); transition: background-color .25s ease, color .25s ease; } /* ── HEADER ── */ header{ position: sticky; top:0; z-index:100; background: var(--paper); border-bottom: 2px solid var(--ink); padding: 0 clamp(20px,5vw,64px); display: flex; justify-content: space-between; align-items: center; height: 58px; background-image: var(--noise); transition: background-color .25s ease, border-color .25s ease; } .logo-btn{ background: none; border: none; font-family: var(--serif); font-size: 1.3rem; font-style: italic; font-weight: 500; color: var(--ink); cursor: pointer; letter-spacing: 0.02em; text-decoration: none; display: flex; align-items: center; } .nav-wrap{ display: flex; align-items: stretch; height: 100%; } nav{ display: flex; align-items: stretch; height: 100%; } .nav-btn{ background: none; border: none; border-left: 1px solid var(--rule); color: var(--ink); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0 clamp(16px,3vw,32px); cursor: pointer; position: relative; transition: color 0.2s, background 0.2s; white-space: nowrap; height: 100%; text-decoration: none; display: inline-flex; align-items: center; } .nav-btn:last-child{ border-right: 1px solid var(--rule); } .nav-btn:hover, .nav-btn.active{ color: var(--terra); background: var(--terra-l); } .nav-btn.active::before{ content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--terra); } /* ── HEADER ACTIONS (theme toggle) ── */ .header-actions{ display: flex; align-items: center; gap: 4px; padding-left: 14px; margin-left: 10px; border-left: 1px solid var(--rule); } .icon-btn{ background: none; border: none; color: var(--ink2); cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; transition: color 0.2s; } .icon-btn:hover{color: var(--terra);} .icon-btn svg{width: 17px; height: 17px;} .icon-moon{display:none} :root[data-theme="dark"] .icon-sun{display:none} :root[data-theme="dark"] .icon-moon{display:block} /* ── LAYOUT ── */ main{flex: 1 0 auto;} .section{ max-width: 1060px; margin: 0 auto; padding: clamp(32px,6vw,72px) clamp(20px,5vw,64px) 96px; animation: appear 0.45s ease forwards; } @keyframes appear{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } /* ── PAGE HEADER ── */ .pg-head{ display: flex; align-items: baseline; gap: 20px; margin-bottom: 48px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); } .pg-num{ font-family: var(--mono); font-size: 0.6rem; color: var(--terra); letter-spacing: 0.2em; flex-shrink: 0; padding-top: 4px; } .pg-title{ font-family: var(--serif); font-size: clamp(2rem,5vw,3.2rem); font-weight: 400; line-height: 1; color: var(--ink); } .pg-title em{ font-style: italic; color: var(--ink2); } /* ── WORK LIST ── */ .work-list{ display: flex; flex-direction: column; gap: 0; } .work-item{ border-top: 1px solid var(--rule); padding: 28px 0; display: grid; grid-template-columns: 140px 1fr; gap: 24px 36px; align-items: start; } .work-item:last-child{border-bottom: 1px solid var(--rule)} .work-meta{ padding-top: 3px; } .work-tag{ display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terra); margin-bottom: 6px; } .work-year{ font-family: var(--mono); font-size: 0.7rem; color: var(--ink2); display: block; font-variant-numeric: oldstyle-nums; } .bc-wrap{ background: var(--paper); border: 1px solid var(--rule); overflow: hidden; max-width: 450px; transition: background-color .25s ease, border-color .25s ease; } .bc-wrap iframe{ display: block; width: 100%; border: 0; background: transparent; mix-blend-mode: multiply; } /* Bandcamp player dynamically responds to background color parameters switched via JS */ :root[data-theme="dark"] .bc-wrap{ background: var(--paper2); border-color: var(--rule); } :root[data-theme="dark"] .bc-wrap iframe{ mix-blend-mode: normal; } .work-title{ font-family: var(--serif); font-size: 1.35rem; font-weight: 500; margin-bottom: 3px; line-height: 1.2; } .work-sub{ font-family: var(--mono); font-size: 0.65rem; color: var(--ink2); letter-spacing: 0.08em; margin-bottom: 18px; } .work-link{ color: var(--terra); text-decoration: none; } .work-link:hover{ text-decoration: underline; } /* ── ABOUT PAGE ── */ .about-grid{ display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px,6vw,80px); align-items: start; } .bio-text{ font-size: 1.05rem; line-height: 1.9; color: var(--ink); } .bio-text p+p{margin-top:1.2em} .email-cta{ display: inline-block; margin-top: 1.2em; font-family: var(--mono); font-size: 0.9rem; font-weight: 700; color: var(--terra); text-decoration: underline; text-underline-offset: 4px; } .contact-card{ background: var(--paper2); border: 1px solid var(--rule); padding: 28px; transition: background-color .25s ease, border-color .25s ease; } .contact-card h3{ font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink2); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .contact-links{display:flex;flex-direction:column} .clink{ display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); color: var(--ink2); text-decoration: none; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s, padding-left 0.2s; } .clink:last-child{border-bottom:none} .clink:hover{ color: var(--terra); padding-left: 6px; } .clink svg{ width: 17px; height: 17px; flex-shrink: 0; opacity: 0.6; transition: opacity 0.2s; } .clink:hover svg{opacity:1} /* ── FOOTER ── */ footer{ border-top: 2px solid var(--ink); padding: 20px clamp(20px,5vw,64px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background-image: var(--noise); transition: border-color .25s ease; } .footer-copy{ font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink2); } .no-ai-badge{ display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); border: 1px solid var(--rule); padding: 5px 10px; user-select: none; } .no-ai-badge svg{ width: 13px; height: 13px; flex-shrink: 0; } /* ── MOBILE RESPONSIVE ── */ @media(max-width:820px){ header{ display: flex; flex-direction: column; height: auto; min-height: 58px; padding: 0; } .logo-btn{ display: flex; justify-content: center; padding: 16px 0; width: 100%; border-bottom: 1px solid var(--rule); text-align: center; } .nav-wrap{ width: 100%; height: 48px; border-bottom: 1px solid var(--rule); } nav{ flex: 1; height: 100%; justify-content: center; } .nav-btn{ flex: 1; border-left: none; border-right: 1px solid var(--rule); height: 100%; padding: 0 4px; font-size: 0.62rem; justify-content: center; } .nav-btn:last-child{border-right:none} .nav-btn.active::before{display:none} .header-actions{ border-left: 1px solid var(--rule); flex-shrink: 0; padding-left: 6px; margin-left: 0; } .work-item{ grid-template-columns: 1fr; gap: 12px; padding: 22px 0; } .work-meta{ display: flex; align-items: center; gap: 12px; } .pg-head{flex-direction:column;gap:6px} .about-grid{grid-template-columns:1fr;} } /* ── MULTI-SELECT GENRE FILTERS ── */ .filter-wrap { display: flex; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; } @supports (container-type: inline-size) { .filter-wrap { container-type: inline-size; } @container (min-width: 700px) { .filter-wrap { justify-content: flex-start; } } } .filter-btn { background: none; border: none; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); cursor: pointer; padding: 4px 0; transition: color 0.2s ease; } .filter-btn:hover { color: var(--terra); } /* Shows a clean underline when a genre filter is toggled active */ .filter-btn.active { color: var(--terra); text-decoration: underline; text-underline-offset: 4px; } @media(max-width:820px){ .filter-wrap { justify-content: center; gap: 14px; margin-bottom: 24px; } } /* ── SYSTEM ARCHITECTURE UTILITIES ── */ .return-home-container { margin-top: 32px; } .bio-text .work-link-clean { font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink2); text-decoration: none !important; /* Forces layout tracking engines to kill native overrides */ display: inline-block; transition: color 0.2s ease; } .bio-text .work-link-clean:hover { color: var(--terra); text-decoration: none !important; } @media (prefers-reduced-motion: reduce) { .section { animation: none; } }