/*
  JAMIE MAPES — PORTFOLIO STYLES
  ----------------------------------------------
  Edit design tokens in :root to update colours and spacing site-wide.

  Main visual areas:
    .mast              Sticky navigation
    .hero              Introduction and video feature
    .chapter           Main portfolio sections
    .discipline        Group of experience entries
    .work-item         Clickable experience row
    .education-explorer / .tabs / .tab-panel  Education selector
    .overlay / .dialog Detail popup
    .collection-*      Original music and DJ event catalogues

  To add a new experience or section, follow the instructions in index.html.
  Existing rules are preserved in their original cascade order to avoid
  accidentally changing the established design.
*/

:root {
  color-scheme:dark;
  --bg:#0c0b10;
  --surface:#14121c;
  --surface2:#1c1927;
  --stroke:#332e41;
  --text:#f5f3f9;
  --muted:#b9b3c6;
  --faint:#8d879b;
  --purple:#bda4fa;
  --purple2:#9474e4;
  --paper:#17151e;
  --radius:16px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  position:relative;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}

main.container {
  position:relative;
  z-index:1
}

.ambient-field {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none
}

.ambient-blob {
  position:absolute;
  display:block;
  border-radius:50%;
  background:radial-gradient(circle,rgba(143,99,220,.58) 0,rgba(103,62,180,.24) 42%,transparent 72%);
  filter:blur(24px);
  opacity:.12;
  will-change:transform;
  animation:ambientDrift 19s ease-in-out infinite
}

.ambient-blob-one {
  width:330px;
  height:330px;
  top:21%;
  right:-155px
}

.ambient-blob-six {
  width:285px;
  height:285px;
  top:2.8%;
  right:4.5%;
  opacity:.085;
  animation-duration:23s;
  animation-delay:-9s
}

.ambient-blob-two {
  width:390px;
  height:390px;
  top:48%;
  left:-205px;
  opacity:.085;
  animation-duration:24s;
  animation-delay:-7s
}

.ambient-blob-three {
  width:350px;
  height:350px;
  top:70%;
  right:-175px;
  opacity:.1;
  animation-duration:22s;
  animation-delay:-13s
}

.ambient-blob-four {
  width:245px;
  height:245px;
  top:34%;
  left:12%;
  opacity:.065;
  animation-duration:27s;
  animation-delay:-4s
}

.ambient-blob-five {
  width:275px;
  height:275px;
  top:60%;
  right:14%;
  opacity:.07;
  animation-duration:25s;
  animation-delay:-16s
}

@keyframes ambientDrift {
  0%,100% { transform:translate3d(0,0,0) scale(1) }
  50% { transform:translate3d(12px,-18px,0) scale(1.05) }
}

button,a {
  font:inherit
}

a {
  color:inherit;
  text-decoration:none
}

button {
  cursor:pointer;
  color:inherit
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--purple);
  outline-offset:4px
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  line-height:1.16;
  letter-spacing:-.035em
}

h1 {
  font-size:clamp(3rem,6vw,5.8rem);
  font-weight:750
}

h2 {
  font-size:clamp(1.7rem,3.2vw,2.8rem)
}

h3 {
  font-size:1.15rem
}

small,.small {
  font-size:.82rem
}

.muted {
  color:var(--muted)
}

.dim {
  color:var(--faint)
}

.eyebrow {
  font-size:.76rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:750;
  color:var(--purple)
}

.tag {
  display:inline-block;
  border:1px solid var(--stroke);
  border-radius:30px;
  padding:4px 10px;
  font-size:.75rem;
  color:#d7d0e0
}

.link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--purple);
  font-weight:650
}

.link:hover {
  text-decoration:underline
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid var(--stroke);
  border-radius:9px;
  padding:10px 16px;
  background:transparent;
  font-weight:650
}

.button:hover {
  border-color:var(--purple)
}

.button.primary {
  background:var(--purple);
  color:#181020;
  border-color:var(--purple)
}

.button.primary:hover {
  background:#d0bbff
}

.divider {
  height:1px;
  background:var(--stroke)
}

.disclosure {
  border-top:1px solid var(--stroke)
}

.disclosure:last-child {
  border-bottom:1px solid var(--stroke)
}

.disclosure summary {
  list-style:none;
  cursor:pointer;
  padding:20px 0;
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:space-between
}

.disclosure summary::-webkit-details-marker {
  display:none
}

.disclosure summary:hover h3,.disclosure summary:hover .entry-name {
  color:var(--purple)
}

/* Level 4–6 expansion is deferred; remove with the matching script block to restore it. */
.disclosure.is-deferred summary {
  cursor:default
}

.disclosure.is-deferred summary:hover .entry-name {
  color:inherit
}

.chevron {
  color:var(--purple);
  transition:transform .2s;
  font-size:1.2rem
}

