:root { --ink: #191917; --paper: #f0eee5; --acid: #d8ff36; --coral: #ff5e49; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", sans-serif; }
a { color: inherit; }
.page { min-height: 100svh; overflow: hidden; position: relative; }
.grain { pointer-events: none; position: fixed; inset: 0; z-index: 20; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.header { height: 84px; padding: 0 3.5vw; border-bottom: 1px solid rgba(25,25,23,.3); display: flex; align-items: center; justify-content: space-between; }
.wordmark { text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: -.06em; }
.wordmark span { color: #819d00; margin-left: 2px; }
.header p, .index { margin: 0; font: 500 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.intro { min-height: calc(100svh - 84px); padding: clamp(54px, 7vw, 105px) 3.5vw 44px; display: grid; grid-template-columns: 24% minmax(0, 1fr) 12%; position: relative; }
.intro-copy { align-self: center; max-width: 960px; }
h1 { font-size: clamp(88px, 14vw, 205px); line-height: .74; letter-spacing: -.08em; margin: 0 0 clamp(55px, 8vh, 105px); font-weight: 700; }
.lead { max-width: 880px; margin: 0; font-size: clamp(30px, 4.5vw, 68px); line-height: 1.03; letter-spacing: -.055em; }
.about { width: min(510px, 65%); margin: 40px 0 0 auto; font: 400 13px/1.65 "DM Mono", monospace; color: rgba(25,25,23,.68); }
.spark { color: var(--coral); font-size: clamp(38px, 6vw, 88px); align-self: start; justify-self: end; animation: spin 12s linear infinite; }
.projects { background: var(--ink); color: var(--paper); padding: clamp(64px, 8vw, 120px) 3.5vw; }
.projects-heading { margin-bottom: clamp(40px, 6vw, 90px); }
.projects h2 { margin: 0; color: var(--acid); font: 400 clamp(68px, 10vw, 150px)/.8 "Instrument Serif", serif; letter-spacing: -.055em; }
.project-card { display: grid; grid-template-columns: 1.15fr .85fr; border: 1px solid rgba(240,238,229,.3); text-decoration: none; transition: border-color .25s, transform .25s; }
.project-card + .project-card { margin-top: 28px; }
.project-card:hover, .project-card:focus-visible { border-color: var(--acid); transform: translateY(-4px); outline: none; }
.court { min-height: 300px; position: relative; overflow: hidden; background: var(--coral); }
.court-frame { position: absolute; inset: 8%; border: 2px solid var(--ink); }
.court-net, .court-service, .court-centre-service { position: absolute; display: block; background: var(--ink); }
.court-net { top: 8%; bottom: 8%; left: 50%; width: 3px; transform: translateX(-50%); box-shadow: 5px 0 0 rgba(25,25,23,.14); }
.court-service { top: 8%; bottom: 8%; width: 2px; }
.court-service-left { left: 20.8%; }
.court-service-right { right: 20.8%; }
.court-centre-service { left: 19.9%; right: 19.9%; top: 50%; height: 2px; transform: translateY(-50%); }
.ball { width: 58px; height: 58px; border-radius: 50%; background: var(--acid); color: var(--ink); display: grid; place-items: center; position: absolute; left: 27%; top: 25%; z-index: 2; font: 500 10px "DM Mono", monospace; box-shadow: 0 0 0 8px rgba(216,255,54,.17); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.project-card:hover .ball { transform: translate(24px, -14px) rotate(18deg); }
.project-copy { min-height: 300px; padding: clamp(34px, 4vw, 60px); display: flex; flex-direction: column; }
.project-label { margin: 0; font: 500 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: rgba(240,238,229,.56); }
.project-copy h3 { margin: 20px 0 0; font-size: clamp(58px, 7vw, 104px); line-height: .75; letter-spacing: -.07em; }
.project-card:not(.library-card) .project-copy h3 { font-size: clamp(42px, 5.2vw, 78px); white-space: nowrap; }
.project-copy h3 em { color: var(--acid); font-family: "Instrument Serif", serif; font-weight: 400; }
.project-details { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 8vw, 150px); align-items: end; padding: 30px clamp(30px, 4vw, 60px) 34px; border-top: 1px solid rgba(240,238,229,.3); }
.project-details > p { max-width: none; margin: 0; font: 400 13px/1.6 "DM Mono", monospace; color: rgba(240,238,229,.65); }
.project-link { min-width: 210px; display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(240,238,229,.35); font: 500 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.project-link b { font-size: 18px; font-weight: 400; }
.project-actions { min-width: min(100%, 310px); display: grid; gap: 14px; }
.project-actions .project-link { min-width: 0; text-decoration: none; }
.project-link-acid { color: var(--acid); }
.library-card { grid-template-columns: .85fr 1.15fr; }
.library-mark { min-height: 300px; position: relative; overflow: hidden; background: var(--acid); color: var(--ink); padding: clamp(28px, 4vw, 60px); display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; }
.library-mark span { display: block; border-bottom: 1px solid rgba(25,25,23,.55); padding-bottom: 8px; font: 500 10px "DM Mono", monospace; letter-spacing: .15em; }
.library-mark b { align-self: end; margin-top: auto; font-size: clamp(100px, 16vw, 240px); line-height: .66; letter-spacing: -.12em; font-weight: 800; white-space: nowrap; transform: translateX(8%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.library-card:hover .library-mark b { transform: translateX(2%); }
.library-card .project-copy { order: -1; }
.library-card .project-copy h3 em { color: var(--coral); }
.library-card .project-copy h3 { font-size: clamp(44px, 5.6vw, 84px); white-space: nowrap; }
footer { padding: 25px 3.5vw; display: flex; justify-content: space-between; font: 500 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 720px) {
  .header { height: 70px; padding: 0 20px; }
  .header p { font-size: 7px; }
  .intro { min-height: auto; padding: 42px 20px 74px; grid-template-columns: 1fr auto; }
  .intro > .index { grid-column: 1; }
  .intro-copy { grid-column: 1 / -1; margin-top: 90px; }
  h1 { font-size: clamp(82px, 26vw, 140px); margin-bottom: 70px; }
  .lead { font-size: clamp(34px, 10vw, 54px); }
  .about { width: 86%; margin-top: 34px; font-size: 11px; }
  .spark { grid-column: 2; grid-row: 1; font-size: 40px; }
  .projects { padding: 66px 20px; }
  .projects h2 { font-size: 82px; }
  .project-card { grid-template-columns: 1fr; }
  .court { min-height: 260px; }
  .ball { width: 48px; height: 48px; }
  .project-copy { min-height: 0; padding: 30px 26px 24px; }
  .project-copy h3 { font-size: 70px; }
  .project-card:not(.library-card) .project-copy h3 { font-size: clamp(36px, 10.5vw, 54px); }
  .library-card { grid-template-columns: 1fr; }
  .library-card .project-copy { order: 0; }
  .library-card .project-copy h3 { font-size: clamp(38px, 11vw, 58px); }
  .library-mark { min-height: 260px; }
  .project-details { grid-template-columns: 1fr; gap: 28px; padding: 26px; }
  .project-link { min-width: 0; width: 100%; }
  .project-actions { width: 100%; }
  footer { padding: 22px 20px; }
}