:root { color-scheme: light; --ink: #222321; --body: #575d52; --display: 'Clash Display', sans-serif; --sans: 'Nunito Sans', sans-serif; --mono: 'IBM Plex Mono', monospace; --ease: cubic-bezier(.22,1,.36,1); }
* { box-sizing: border-box; }
html { background: #fff; scrollbar-gutter: stable; }
body { margin: 0; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #222321; outline-offset: 7px; border-radius: 2px; }
.site { max-width: 1600px; min-height: 100svh; margin: auto; padding: 40px 64px; display: flex; flex-direction: column; }
.header { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex: none; position: relative; z-index: 5; }
.nav { display: flex; align-items: center; gap: 32px; font-size: 16px; line-height: 20px; color: #000; position:relative; }
.nav a { padding-bottom:4px; border-bottom:1px solid transparent; }
.nav::after { content:''; position:absolute; left:0; bottom:0; height:1px; width:var(--underline-width,0px); transform:translateX(var(--underline-x,0px)); background:var(--ink); pointer-events:none; }
.nav.is-ready::after { transition:transform .42s var(--ease),width .42s var(--ease); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; line-height: 16px; }
.back-link { font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; line-height: 20px; display: flex; gap: 5px; align-items: center; min-height: 44px; }
.back-link span { transition: transform .2s; }
.back-link:hover span { transform: translateX(-4px); }
main { min-width: 0; }
.intro { padding-top: 62px; }
h1, h2, p { margin: 0; }
.intro h1 { font-family: var(--display); font-weight: 700; font-size: 80px; line-height: 80px; color: #000; }
.intro p { font-size: 24px; font-weight: 500; line-height: 30px; color: #787878; margin-top: 18px; }
.touch-hint { display: none; }
.projects { width:100%; max-width:1312px; margin-inline:auto; padding-top:64px; padding-bottom:64px; }
.projects .intro { padding-top:0; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 36px; padding-top:48px; }
.project-card { min-width:0; transform-origin:center center; transition:opacity .34s ease,transform .45s var(--ease); }
@media(min-width:851px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .project-card.is-active { transform:scale(1.015); }
}
.project-grid.has-active .project-card:not(.is-active) { opacity:.2; }
.project-card:focus-visible { outline-offset:10px; }
.project-thumbnail { aspect-ratio:1; display:grid; place-items:center; position:relative; background:#f2f3f2; border-radius:2px; color:#737873; }
.project-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.project-thumbnail-bordered::after { content:""; position:absolute; inset:0; border:1px solid #e5e5e5; border-radius:inherit; pointer-events:none; }
.project-card h2 { font:600 28px/34px var(--display); margin-top:22px; }
.project-card p { font:400 18px/26px var(--sans); color:var(--body); margin-top:8px; }
.project-card .project-status { font-size:14px; line-height:20px; color:#888; }
@media(max-width:850px) { .projects { padding-top:60px; }.project-grid { gap:48px 24px; }.project-card h2 { font-size:24px; line-height:30px; }.project-card p { font-size:16px; line-height:24px; } }
@media(max-width:540px) { .project-grid { grid-template-columns:1fr; padding-top:36px; gap:40px; }.projects { padding-bottom:24px; } }
.record-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding-top: 86px; }
.record-card { display: block; min-width: 0; text-align: left; transition: opacity .34s ease; position: relative; }
.record-grid.has-active .record-card:not(.is-active) { opacity: .2; }
.record-card:focus-visible { outline-offset: 12px; }
.record-stage { display: block; position: relative; width: 100%; aspect-ratio: 240 / 246; }
.sleeve { position: absolute; width: 90.833333%; aspect-ratio: 1; bottom: -6px; left: 4.583333%; z-index: 2; container-type: inline-size; }
.sleeve-shadow { position: absolute; inset: 7.3394% .9174% 7.3394%; box-shadow: 0 10px 18px 1px #1c1a1852; }
.sleeve-shadow::after { content: ''; position: absolute; top: 81.7204%; left: 0; right: 0; height: 21.5054%; box-shadow: 0 7px 13px #17151240; }
.sleeve:not(.symphony) .sleeve-shadow { box-shadow:0 5.5cqw 11cqw 1.4cqw #1c1a186b,0 2.3cqw 4.6cqw .45cqw #1c1a1829; }
.sleeve:not(.symphony) .sleeve-shadow::after { box-shadow:0 4.6cqw 8.3cqw .45cqw #17151252; }
/* An SVG silhouette keeps the 2px corners on the subtly leaning sleeve. */
.sleeve-surface { width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.sleeve-print { position:absolute; inset:0; transform-origin:0 0; }
/* Keep small live text out of the perspective-composited logo layer to avoid
   clipped glyphs. This local 2D projection follows the sleeve at label height. */
.sleeve .volume { position: absolute; left: 8.8336%; top: 7.1757%; transform: matrix(.98297,0,-.00755,.98429,0,0); transform-origin: 0 0; color: #fff; font-family: var(--mono); font-size: 5.0458cqw; line-height: 1.2727; letter-spacing: .05em; white-space: nowrap; }
.sleeve.symphony .volume { color: #33372e; }
.cover-logo { position: absolute; background-repeat: no-repeat; background-size: cover; background-position: center; }
.canva .cover-logo { width: 64.679%; height: 20.183%; left: 15.596%; top: 39.908%; background-image: url('/assets/canva.png'); background-size: contain; background-position: 96.941%; }
.conveyancing .cover-logo { width: 57.339%; height: 56.88%; left: 19.725%; top: 26.147%; background-image: url('/assets/conveyancing.png'); }
.vml .cover-logo { width: 72.018%; height: 72.018%; left: 14.679%; top: 18.349%; background-image: url('/assets/vml.png'); }
.ticketek .cover-logo { width: 82.568%; height: 24.312%; left: 8.716%; top: 40.826%; background-image: url('/assets/ticketek.png'); background-size: 140%; background-position: 50.877% 49.88%; }
.symphony .cover-logo { width: 81.193%; height: 24.771%; left: 10.092%; top: 42.202%; background-image: url('/assets/symphony.png'); }
.record-stage > .record { position: absolute; width: 82.91667%; left: 8.54167%; bottom: 0; z-index: 1; transform: translateY(0); transition: transform .65s var(--ease); }
.record-card.is-active .record-stage > .record { transform: translateY(-22%); }
.shelf { display:block; position:relative; aspect-ratio:240 / 28; z-index:1; filter:drop-shadow(0 3px 2px #51402e20) drop-shadow(0 14px 12px #3b302c26); }
.shelf-wood { display:block; width:100%; height:100%; overflow:visible; }
.caption { display: flex; flex-direction: column; gap: 5px; padding-top: 20px; }
.caption strong { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 22px; overflow-wrap: anywhere; }
.caption small { font-size: 14px; line-height: 18px; color: #565951; }
.social-links { display:flex; align-items:center; flex-shrink:0; }
.social { display:grid; place-items:center; width:44px; height:44px; color:#111; transition:color .18s ease; }
.social svg { width:20px; height:20px; fill:currentColor; }
.social:focus-visible { color:#666; }
@media(hover:hover) { .social:hover { color:#666; } }
.record { display: block; aspect-ratio: 1; border-radius: 50%; container-type: inline-size; background: #242824; box-shadow: 0 1px 2px #0004; }
.record-art { position: absolute; inset: 0; border-radius: inherit; background: repeating-radial-gradient(circle at center, transparent 0 1.8%, #656b614d 1.87% 2.04%, transparent 2.14% 2.85%), radial-gradient(circle, #333633 0%, #171b19 56%, #30342e 100%); }
.record-art::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -20deg, transparent 0deg, #ffffff13 12deg, transparent 37deg, transparent 165deg, #ffffff0e 181deg, transparent 211deg); }
.record-label { position:absolute; inset:34%; border-radius:50%; overflow:hidden; z-index:1; }
.record-label img { display:block; width:100%; height:100%; border-radius:inherit; }
/* Clip the image fringe and fill the edge with the matching label colour. */
.record:not(.canva) .record-label { background:var(--label-colour); }
.record:not(.canva) .record-label img { clip-path:circle(calc(50% - 1px)); }
.record-art.is-spinning { animation: turn 4s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
.record-art.is-paused { animation-play-state: paused; }
.chapter { display: grid; grid-template-columns: minmax(0,638fr) minmax(0,604fr); gap: 70px; min-height: calc(100svh - 124px); align-items: start; padding-top: 64px; padding-bottom: 64px; }
.player-column { min-width: 0; padding-top: 50px; align-self: center; }
.turntable { width: 100%; aspect-ratio: 638 / 480; position: relative; border-radius: 12px; background: linear-gradient(160deg,#f4f4f1,#e8e8e4); border: 1px solid #e1e1dd; box-shadow: 0 2px 0 #cececa,0 5px 0 #ededeb,0 24px 36px -22px #0005; }
.turntable::before,.turntable::after { content: ''; position: absolute; width: 11%; height: 10px; background: #333; border-radius: 0 0 5px 5px; bottom: -10px; z-index: -1; }
.turntable::before { left: 10%; }.turntable::after { right: 10%; }
.platter { position: absolute; width: 69%; aspect-ratio: 1; left: 5%; top: 7%; border-radius: 50%; background: repeating-radial-gradient(circle,#484b47 0 1px,#bdc0b7 1px 2px,#333631 3px 4px); box-shadow: 0 3px 8px #0004; }
.player-record { position: absolute; inset: 3%; }
.spindle { position: absolute; width: 1.5%; aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: linear-gradient(120deg,#fff,#90968b); box-shadow: 1px 1px 2px #0008; z-index: 3; }
.tonearm { position: absolute; left: 87%; top: 15%; width: 5%; height: 62%; transform-origin: 50% 6%; transform: rotate(3deg); transition: transform .85s var(--ease); z-index: 4; pointer-events: none; }
.tonearm.engaged { transform: rotate(29deg); }
.tonearm-pivot { position: absolute; top: -3%; left: -35%; width: 170%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#c3c6be 0 17%,#5e625b 18% 27%,#b7bbb1 28% 42%,#42463e 43% 65%,#b8bcb2 66%); box-shadow: 1px 2px 5px #0003; }
.tonearm-shaft { position: absolute; top: 6%; left: 36%; width: 28%; height: 76%; border-radius: 3px; background: linear-gradient(90deg,#7b8077,#fafbf7 45%,#b8bcb3 67%,#5e6558); box-shadow: 3px 2px 3px #0003; }
.tonearm-head { position: absolute; bottom: 2%; left: 15%; height: 20%; width: 75%; border-radius: 2px 2px 5px 5px; background: linear-gradient(90deg,#282b27,#4a4f45 65%,#242721); transform: rotate(-15deg); box-shadow: 2px 3px 3px #0005; }
.tonearm-head::after { content:''; position:absolute; width:10%; height:30%; background:#b3b6ad; right:-16%; top:10%; transform:rotate(-30deg); }
.deck-brand { position: absolute; bottom: 7%; right: 7%; font-family: var(--mono); font-size: clamp(8px,.75vw,11px); letter-spacing: .12em; color:#777d70; }
.deck-speed { position:absolute; right:8%; bottom:20%; font-family:var(--mono); font-size:clamp(9px,1vw,13px); color:#74796f; }
.turntable { container-type:inline-size; }
.player-controls { position:absolute; bottom:4%; left:4%; display:flex; align-items:center; gap:clamp(5px,1cqw,7px); }
.play-toggle { position:relative; flex:none; width:clamp(24px,7cqw,44px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#fff,#d0d2ca); border:1px solid #c6c9bf; box-shadow:0 2px 3px #0002; }
/* Keep a generous touch target while the visible hardware scales with the deck. */
.play-toggle::after { content:''; position:absolute; left:50%; top:50%; width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%); }
.play-toggle svg { width:35%; height:35%; fill:#363a31; }
.play-toggle:hover { filter:brightness(1.03); }
.power-light { flex:none; width:clamp(3px,.8cqw,5px); aspect-ratio:1; background:#b1b5a9; border-radius:50%; }
.turntable.is-playing .power-light { background:#689b5d; box-shadow:0 0 4px #689b5d70; }
.player-caption { display:flex; align-items:center; justify-content:space-between; padding:30px 3px 0; gap:16px; font-size:12px; color:#70756a; }
.playing-status { display:flex; align-items:center; gap:9px; }
.equalizer { width:13px; height:13px; display:flex; gap:2px; align-items:center; }
.equalizer i { width:3px; height:3px; background:currentColor; }
.is-playing + .player-caption .equalizer i { animation: levels .8s ease-in-out infinite alternate; }
.equalizer i:nth-child(2) { animation-delay:-.3s !important; }.equalizer i:nth-child(3) { animation-delay:-.6s !important; }
@keyframes levels { to { height:12px; } }
.chapter-copy { min-width: 0; }
.eyebrow { color:#61665b; margin-bottom:17px; }
.chapter-copy h1 { font:700 95px/.99 var(--display); letter-spacing:-.03em; overflow-wrap:anywhere; margin-bottom:24px; }
.chapter-copy h1.long-name { font-size:clamp(34px,4.15vw,64px); line-height:1.05; }
.chapter-tagline { font-size:21px; line-height:30px; font-weight:500; }
.metadata { margin:24px 0; display:flex; gap:48px; padding:19px 0; border-top:1px solid #c9c9bf; border-bottom:1px solid #c9c9bf; }
.metadata div { display:flex; flex-direction:column; gap:7px; }
.metadata dt { font:12px/16px var(--mono); color:#61665b; }
.metadata dd { margin:0; font:600 14px/18px var(--sans); }
.chapter-body { color:#575d52; font-size:17px; line-height:26px; }
.chapter-body p + p { margin-top:26px; }
.chapter-next { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #e4e5e1; margin-top:38px; padding-top:22px; font-size:14px; gap:20px; min-height:50px; }
.chapter-next span:first-child { display:flex; flex-direction:column; gap:5px; }
.chapter-next small { font-family:var(--mono); font-size:10px; color:#777c70; letter-spacing:.05em; }
.chapter-next .arrow { font-size:24px; transition: transform .2s; }
.chapter-next:hover .arrow { transform: translateX(4px); }
.flying-record { position:fixed; z-index:20; pointer-events:none; transform-origin:0 0; margin:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:100; background:white; padding:12px; }
.skip-link:focus { top:10px; }
.no-script { padding:40px 64px; }
@media(min-width:1500px) { .record-grid { gap:36px; } }
@media(max-width:1100px) {
  .site { padding:32px; }.record-grid { gap:20px; }.caption strong { font-size:16px; line-height:20px; }.chapter { gap:40px; }.chapter-copy h1 { font-size:76px; }.metadata { gap:24px; }.player-column { padding-top:0; }.intro p { font-size:22px; }.deck-brand { font-size:9px; }
}
@media(max-width:850px) {
  .record-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:60px 32px; padding-top:70px; }.intro h1 { font-size:68px; line-height:1; }.intro p { max-width:620px; }.chapter { grid-template-columns:1fr; gap:50px; max-width:650px; margin:auto; padding-top:50px; }.player-column { width:100%; max-width:560px; margin:auto; }.chapter-copy h1 { font-size:80px; }.chapter-copy h1.long-name { font-size:56px; }.caption strong { font-size:18px; }.deck-brand { font-size:11px; }
}
@media(max-width:540px) {
  .site { padding:25px 24px; }.header { gap:12px; height:42px; }.nav { gap:20px; font-size:14px; }.intro { padding-top:60px; }.intro h1 { font-size:56px; line-height:1.04; letter-spacing:-.02em; }.intro p { font-size:20px; line-height:28px; margin-top:17px; }.record-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:58px 22px; padding-top:38px; }.touch-hint { display:flex; gap:8px; align-items:center; padding-top:38px; font-size:12px; color:#787878; }.caption { padding-top:16px; gap:4px; }.caption strong { font-size:15px; line-height:19px; }.caption small { font-size:12px; line-height:17px; }.shelf { min-height:10px; }.record-stage > .record { bottom:1px; }.sleeve { bottom:-4px; }.sleeve .volume { font-size:5.4cqw; }.back-link { font-size:13px; max-width:185px; }.chapter { padding-top:43px; padding-bottom:20px; gap:42px; }.chapter-copy h1 { font-size:66px; margin-bottom:20px; }.chapter-copy h1.long-name { font-size:41px; }.chapter-tagline { font-size:20px; line-height:28px; }.metadata { gap:24px; justify-content:space-between; }.metadata div { max-width:58%; }.chapter-body { font-size:16px; line-height:26px; }.player-caption { padding-top:25px; font-size:10px; }.deck-brand { font-size:8px; }.deck-speed { font-size:10px; }.turntable { border-radius:8px; }.eyebrow { font-size:11px; }
}
@media(max-width:540px) {
  .record-card[data-chapter="conveyancing"] .caption { container-type:inline-size; }
  .record-card[data-chapter="conveyancing"] .caption strong { font-size:min(15px,8.6cqw); white-space:nowrap; }
}
@media(max-width:360px) {
  .site { padding:24px 18px; }.nav { gap:14px; font-size:13px; }.intro h1 { font-size:50px; }.record-grid { gap:50px 20px; }.caption strong { font-size:14px; }.back-link { font-size:12px; }.chapter-copy h1.long-name { font-size:36px; }
}

@media(max-width:850px) {
  html { scroll-padding-top:110px; }
  .site { --header-gutter:32px; --header-top:32px; padding-top:0; }
  .header { position:sticky; top:0; z-index:30; height:auto; margin:0 calc(-1 * var(--header-gutter)) -16px; padding:max(var(--header-top), env(safe-area-inset-top)) var(--header-gutter) 16px; background:#fff; }
}
@media(max-width:540px) { .site { --header-gutter:24px; --header-top:25px; } }
@media(max-width:360px) { .site { --header-gutter:18px; --header-top:24px; } }
@media(min-width:851px) {
  main:has(> .collection:not([hidden])) { display:flex; align-items:center; flex:1; padding-block:48px; }
  .collection { width:100%; max-width:1312px; margin-inline:auto; }
  .site:has(.collection:not([hidden]), .projects:not([hidden])) .header { width:100%; max-width:1312px; margin-inline:auto; }
  .intro { padding-top:0; text-align:left; }
  .intro p { margin-inline:auto; }
  .player-column { padding-top:0; align-self:start; }
}
/* Scale the domain title to its own text column, including the stacked mobile layout. */
.chapter-copy[data-chapter="conveyancing"] { container-type:inline-size; }
.chapter-copy[data-chapter="conveyancing"] h1 { font-size:min(52px,8.6cqw); line-height:1.1; white-space:nowrap; }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.001ms !important; }
  .record-art.is-spinning:not(.motion-opt-in) { animation:none; }
  .equalizer i { animation:none !important; }
}