.disclosure[open] .chevron {
  transform:rotate(45deg)
}

.detail {
  padding:0 0 22px;
  color:var(--muted)
}

.detail p {
  max-width:760px
}

.detail ul {
  padding-left:20px;
  margin-bottom:18px
}

.detail li {
  margin-bottom:6px
}

.media-placeholder {
  border:1px dashed #55496e;
  border-radius:12px;
  padding:20px;
  display:flex;
  gap:14px;
  align-items:center;
  color:#c8bddc;
  background:rgba(189,164,250,.035);
  font-size:.9rem
}

.media-symbol {
  font-size:1.6rem;
  color:var(--purple)
}

.tabs {
  display:inline-flex;
  border:1px solid var(--stroke);
  border-radius:10px;
  padding:4px;
  gap:4px;
  background:#0e0c13
}

.tab {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px 14px;
  border-radius:7px;
  font-weight:650;
  transition:background .24s ease,color .24s ease,transform .24s ease,box-shadow .24s ease
}

.tab[aria-selected="true"] {
  background:#3c2d59;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(0,0,0,.22)
}

.tab-panel[hidden] {
  display:none
}

.entry-meta {
  font-size:.77rem;
  color:var(--muted)
}

.entry-name {
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.015em
}

.entry-sub {
  font-size:.89rem;
  color:var(--muted);
  margin:5px 0 0;
  max-width:680px
}

.level-note {
  font-size:.84rem;
  color:var(--faint);
  margin:10px 0 22px
}

.overlay {
  position:fixed;
  inset:0;
  z-index:100;
  background:#07060ac9;
  display:grid;
  place-items:center;
  padding:20px;
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility 0s linear .25s
}

.overlay.open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s
}

.dialog {
  width:min(690px,100%);
  max-height:88vh;
  overflow-y:auto;
  background:#191621;
  border:1px solid #51445f;
  border-radius:18px;
  padding:35px;
  position:relative;
  box-shadow:0 30px 100px #0009;
  opacity:0;
  transform:translateY(14px) scale(.975);
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.75,.25,1)
}

.overlay.open .dialog {
  opacity:1;
  transform:none
}

.dialog-close {
  position:absolute;
  right:18px;
  top:16px;
  background:#292337;
  border:1px solid #42374e;
  color:white;
  border-radius:8px;
  padding:3px 12px;
  font-size:1.4rem
}

.dialog h2 {
  padding-right:30px
}

.dialog .eyebrow {
  margin-bottom:10px
}

.dialog p {
  color:var(--muted)
}

.dialog li {
  margin:6px 0
}

.dialog ul {
  padding-left:20px
}

.dialog .media-placeholder {
  margin-top:18px
}

.site-note {
  font-size:.82rem;
  color:var(--faint)
}

.interactive-marker {
  color:var(--purple);
  font-size:.8rem;
  font-weight:700;
  white-space:nowrap
}

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

/* VERSION A: editorial portfolio */
.container {
  width:min(1160px,calc(100% - 64px));
  margin:auto
}

.mast {
  position:sticky;
  top:0;
  z-index:30;
  background:#0c0b10ed;
  border-bottom:1px solid var(--stroke);
  backdrop-filter:blur(12px)
}

.mast-progress {
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  z-index:2;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--purple2),var(--purple),#e1d5ff);
  box-shadow:0 0 12px rgba(189,164,250,.55)
}

.mast-in {
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand {
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.045em
}

.brand span {
  color:var(--purple)
}

.mast nav {
  display:flex;
  gap:24px;
  font-size:.88rem;
  color:var(--muted)
}

.mast nav a:hover {
  color:var(--purple)
}

.hero {
  padding:85px 0 72px;
  border-bottom:1px solid var(--stroke);
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:65px;
  align-items:end
}

.hero h1 {
  margin:18px 0 24px
}

.hero .lead {
  font-size:1.16rem;
  max-width:680px;
  color:var(--muted);
  line-height:1.8
}

.hero .actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:28px
}

.video-card {
  background:linear-gradient(145deg,#272136,#17141f);
  border:1px solid #453858;
  border-radius:18px;
  min-height:320px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.75,.25,1),border-color .35s ease,box-shadow .35s ease
}

.video-card:before {
  content:"";
  position:absolute;
  width:270px;
  height:270px;
  border:1px solid #7b62a344;
  border-radius:50%;
  right:-65px;
  top:-100px;
  box-shadow:0 0 0 38px #7b62a31b,0 0 0 80px #7b62a30f;
  transition:transform .55s cubic-bezier(.2,.75,.25,1),opacity .35s ease
}

.video-card:hover,.video-card:focus-within {
  transform:translateY(-4px);
  border-color:#755e96;
  box-shadow:0 22px 55px rgba(0,0,0,.25)
}

