/* colours and fonts */
:root {
  --gold: #eeb823;
  --gold-bright: #f2bb26;
  --cream: #f0e9dd;
  --ink: #161411;
  --muted: #5b5146;
  --line: rgba(36,29,20,.47);
  --red: #bc4a32;
  --paper-grain-opacity: 0.62;
  --paper-grain-size: 960px;
  --body: "Courier New", "Liberation Mono", monospace;
  --display: Impact, "Arial Black", sans-serif;
  color: var(--ink);
  font-family:var(--body);
  font-synthesis: none;
  line-height: 1.38;
}
/* reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream)}
button,input,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.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}
/* page frame */
.sheet{width:100%;margin:0 auto;min-height:100svh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;max-width:1800px;box-shadow:0 0 45px rgba(0,0,0,.05)}
/* ivory page */
.paper{background-color:var(--cream)}
/* top mustard band */
.hero{background:var(--gold);background-image:linear-gradient(120deg,rgba(255,221,92,.18),transparent 50%);padding:12px clamp(24px,3vw,62px) 10px;min-height:0}
/* paper texture over the mustard and the ivory */
.page-grain-overlay{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:35;
  background-image:url('/assets/paper-texture.png?v=seamless1024');
  background-size:var(--paper-grain-size) var(--paper-grain-size);
  background-repeat:repeat;
  mix-blend-mode:soft-light;
  opacity:var(--paper-grain-opacity);
}
.paper{
  position:relative;
  isolation:isolate;
}
.paper::before{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:1;
  background-image:url('/assets/paper-texture.png?v=seamless1024');
  background-size:var(--paper-grain-size) var(--paper-grain-size);
  background-repeat:repeat;
  mix-blend-mode:soft-light;
  opacity:var(--paper-grain-opacity);
}
.paper > *{
  position:relative;
  z-index:2;
}
/* top line: place, sword */
.utilityline{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--ink);padding:8px 4px 10px;text-transform:uppercase;letter-spacing:.085em;font-size:clamp(9px,.75vw,12px);line-height:1.2;overflow:visible}
/* place name */
.coords{margin-left:24px}
/* header sword, space in the top bar */
.header-sword-slot{
  display:block;
  height:clamp(28px,2.3vw,32px);
  aspect-ratio:1452/1381;
  width:auto;
  flex-shrink:0;
  margin-right:2px;
}
/* sword image, sits above the paper texture */
.header-sword--raised{
  position:fixed;
  z-index:40;
  display:block;
  margin:0;
  padding:0;
  max-width:none;
  object-fit:contain;
  object-position:center;
  image-rendering:auto;
  opacity:.85;
  pointer-events:none;
}
/* logo and studio photo, side by side */
.hero-inner{display:grid;grid-template-columns:43% 1fr;gap:clamp(38px,8vw,152px);align-items:center;padding-top:10px}
.identity{display:flex;flex-direction:column;justify-content:center;align-self:center;min-width:0}
/* logo */
.wordmark{width:min(100%,550px);height:auto;max-height:clamp(130px,15.4vw,270px);object-fit:fill;object-position:left center}
/* studio photo, top right */
.hero-picture{display:block;width:100%;overflow:hidden;align-self:center;min-height:120px;max-height:230px;aspect-ratio:3.18/1}
.hero-picture img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(.88);opacity:.9}
/* selected tracks */
.selected{padding:11px clamp(20px,2.6vw,48px) 9px;border-bottom:1px solid var(--line)}
/* section title and the line next to it */
.section-label-row,.inline-eyebrow{display:flex;align-items:center;gap:16px}
.section-label-row h2,.inline-eyebrow{font-size:clamp(14px,1.28vw,20px);line-height:1.12;font-family:var(--body);font-weight:400;letter-spacing:.01em;white-space:nowrap;margin:0}
.rule{height:1px;background:var(--line);flex:1;min-width:12px}
.track-scroller{display:grid;grid-template-columns:0 minmax(0,1fr) 28px;align-items:center;column-gap:18px;padding-top:12px}
.track-scroller.has-prev{grid-template-columns:28px minmax(0,1fr) 28px}
.track-arrow--prev{grid-column:1}
.track-viewport{grid-column:2;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;outline:none;min-width:0;width:100%}
.track-arrow--next{grid-column:3}
.track-viewport::-webkit-scrollbar{display:none}
/* track row */
.track-grid{--track-count:5;--tracks-visible:4;display:flex;width:calc(100% * var(--track-count) / var(--tracks-visible));gap:0}
/* one track: cover, name, player */
.track{display:grid;grid-template-columns:clamp(51px,5.25vw,87px) minmax(0,1fr);gap:clamp(10px,1.3vw,19px);min-width:0;flex:0 0 calc(100% / var(--track-count));width:calc(100% / var(--track-count));max-width:calc(100% / var(--track-count));padding:0 clamp(12px,1.55vw,27px);position:relative;box-sizing:border-box}
.track:first-child{padding-left:0}
.track:last-child{padding-right:clamp(12px,1.55vw,27px)}
.track:not(:last-child):after{content:'';position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--line)}
.track-arrow{appearance:none;border:0;background:transparent;padding:0;display:grid;place-items:center;cursor:pointer;color:var(--ink);position:static;width:28px;min-width:28px;height:48px;z-index:2;transition:opacity .2s ease}
.track-arrow .ui-icon{width:20px;height:20px}
.track-arrow--prev .ui-icon{transform:scaleX(-1)}
.track-arrow:hover:not(:disabled) .ui-icon{opacity:.7}
.track-arrow.is-idle{visibility:hidden;pointer-events:none;opacity:0}
.track-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.track-art{aspect-ratio:1/1;width:100%;object-fit:cover;background:#b3a794}
.track-art--empty{background:var(--cream);object-fit:fill}
.track-art--contain{object-fit:contain;background:var(--cream)}
.track-content{min-width:0;display:flex;flex-direction:column;justify-content:space-around;gap:3px}
.track h3{margin:0;font-size:clamp(10px,.83vw,13px);line-height:1.2;letter-spacing:.045em}
.track p{margin:0;font-size:clamp(9px,.74vw,12px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-control{display:grid;grid-template-columns:28px minmax(0,1fr) 9.5ch;align-items:center;column-gap:8px;padding-top:3px;min-width:0}
/* play and pause */
.audio-btn{border:0;background:transparent;padding:0;display:grid;place-items:center;width:28px;height:28px;min-width:28px;min-height:28px;max-width:28px;flex-shrink:0;position:relative;transition:transform .15s ease}
.audio-btn-icon{grid-area:1/1;display:grid;place-items:center;width:28px;height:28px}
.audio-btn-icon--pause{visibility:hidden}
.audio-btn.is-playing .audio-btn-icon--play{visibility:hidden}
.audio-btn.is-playing .audio-btn-icon--pause{visibility:visible}
.audio-btn .ui-icon{width:28px;height:28px;max-width:none;object-fit:contain}
.audio-btn:not(:disabled):hover{transform:scale(1.10)}
.audio-btn:disabled{opacity:.75;cursor:not-allowed}
/* waveform */
.wave-wrap{position:relative;height:30px;min-width:0;display:flex;align-items:center;overflow:hidden}
.wave-range{position:absolute;inset:0;z-index:3;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.wave-range:disabled{cursor:not-allowed}
.wave-range:focus-visible + .wave-bars{outline:2px solid var(--ink);outline-offset:3px}
.wave-bars{width:100%;height:20px;display:flex;align-items:center;gap:1.5px;overflow:hidden}
.wave-bars i{flex:1;min-width:1px;background:rgba(44,43,40,.36);display:block;max-height:100%}
.wave-fill{height:20px;position:absolute;left:0;top:5px;width:0;pointer-events:none;mix-blend-mode:multiply;background:var(--gold);opacity:.8}
/* track length */
.duration{font-size:clamp(9px,.7vw,11px);white-space:nowrap;color:var(--muted);min-width:9.5ch;text-align:right;font-variant-numeric:tabular-nums}
/* bottom: mixing, price, enquiry, about */
.lower{display:grid;grid-template-columns:1.14fr .91fr 1fr .87fr;grid-template-areas:'mix offer enquiry about';padding:12px clamp(20px,2.6vw,48px) 0;align-items:stretch;min-height:0;column-gap:0}
.lower>section{min-width:0;padding:0 clamp(16px,1.7vw,28px) 12px;border-left:0}
/* mixing copy */
.mixing{grid-area:mix;display:flex;flex-direction:column;padding-left:0;border-left:0}
/* price and services */
.offer{grid-area:offer;border-left:1px solid var(--line)}
.lower>.enquiry{grid-area:enquiry;border-left:1px solid var(--line);padding-right:clamp(22px,2.2vw,36px)}
.lower>.about{grid-area:about;border-left:1px solid var(--line);padding-left:clamp(22px,2.2vw,36px);padding-right:0}
.mixing h2{font-family:var(--display);font-size:clamp(64px,6.8vw,116px);letter-spacing:-.034em;line-height:.95;margin:10px 0 8px;font-weight:900;white-space:nowrap;opacity:.9}
.mixing-copy{margin-top:4px;max-width:43ch}
.mixing-copy p{font-size:clamp(11.5px,.9vw,15px);margin:0 0 14px;line-height:1.43}
.mixing-copy p:nth-child(2){margin-top:15px}
.optional-sticker{width:170px;margin-top:auto}
.price-row h2{font-weight:700;font-size:clamp(17px,1.6vw,25px);letter-spacing:0}
.offer-lede{font-size:clamp(11px,.85vw,14px);color:var(--muted);margin:8px 0 14px}
.offer-items{border-top:1px solid var(--line)}
.offer-item{display:grid;grid-template-columns:clamp(29px,3.4vw,49px) 1fr;gap:clamp(9px,1vw,18px);border-bottom:1px solid rgba(36,29,20,.22);padding:13px 1px 11px;align-items:start}
.ui-icon{display:block;width:26px;height:26px;object-fit:contain}
.offer-item .ui-icon{width:clamp(27px,3vw,46px);height:auto;max-height:44px;opacity:.85}
.offer h3{margin:0 0 3px;font-size:clamp(10px,.87vw,13px);line-height:1.1;text-transform:uppercase;letter-spacing:.045em}
.offer-item p{margin:0;font-size:clamp(10px,.77vw,12px);line-height:1.25}
.offer-closing{font-size:clamp(10px,.85vw,13px);margin:14px 0 0;opacity:.85}
.enquiry form{display:flex;flex-direction:column;gap:8px;margin-top:12px;min-width:0;width:100%}
/* name, email, message */
.field{height:43px;border:1px solid rgba(30,29,23,.34);position:relative;background:rgba(255,255,255,.065);box-sizing:border-box;overflow:hidden;width:100%}
.field:focus-within{border-color:var(--ink);outline:1px solid var(--ink)}
.field label{position:absolute;left:12px;top:5px;font-size:9px;letter-spacing:.06em;color:#4a4338;z-index:1;pointer-events:none}
.field input,.field textarea{width:100%;height:100%;background:transparent;border:0;outline:none;color:var(--ink);padding:18px 11px 4px;font-size:13px;line-height:1.2;resize:none;box-sizing:border-box;max-width:100%}
.field input::placeholder,.field textarea::placeholder{color:#85796b}
.message-field{height:clamp(98px,6.3vw,125px)}
.message-field textarea{resize:none;min-height:100%;overflow:auto}
/* send button */
.send-btn{height:45px;background:var(--gold);color:var(--ink);border:0;display:flex;align-items:center;justify-content:center;gap:20px;font-family:var(--body);font-weight:bold;letter-spacing:.1em;font-size:clamp(15px,1.13vw,20px);transition:background .15s ease}
.send-btn .ui-icon{width:25px;height:25px}
.send-btn:hover{background:#ffd13c}
.send-btn:disabled{opacity:.6;cursor:progress}
/* sent or error */
.form-status{font-size:11px;min-height:17px;color:var(--muted)}
.form-status.error{color:#8c2821}
.form-status.success{color:#276048}
/* about photo, bottom right */
.about-photo{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:652/322;object-fit:cover;object-position:center center;margin-bottom:11px}
.about h2{font-size:clamp(14px,1.2vw,18px);line-height:1.15;letter-spacing:.06em;margin:0 0 2px}
.subrole{font-size:clamp(10px,.9vw,14px);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:7px}
.about p{font-size:clamp(11px,.82vw,13px);line-height:1.38;margin:0;overflow-wrap:anywhere;word-break:normal}
/* footer */
.footer{display:flex;justify-content:space-between;padding:10px clamp(20px,2.6vw,48px) 14px;font-size:clamp(9px,.7vw,11px);letter-spacing:.04em}
/* loading screen */
.intro{position:fixed;z-index:200;inset:0;background:var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;pointer-events:none;opacity:1;transition:opacity 1.1s ease-in-out}
.intro.is-hidden{opacity:0;visibility:hidden;transition:opacity 1.1s ease-in-out,visibility 0s 1.1s}
.intro.is-ready-hold{/* stays fully opaque while assets finish */}
body.is-booting #app,
body.is-booting .page-grain-overlay,
body.is-booting .header-sword--raised{
  /* Hold the page under the splash so nothing flashes mid-load */
  visibility:hidden;
}
body.is-booting #intro{visibility:visible}
.intro-mark{width:min(26vw,230px);animation:breathe 2s ease-in-out infinite}
.intro-label{font-size:12px;letter-spacing:.15em}
@keyframes breathe{50%{transform:scale(1.04)}}
/* tall screen, page fills the window */
@media(min-width:1200px) and (min-height:1050px){
  .sheet{height:100svh;min-height:1050px}
  .hero{display:flex;flex-direction:column;justify-content:space-between}
  .hero-inner{flex:1;max-height:calc(100% - 25px)}
  .selected{display:flex;flex-direction:column;justify-content:center}
  .lower{overflow:visible}
}
/* tablet: two columns */
@media(max-width:1199px){
  .sheet{height:auto;min-height:100svh;grid-template-rows:auto auto auto auto}
  .hero-inner{gap:30px}
  .mixing h2{font-size:clamp(58px,6.5vw,90px)}
  .lower{grid-template-columns:1fr 1fr;grid-template-areas:'mix about' 'offer enquiry';row-gap:24px}
  .lower>section{padding:0 18px 20px;border-left:none;overflow:visible}
  .mixing,.offer{padding-left:0}
  .about,.enquiry{border-left:1px solid var(--line);padding-right:0;padding-left:18px}
  .track-grid{--tracks-visible:2}
}
/* phone layout */
@media(max-width:650px){
  :root{
    --page-inline:max(18px, env(safe-area-inset-left, 0px));
    --page-inline-end:max(18px, env(safe-area-inset-right, 0px));
  }
  html,body{overflow-x:clip;max-width:100%}
  body{padding-top:env(safe-area-inset-top, 0px)}
  .sheet{max-width:100%;overflow-x:clip}
  .hero{padding:15px var(--page-inline-end) 16px var(--page-inline)}
  .utilityline{font-size:9px;padding-bottom:7px}
  .header-sword-slot{height:28px}
  .coords{display:none}
  .hero-inner{grid-template-columns:1fr;gap:12px;padding-top:10px}
  .wordmark{width:min(91%,340px);max-height:none;max-width:100%}
  .hero-picture{height:auto;aspect-ratio:1.95/1;max-height:none;max-width:100%}
  .selected{padding:17px var(--page-inline-end) 14px var(--page-inline);overflow-x:clip}
  .section-label-row h2,.inline-eyebrow{font-size:16px}
  .track-scroller{padding-top:15px;column-gap:6px;grid-template-columns:0 minmax(0,1fr) 24px;max-width:100%}
  .track-scroller.has-prev{grid-template-columns:24px minmax(0,1fr) 24px}
  .track-viewport{max-width:100%}
  .track-grid{--tracks-visible:1}
  .track{padding:0 8px 0 0;grid-template-columns:64px minmax(0,1fr)}
  .track:first-child,.track:last-child{padding-left:0;padding-right:8px}
  .track:after{display:none!important}
  .track-content{gap:4px;justify-content:center;min-width:0}
  .track h3{font-size:12px}
  .track p{font-size:11px}
  .track-control{grid-template-columns:28px minmax(0,1fr) 9.5ch}
  .duration{font-size:10px}
  .track-arrow{width:24px;min-width:24px}
  .lower{display:flex;flex-direction:column;padding:20px 0 0;gap:0;max-width:100%;overflow-x:clip}
  .lower>.mixing,
  .lower>.offer,
  .lower>.enquiry,
  .lower>.about{
    padding:0 var(--page-inline-end) 24px var(--page-inline);
    border-left:none;
    border-bottom:1px solid var(--line);
    margin:0 0 21px;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:clip;
  }
  .lower>.enquiry{margin-bottom:0;border-bottom:none}
  .mixing{order:1}
  .about{order:2}
  .offer{order:3}
  .enquiry{order:4}
  .mixing h2{font-size:clamp(56px,17vw,90px);margin-top:9px;white-space:normal;max-width:100%;overflow-wrap:anywhere}
  .mixing-copy{max-width:100%}
  .mixing-copy p{font-size:14px;line-height:1.45;margin-bottom:14px}
  .about-photo{width:100%;max-width:100%;height:auto;aspect-ratio:652/322;object-position:center center}
  .about h2{font-size:17px}
  .about p{font-size:13px;max-width:100%}
  .price-row h2{font-size:23px}
  .offer-lede{font-size:13px}
  .offer-items{max-width:100%}
  .offer-item{padding:12px 0;grid-template-columns:32px minmax(0,1fr);gap:12px;max-width:100%}
  .offer-item h3{font-size:12px}
  .offer-item p{font-size:12px;max-width:none;overflow-wrap:anywhere}
  .offer-closing{max-width:100%}
  .enquiry form{gap:10px;max-width:100%}
  .field{height:49px;max-width:100%}
  .message-field{height:134px}
  .send-btn{height:49px;max-width:100%}
  .footer{padding:12px var(--page-inline-end) max(20px, env(safe-area-inset-bottom, 0px)) var(--page-inline);font-size:10px;max-width:100%;box-sizing:border-box}
}
/* no motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}