.video-card:hover:before,.video-card:focus-within:before {
  transform:translate(-8px,8px) scale(1.03);
  opacity:.85
}

.video-card>* {
  position:relative
}

.video-card h2 {
  font-size:1.8rem;
  margin:0 0 12px
}

.video-card p {
  color:#c9bfda;
  font-size:.95rem;
  margin:0 0 20px
}

.playbtn {
  width:max-content;
  display:flex;
  align-items:center;
  gap:10px;
  background:#bda4fa;
  color:#130d1c;
  border:0;
  border-radius:10px;
  padding:11px 16px;
  font-weight:700
}

.project-preview {
  --identity-reveal:100%;
  --identity-progress:0%;
  --identity-blob-left:-38px;
  --identity-blob-size:190px;
  --identity-blob-blur:32px;
  --identity-blob-opacity:.16;
  --identity-handle-opacity:0;
  grid-column:1/-1;
  min-height:190px;
  margin-top:2px;
  overflow:visible;
  position:relative;
  background:linear-gradient(110deg,#181521 0%,#211a2f 58%,#2c2141 100%);
  border:1px solid #493b5f;
  border-radius:18px
}

.identity-layer {
  min-height:190px;
  padding:30px 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  border-radius:inherit;
  overflow:hidden
}

.identity-origin-blob {
  position:absolute;
  z-index:5;
  left:var(--identity-blob-left);
  top:50%;
  width:var(--identity-blob-size);
  height:var(--identity-blob-size);
  border-radius:58% 42% 52% 48% / 45% 57% 43% 55%;
  background:radial-gradient(circle at 42% 45%,rgba(181,145,246,.58) 0 6%,rgba(126,82,201,.3) 38%,rgba(91,52,158,.1) 66%,transparent 78%);
  box-shadow:0 7px 42px rgba(92,55,157,.16);
  filter:blur(var(--identity-blob-blur));
  opacity:var(--identity-blob-opacity);
  transform:translate(-50%,-50%) rotate(-12deg);
  will-change:left,width,height,filter,opacity,transform;
  pointer-events:none
}

.identity-jamie {
  background:linear-gradient(110deg,#16141d 0%,#201b28 65%,#28202f 100%)
}

.identity-dodge {
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(110deg,#191522 0%,#2a203b 58%,#3a2858 100%);
  clip-path:inset(0 var(--identity-reveal) 0 0);
  will-change:clip-path
}

.identity-dodge:after {
  content:"";
  width:220px;
  height:220px;
  position:absolute;
  right:55px;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(189,164,250,.13);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(189,164,250,.045),0 0 0 68px rgba(189,164,250,.025)
}

.identity-unlock {
  position:absolute;
  z-index:4;
  left:clamp(8px,var(--identity-progress),calc(100% - 23px));
  top:50%;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(245,243,249,.48);
  border-radius:50%;
  color:#191120;
  background:var(--purple);
  box-shadow:0 8px 25px rgba(0,0,0,.28),0 0 0 5px rgba(189,164,250,.1);
  transform:translate(-50%,-50%);
  opacity:var(--identity-handle-opacity);
  will-change:left
}

.identity-unlock:before {
  content:"";
  position:absolute;
  left:50%;
  top:-80px;
  width:1px;
  height:206px;
  background:linear-gradient(transparent,rgba(218,202,255,.8),transparent)
}

.identity-unlock span {
  position:relative;
  z-index:1;
  font-size:1.2rem;
  font-weight:800;
  line-height:1
}

.project-preview.is-identity-unlocked .identity-unlock {
  opacity:0
}

.project-preview-copy {
  position:relative;
  z-index:1
}

.project-preview h2 {
  margin:10px 0 8px;
  font-size:clamp(1.65rem,3vw,2.55rem)
}

.project-preview h2 span {
  color:var(--purple)
}

.project-preview p {
  max-width:650px;
  margin:0;
  color:var(--muted)
}

.project-preview-mark {
  flex:0 0 auto;
  position:relative;
  z-index:1;
  color:rgba(245,243,249,.92);
  font-size:5rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.08em;
  animation:dodgeFloat 7s ease-in-out infinite
}

.identity-personal-mark {
  color:rgba(189,164,250,.34);
  font-size:3.1rem;
  letter-spacing:-.07em;
  animation:none
}

@media(prefers-reduced-motion:reduce) {
  .identity-dodge {
    clip-path:none
  }
  .identity-unlock {
    display:none
  }
  .identity-origin-blob {
    display:none
  }
}

@keyframes dodgeFloat {
  0%,100% { transform:translateY(0) rotate(0) }
  50% { transform:translateY(-7px) rotate(1.5deg) }
}

.chapter {
  padding:78px 0;
  display:grid;
  grid-template-columns:250px 1fr;
  gap:58px;
  border-bottom:1px solid var(--stroke);
  scroll-margin-top:85px;
  position:relative;
  isolation:isolate;
  transition:border-color .45s ease,box-shadow .45s ease
}

.chapter.is-in-view {
  border-bottom-color:rgba(189,164,250,.34);
  box-shadow:0 18px 26px -30px rgba(189,164,250,.7)
}

.chapter-head {
  position:sticky;
  top:104px;
  align-self:start;
  isolation:isolate
}

.chapter-head::before {
  content:attr(data-chapter);
  position:absolute;
  z-index:0;
  top:-43px;
  left:-12px;
  color:rgba(189,164,250,.055);
  font-size:clamp(5.5rem,9vw,8rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.08em;
  pointer-events:none
}

.chapter-head>* {
  position:relative;
  z-index:1
}

.chapter-head .eyebrow {
  margin-bottom:15px
}

.chapter-head h2 {
  margin-bottom:14px
}

.chapter-head p {
  color:var(--muted);
  font-size:.94rem
}

.chapter-content {
  min-width:0
}

.discipline {
  padding:0 0 31px;
  margin-bottom:38px;
  border-bottom:1px solid var(--stroke)
}

.discipline:last-child {
  margin-bottom:0;
  border-bottom:0;
  padding-bottom:0
}

.discipline h3 {
  font-size:1.45rem;
  margin-bottom:8px
}

.discipline>h3 {
  position:sticky;
  top:var(--mast-height,72px);
  z-index:8;
  margin-top:-12px;
  padding:12px 0 10px;
  background:var(--bg);
  box-shadow:0 12px 18px -20px #000;
  transition:color .2s ease,box-shadow .2s ease
}

.discipline>h3:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:46px;
  height:2px;
  background:var(--purple);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease
}

.discipline.is-current>h3 {
  color:var(--purple);
  box-shadow:0 14px 20px -20px rgba(189,164,250,.7)
}

.discipline.is-current>h3:after {
  transform:scaleX(1)
}

.motion-enabled .reveal-on-scroll {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease var(--reveal-delay,0ms),transform .55s cubic-bezier(.22,.8,.25,1) var(--reveal-delay,0ms)
}

.motion-enabled .reveal-on-scroll.is-visible {
  opacity:1;
  transform:translateY(0)
}

.discipline>p {
  color:var(--muted);
  font-size:.95rem
}

.work-item {
  padding:19px 0;
  border-bottom:1px solid #2b2635;
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:space-between
}

.work-item:last-child {
  border-bottom:0
}

.work-left {
  display:flex;
  gap:20px;
  align-items:flex-start
}

.entry-index {
  font-size:.82rem;
  color:#817196;
  margin-top:5px;
  min-width:24px
}

.work-item h3 {
  font-size:1.08rem;
  margin:2px 0 7px
}

.work-item p {
  font-size:.91rem;
  color:var(--muted);
  margin:0;
  max-width:650px
}

.work-meta {
  font-size:.76rem;
  color:var(--purple);
  font-weight:650
}

.work-open {
  background:transparent;
  border:0;
  color:var(--purple);
  font-size:.86rem;
  white-space:nowrap;
  font-weight:700;
  padding:10px
}

.work-open:hover {
  text-decoration:underline
}

.small-list {
  list-style:none;
  margin:0;
  padding:0
}

.small-list li {
  padding:16px 0;
  border-bottom:1px solid var(--stroke);
  display:flex;
  justify-content:space-between;
  gap:12px
}

.small-list li span {
  color:var(--muted);
  font-size:.91rem;
  text-align:right
}

.footer {
  padding:48px 0 52px
}

.footer p {
  color:var(--muted)
}

.portfolio-end {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding-top:30px
}

.portfolio-end .eyebrow {
  margin:0 0 11px;
  color:var(--faint)
}

.portfolio-credit {
  margin:0;
  font-size:.88rem;
  letter-spacing:.015em
}

.portfolio-credit span {
  display:inline-block;
  margin:0 7px;
  color:#62576f
}

.back-to-top {
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  color:var(--muted);
  font-size:.86rem;
  transition:color .2s ease,transform .2s ease
}

.back-to-top span {
  color:var(--purple);
  transition:transform .2s ease
}

.back-to-top:hover,.back-to-top:focus-visible {
  color:var(--text);
  transform:translateY(-2px)
}

.back-to-top:hover span,.back-to-top:focus-visible span {
  transform:translateY(-2px)
}

.education-title {
  font-size:1.3rem;
  margin-bottom:4px
}

.education-sub {
  color:var(--muted)
}

.module-area {
  margin-top:25px
}

.module-area .disclosure summary {
  padding:18px 0
}

.module-area .detail {
  padding-bottom:20px
}

@media(max-width:900px) {
  .hero {
    grid-template-columns:1fr;
    gap:30px
  }
  .chapter {
    grid-template-columns:1fr;
    gap:22px
  }
  .chapter-head {
    position:relative;
    top:auto
  }
  .mast nav {
    gap:14px
  }
  .container {
    width:min(1160px,calc(100% - 36px))
  }
}

@media(max-width:600px) {
  .mast nav a:nth-child(2),.mast nav a:nth-child(3) {
    display:none
  }
  .hero {
    padding:55px 0
  }

  .project-preview {
    min-height:0;
    padding:0
  }

  .identity-layer {
    min-height:170px;
    padding:24px
  }

  .project-preview-mark {
    font-size:3.25rem
  }
  .chapter {
    padding:55px 0
  }
  .work-item {
    align-items:flex-start;
    flex-direction:column;
    gap:6px
  }
  .work-open {
    padding:0 0 8px 43px
  }
  .hero h1 {
    font-size:3.5rem
  }
}

.semester-heading {
  margin:24px 0 4px;
  color:var(--purple);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.11em
}

.education-extra {
  margin-top:40px;
  padding-top:27px;
  border-top:1px solid var(--stroke)
}

.education-extra h3 {
  font-size:1.28rem;
  margin-bottom:18px
}

.qualification {
  padding:13px 0;
  border-bottom:1px solid var(--stroke);
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 22px
}

.qualification strong {
  font-size:.93rem
}

.qualification span {
  color:var(--muted);
  font-size:.86rem;
  text-align:right
}

.qualification p {
  grid-column:1/-1;
  color:var(--muted);
  font-size:.9rem;
  margin:3px 0 0
}

.contact-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.contact-closing-note {
  display:grid;
  grid-template-columns:145px minmax(0,620px);
  gap:30px;
  margin-top:clamp(70px,10vh,115px);
  padding-top:25px;
  border-top:1px solid rgba(189,164,250,.18)
}

.contact-closing-note .eyebrow {
  margin:3px 0 0;
  color:var(--faint)
}

.contact-closing-note>p:last-child {
  margin:0;
  color:var(--muted);
  font-size:.97rem;
  line-height:1.75
}

.contact-scope {
  position:absolute;
  left:308px;
  right:0;
  bottom:44px;
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  gap:30px;
  align-items:center;
  min-height:72px;
  padding:17px 105px 17px 0;
  overflow:hidden;
  border-top:1px solid rgba(189,164,250,.16);
  border-bottom:1px solid rgba(189,164,250,.1)
}

.contact-scope::after {
  content:"JM";
  position:absolute;
  right:16px;
  top:50%;
  color:rgba(189,164,250,.065);
  font-size:4.4rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.1em;
  transform:translateY(-50%);
  pointer-events:none
}

.contact-scope .eyebrow {
  position:relative;
  z-index:1;
  margin:0;
  color:var(--faint)
}

.contact-scope-items {
  position:relative;
  z-index:1;
  margin:0;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.7
}

.contact-scope-items span {
  display:inline-block;
  margin:0 6px;
  color:#675976
}

#contact::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:8% -14% 3% 18%;
  background:radial-gradient(circle at 62% 55%,rgba(126,91,196,.2),transparent 48%);
  filter:blur(8px);
  opacity:.25;
  transform:translateY(18px);
  pointer-events:none;
  transition:opacity .7s ease,transform .7s ease
}

#contact {
  min-height:clamp(560px,72vh,680px);
  align-content:start
}

#contact.is-in-view::before {
  opacity:.8;
  transform:none
}

#contact>* {
  z-index:1
}

@media(max-width:900px) {
  .contact-scope {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:44px
  }
}

.button-arrow {
  display:inline-block;
  transition:transform .22s ease
}

.email-button:hover .button-arrow,.email-button:focus-visible .button-arrow {
  transform:translate(3px,-3px)
}

@media(max-width:650px) {
  .contact-closing-note {
    grid-template-columns:1fr;
    gap:12px;
    margin-top:60px
  }

  .contact-scope {
    grid-template-columns:1fr;
    gap:8px;
    padding-right:78px
  }

  .portfolio-end {
    align-items:flex-start;
    flex-direction:column
  }

  .qualification {
    grid-template-columns:1fr
  }
  .qualification span {
    text-align:left
  }
}

/* Qualifications: shared, CV-like expandable rows */
.education-extra {
  margin-top:40px;
  padding-top:27px;
  border-top:1px solid var(--stroke)
}

.education-extra h3 {
  margin:0 0 7px;
  font-size:1.22rem;
  letter-spacing:-.025em
}

.education-extra .courses-heading {
  margin-top:34px
}

.qualifications-intro {
  font-size:.91rem;
  line-height:1.65;
  color:var(--muted);
  margin:0 0 18px;
  max-width:620px
}

.qualifications-disclosure {
  margin-bottom:10px
}

.result-list {
  display:grid;
  gap:0;
  margin:2px 0 4px
}

.result-list>div {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:9px 0;
  border-bottom:1px solid var(--stroke)
}

.result-list>div:last-child {
  border-bottom:0
}

.result-list strong {
  font-weight:600;
  font-size:.94rem
}

.result-list span {
  font-size:.89rem;
  color:var(--muted);
  text-align:right;
  flex-shrink:0
}

@media(max-width:520px) {
  .result-list>div {
    align-items:flex-start
  }
  .result-list span {
    max-width:46%
  }
}

.qualification-early {
  margin-bottom:38px;
  padding-bottom:30px;
  border-bottom:1px solid var(--stroke)
}

.qualification-early h3 {
  font-size:1.28rem;
  margin:0 0 8px
}

.education-title {
  margin-top:0
}

/* Unified education tab navigation and panel transitions */
.education-explorer {
  margin-top:26px
}

.education-explorer .tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:26px;
  overflow:visible
}

.education-explorer .tab {
  white-space:nowrap;
  flex:0 0 auto
}

.education-explorer .tab-panel {
  animation:eduPanelIn .24s ease-out
}

.education-explorer .tab-panel[hidden] {
  display:none!important
}

.education-panel-heading {
  padding:3px 0 24px;
  border-bottom:1px solid var(--stroke);
  margin-bottom:10px
}

.education-panel-heading .education-title {
  margin:0 0 10px;
  font-size:clamp(1.25rem,2.5vw,1.65rem)
}

.education-panel-meta {
  display:flex;
  align-items:center;
  gap:9px 20px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.92rem
}

.education-panel-meta .education-institution {
  color:var(--text);
  font-weight:600
}

.education-panel-meta .education-dates {
  color:var(--muted)
}

.education-description {
  color:var(--muted);
  margin:13px 0 0;
  line-height:1.65
}

.education-explorer .result-list {
  margin:15px 0 0
}

@keyframes eduPanelIn {
  from {
    opacity:0;
    transform:translateY(7px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@media(prefers-reduced-motion:reduce) {
  .education-explorer .tab-panel {
    animation:none
  }
}

/* Employer-facing refinements */
.brand {
  letter-spacing:-.025em
}

.level-three-results .qualification-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px 18px 58px;
  align-items:center;
  gap:12px
}

.level-three-results .qualification-type {
  text-align:left;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

.level-three-results .qualification-separator {
  text-align:center;
  color:var(--faint);
  font-weight:600
}

.level-three-results .qualification-grade {
  text-align:right;
  color:var(--text);
  font-weight:650;
  font-variant-numeric:tabular-nums
}

[data-panel="gcse"] .result-list span {
  min-width:36px;
  color:var(--text);
  font-weight:650;
  font-variant-numeric:tabular-nums
}

@media(max-width:520px) {
  .level-three-results .qualification-row {
    grid-template-columns:minmax(0,1fr) 55px 10px 45px;
    gap:6px
  }
  .level-three-results strong {
    font-size:.84rem
  }
  .level-three-results .qualification-type,.level-three-results .qualification-grade {
    font-size:.82rem
  }
}

/* Portfolio refinements: clear internal navigation and fully clickable experience rows */
html {
  scroll-padding-top:88px
}

.hero {
  scroll-margin-top:88px
}

.mast nav {
  align-items:center;
  gap:22px
}

.mast nav a {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:38px;
  white-space:nowrap;
  transition:color .18s ease
}

.mast nav a:not(.nav-cv)::after {
  content:"";
  position:absolute;
  bottom:2px;
  left:0;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--purple);
  transition:transform .2s ease
}

.mast nav a:not(.nav-cv):hover::after,.mast nav a:not(.nav-cv).active::after {
  transform:scaleX(1)
}

.mast nav a.active {
  color:var(--text)
}

.mast nav .nav-cv {
  padding:8px 13px;
  color:#17101e;
  background:var(--purple);
  border:1px solid var(--purple);
  border-radius:8px;
  font-weight:750
}

.mast nav .nav-cv:hover {
  background:#d0bbff;
  color:#17101e
}

.hero h1 {
  letter-spacing:-.06em
}

.hero .actions {
  margin-top:26px
}

.hero .button.primary {
  padding:12px 23px
}

.work-item {
  position:relative;
  border-radius:10px;
  margin:0 -14px;
  padding:21px 14px;
  cursor:pointer;
  outline-offset:2px;
  transition:background .2s ease, box-shadow .2s ease,transform .2s ease
}

.work-item:hover,.work-item:focus-visible {
  background:rgba(189,164,250,.075);
  box-shadow:inset 0 0 0 1px rgba(189,164,250,.23)
}

.work-item:hover h3,.work-item:focus-visible h3 {
  color:var(--purple)
}

.work-item:active {
  transform:scale(.997)
}

.work-affordance {
  flex:0 0 30px;
  display:grid;
  place-items:center;
  position:relative;
  width:30px;
  height:30px;
  border:1px solid var(--stroke);
  border-radius:8px;
  color:var(--purple);
  font-size:0;
  font-weight:400;
  line-height:1;
  transition:background .2s ease,border-color .2s ease,transform .28s cubic-bezier(.2,.75,.25,1)
}

.work-affordance::before,.work-affordance::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transform:translate(-50%,-50%)
}

.work-affordance::after {
  width:1.5px;
  height:12px
}

.work-item:hover .work-affordance,.work-item:focus-visible .work-affordance {
  background:rgba(189,164,250,.1);
  border-color:var(--purple);
  transform:rotate(90deg)
}

@media(max-width:700px) {
  .mast-in {
    min-height:72px;
    height:auto;
    gap:14px;
    padding:10px 0;
    flex-wrap:wrap
  }
  .mast nav {
    gap:9px 15px;
    flex-wrap:wrap
  }
  .mast nav a {
    font-size:.81rem;
    min-height:32px
  }
  .mast nav a:nth-child(2),.mast nav a:nth-child(3) {
    display:inline-flex
  }
  .mast nav .nav-cv {
    padding:5px 11px
  }
  .work-item {
    flex-direction:row;
    align-items:center;
    gap:13px
  }
  .work-affordance {
    margin-left:auto
  }
  html {
    scroll-padding-top:125px
  }
  .chapter {
    scroll-margin-top:125px
  }
}

@media(max-width:420px) {
  .mast nav {
    gap:6px 12px
  }
  .brand {
    font-size:.99rem
  }
  .mast nav a {
    font-size:.78rem
  }
  .hero h1 {
    font-size:clamp(2.8rem,12vw,3.7rem)
  }
}

#top {
  scroll-margin-top:90px
}

.chapter {
  scroll-margin-top:110px
}

/* Structured studio recording narratives */
.case-section {
  padding:14px 0;
  border-top:1px solid var(--stroke)
}

.case-section h3 {
  margin:0 0 7px;
  font-size:1.02rem;
  letter-spacing:-.01em;
  color:var(--purple)
}

.case-section p {
  margin:0;
  line-height:1.72;
  white-space:pre-line
}

.case-note {
  border-top:1px solid var(--stroke);
  padding-top:15px;
  color:var(--muted);
  font-size:.83rem;
  font-style:italic
}

/* Portfolio content: university involvement and growing creative collections */
.edu-involvement {
  margin-top:38px;
  padding-top:32px;
  border-top:1px solid var(--stroke)
}

.edu-involvement-heading h3 {
  font-size:clamp(1.35rem,2.4vw,1.7rem);
  margin:10px 0 8px
}

.edu-involvement-heading p {
  color:var(--muted);
  max-width:670px;
  line-height:1.7;
  margin:0 0 18px
}

.future-collection {
  padding:16px 0;
  border-top:1px solid var(--stroke)
}

.future-collection-head {
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:baseline;
  margin:0 0 12px
}

.future-collection-head h3 {
  margin:0!important;
  color:var(--purple);
  font-size:1.04rem
}

.future-collection-head span {
  color:var(--muted);
  font-size:.78rem
}

.future-card {
  display:flex;
  gap:16px;
  align-items:center;
  background:rgba(159,133,248,.055);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:16px
}

.future-card strong {
  font-size:1rem
}

.future-card p {
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
  margin:5px 0 0
}

.future-art {
  width:72px;
  height:72px;
  flex-shrink:0;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#342b4d,#1b1b26);
  font-size:2rem;
  color:#d8c7ff
}

@media(max-width:500px) {
  .future-collection-head {
    display:block
  }
  .future-card {
    align-items:flex-start
  }
  .future-art {
    width:56px;
    height:56px
  }
}

/* Tailored content for production catalogue and gig history */
.collection-intro {
  color:var(--muted);
  line-height:1.75;
  max-width:620px;
  margin:4px 0 22px
}

.future-collection {
  margin-top:25px;
  border-top:1px solid #332b3d;
  padding-top:21px
}

.future-collection-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px
}

.future-collection-head h3 {
  margin:0;
  font-size:1.14rem
}

.future-collection-head span {
  color:var(--muted);
  font-size:.84rem
}

.catalogue-empty,.event-entry {
  display:flex;
  align-items:center;
  gap:20px;
  padding:18px 0;
  border-top:1px solid #312a3a
}

.track-entry {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding:20px 0;
  border-top:1px solid #312a3a
}

.track-entry img,.track-art-placeholder {
  display:block;
  width:112px;
  aspect-ratio:1;
  border:1px solid var(--stroke);
  border-radius:10px
}

.track-entry img {
  object-fit:cover
}

.track-art-placeholder {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  overflow:hidden;
  color:var(--text);
  background:radial-gradient(circle at 70% 28%,rgba(189,164,250,.25),transparent 35%),linear-gradient(145deg,#2b203c,#17131f)
}

.track-art-placeholder span {
  font-size:2.25rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.08em
}

.track-art-placeholder small {
  color:var(--purple);
  font-size:.58rem;
  font-weight:750;
  letter-spacing:.16em
}

.track-info h3 {
  margin:0 0 12px
}

.portfolio-player {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 46px;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:500px;
  padding:10px 12px;
  border:1px solid #443953;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(189,164,250,.075),rgba(15,12,20,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}

.portfolio-player audio {
  display:none
}

.audio-play,.audio-mute {
  border:1px solid #5b496e;
  color:var(--purple);
  background:#211a2b;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease
}

.audio-play {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%
}

.audio-play span {
  display:block;
  font-size:.86rem;
  line-height:1;
  transform:translateX(1px)
}

.portfolio-player.is-playing .audio-play span {
  transform:none
}

.audio-mute {
  min-height:32px;
  padding:4px 7px;
  border-radius:7px;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.08em
}

.audio-play:hover,.audio-play:focus-visible,.audio-mute:hover,.audio-mute:focus-visible {
  color:#171020;
  border-color:var(--purple);
  background:var(--purple);
  transform:translateY(-1px)
}

.audio-mute.is-muted {
  color:var(--faint);
  border-color:var(--stroke);
  background:#17131e
}

.audio-play:disabled {
  cursor:not-allowed;
  color:var(--faint);
  border-color:var(--stroke);
  background:#17131e;
  opacity:.65
}

.audio-timeline {
  min-width:0
}

.audio-progress {
  --played:0%;
  display:block;
  width:100%;
  height:18px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  background:transparent
}

.audio-progress::-webkit-slider-runnable-track {
  height:4px;
  border-radius:999px;
  background:linear-gradient(to right,var(--purple) 0 var(--played),#3b3346 var(--played) 100%)
}

.audio-progress::-moz-range-track {
  height:4px;
  border-radius:999px;
  background:#3b3346
}

.audio-progress::-moz-range-progress {
  height:4px;
  border-radius:999px;
  background:var(--purple)
}

.audio-progress::-webkit-slider-thumb {
  width:13px;
  height:13px;
  margin-top:-4.5px;
  border:2px solid #17121e;
  border-radius:50%;
  appearance:none;
  -webkit-appearance:none;
  background:var(--purple);
  box-shadow:0 0 0 3px rgba(189,164,250,.12)
}

.audio-progress::-moz-range-thumb {
  width:11px;
  height:11px;
  border:2px solid #17121e;
  border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 0 3px rgba(189,164,250,.12)
}

.audio-time {
  display:flex;
  justify-content:space-between;
  margin-top:-1px;
  color:var(--faint);
  font-size:.67rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em
}

@media(max-width:520px) {
  .portfolio-player {
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    padding:9px 10px
  }

  .audio-play {
    width:38px;
    height:38px
  }

  .audio-mute {
    display:none
  }
}

.catalogue-empty strong,.event-info h3 {
  color:var(--text);
  font-size:1rem;
  margin:0 0 7px;
  display:block
}

.catalogue-empty p,.event-info p {
  font-size:.93rem;
  color:var(--muted);
  line-height:1.65;
  margin:0
}

.catalogue-icon {
  width:76px;
  height:76px;
  border:1px solid #443650;
  background:#201a2a;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:9px;
  font-size:1.8rem;
  color:var(--purple)
}

.event-date {
  width:68px;
  min-width:68px;
  display:flex;
  flex-direction:column;
  border-right:1px solid #403449;
  padding-right:12px
}

.event-date strong {
  font-size:1.65rem;
  line-height:1;
  color:var(--purple)
}

.event-date span {
  font-size:.75rem;
  color:var(--muted)
}

@media(max-width:560px) {
  .catalogue-empty,.event-entry {
    gap:13px;
    align-items:flex-start
  }
  .catalogue-icon {
    width:58px;
    height:58px
  }
  .event-date {
    min-width:52px;
    width:52px
  }

  .track-entry {
    grid-template-columns:72px minmax(0,1fr);
    gap:14px
  }

  .track-entry img,.track-art-placeholder {
    width:72px
  }
}

/* Small utility classes (replace inline style attributes) */
.accent-text { color: var(--purple); }
.top-gap-18 { margin-top: 18px; }
.top-gap-20 { margin-top: 20px; }