*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{background:#fff;color:#050505;margin:0;font:16px Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}::selection{background:#111;color:#fff}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #555;outline-offset:5px}header{height:75px;display:flex;align-items:center;padding:0 28px;gap:36px;background:#fffffff0;position:relative;z-index:5}.wordmark{font-size:17px;letter-spacing:-2px;border:1px solid;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-weight:bold;rotate:-15deg;margin-right:auto}nav{display:flex;gap:27px;font-weight:600;font-size:14px}.book{font-size:14px;font-weight:600}.book span{margin-left:8px}nav a,.book{padding-block:6px;border-bottom:1px solid transparent}nav a:hover,.book:hover{border-color:currentColor}.hero{height:calc(100svh - 75px);min-height:560px;display:flex;flex-direction:column;padding:0 28px 30px}.name-stage{flex:1;display:flex;align-items:center;justify-content:center;--drift:0px;transform:translateY(var(--drift))}h1{display:flex;align-items:center;justify-content:center;gap:.065em;font-size:clamp(70px,12vw,220px);letter-spacing:-.07em;line-height:.85;font-weight:700;margin:0;white-space:nowrap;width:100%}h1>span:not(.hero-image){animation:name-in 1.15s cubic-bezier(.16,1,.3,1) both}h1>span:last-child{animation-delay:.18s}.hero-image{display:inline-block;width:1.1em;height:1.3em;flex-shrink:0;overflow:hidden;animation:picture-in 1.3s cubic-bezier(.16,1,.3,1) both}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:50% 37%;display:block}.hero-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:end;font-size:14px;font-weight:600}.hero-bottom p{margin:0;line-height:1.35}.hero-identity{display:flex;gap:15px;align-items:end}.hero-identity p span{color:#888}.hero-intro{max-width:330px}.hero-bottom button{justify-self:end;background:none;border:0;padding:10px 0;font-weight:600;font-size:14px}.equalizer{display:flex;gap:3px;height:29px;align-items:end}.equalizer i{width:3px;height:100%;background:#111;animation:meter .85s ease-in-out infinite alternate;transform-origin:bottom}.equalizer i:nth-child(2){animation-delay:-.2s}.equalizer i:nth-child(3){animation-delay:-.6s}.equalizer i:nth-child(4){animation-delay:-.4s}.equalizer i:nth-child(5){animation-delay:-.7s}.manifesto{margin:35px 28px 120px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(16.666% - 1px),#dedede calc(16.666% - 1px),#dedede 16.666%);border-block:1px solid #dedede;padding:15px 0 45px}.grid-indices{display:flex;justify-content:space-around;font-size:10px;color:#777}.manifesto h2{font-size:clamp(46px,8.8vw,155px);line-height:1.05;padding:45px 0 0;letter-spacing:-.07em}.manifesto h2 span{display:block;padding-left:8.3%}.manifesto h2 span:nth-child(2){padding-left:25%}.manifesto h2 span:nth-child(3){padding-left:33%}.manifesto h2 span:nth-child(4){padding-left:50%}.section{padding:60px 28px 100px;margin:0;max-width:none}.section-top{border-top:1px solid #bbb;display:flex;justify-content:space-between;padding:13px 0 40px;gap:20px;font-size:10px;color:#777}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px;gap:30px}h2{font-size:clamp(38px,5.6vw,90px);font-weight:600;line-height:1;letter-spacing:-.065em;margin:0}h2 em{font-style:normal}.section-title p{max-width:320px;font-size:14px;line-height:1.5;margin:0}.mono{font-family:monospace}.dates{padding-bottom:70px}.dates .section-title .mono{font-size:11px}.empty-dates,.event-row{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:30px;align-items:center;padding:25px 0;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.empty-dates .mono{font-size:11px;color:#777}.empty-dates strong{font-size:23px;font-weight:400;letter-spacing:-.04em}.empty-dates a,.event-row a{font-size:14px;text-align:right}.event-row h3{font-size:23px;margin:0}.event-row p{font-size:14px;margin:8px 0 0}.gallery-view{overflow:hidden;background:#e7e7e7}.gallery-view>img{width:100%;height:75vh;min-height:450px;max-height:1000px;object-fit:contain;display:block;background:#101010}.gallery-controls{background:#fff;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:13px}.gallery-controls button{background:none;border:0;padding:12px;font-size:14px}.gallery-controls button:hover{text-decoration:underline}.live-caption{display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:14px;line-height:1.6}.text-link{font-size:12px;display:inline-block;border-bottom:1px solid;padding:10px 0;font-weight:600}.craft{background:#090909;color:#fff;padding-top:30px}.craft .section-top{border-color:#444;color:#999}.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center;padding:20px 5%}.about-photo{margin:0}.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}.about-photo figcaption{font-size:9px;color:#aaa;padding-top:14px}.craft-copy>.handwritten{display:block;font:11px monospace;color:#aaa;margin-bottom:25px}.craft-copy h2{font-size:clamp(42px,5vw,82px)}.craft-copy p{font-size:17px;line-height:1.65;max-width:510px;color:#c8c8c8}.craft-copy .text-link{margin-top:20px}.social-section{padding-top:100px}.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.highlight img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:18px;filter:grayscale(1);transition:filter .5s}.highlight:hover img{filter:grayscale(0)}.highlight>.mono{font-size:10px;color:#777}.highlight h3{font-size:25px;letter-spacing:-.05em;font-weight:500;margin:12px 0}.highlight p{font-size:14px;line-height:1.6;color:#666}.pending{display:block;font:10px monospace;color:#777;margin-top:25px}.wedding{background:#eee;padding-top:30px}.wedding-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding:10px 0}.wedding h2{font-size:clamp(40px,5vw,85px)}.wedding p{font-size:15px;line-height:1.7;max-width:510px}.wedding .lead{font-size:25px;letter-spacing:-.04em;line-height:1.3;margin-top:0}.booking{padding-top:70px}.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-top:15px}.booking-grid>div>p{font-size:15px;line-height:1.5;margin-top:30px}fieldset{border:0;padding:0;margin:0 0 30px}legend{font-size:14px;margin-bottom:15px}.choices{display:flex;gap:8px;flex-wrap:wrap}.choices label{position:relative}.choices input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.choices span{display:block;border:1px solid #aaa;padding:12px;font-size:12px}.choices input:checked+span{background:#111;color:white;border-color:#111}.choices input:focus-visible+span{outline:2px solid #777;outline-offset:3px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:26px}form label{font-size:13px;display:block}input:not([type=radio]),textarea{width:100%;min-width:0;border:0;border-bottom:1px solid #aaa;background:none;border-radius:0;padding:14px 0;color:#111;font-size:15px;display:block;margin-top:4px}textarea{resize:vertical}.submit{width:100%;margin-top:25px;padding:18px 0;background:#111;color:#fff;border:1px solid #111;display:flex;justify-content:space-between;padding-inline:18px;font-size:13px}.submit:hover{background:#444}.form-note{font-size:11px;color:#777;line-height:1.5}.prototype{width:100%;font-size:9px;color:#777;margin-top:20px}footer{padding:35px 28px;display:flex;gap:30px;align-items:center;flex-wrap:wrap;border-top:1px solid #ccc}footer .mono{font-size:10px}footer a:not(.wordmark){font-size:11px}dialog{width:min(580px,calc(100% - 30px));border:1px solid #111;padding:35px;background:white;color:#111}dialog::backdrop{background:#000a}dialog h2{font-size:42px;margin:25px 0}dialog p{line-height:1.5}dialog pre{font:14px/1.5 Arial;white-space:pre-wrap;overflow-wrap:anywhere;max-height:35vh;overflow:auto;border-block:1px solid #ccc;padding:20px 0}.dialog-close{position:absolute;right:10px;top:10px;font-size:30px;border:0;background:none}.skip{position:fixed;top:-100px;background:#fff;padding:15px;z-index:100}.skip:focus{top:10px}.reveal{opacity:0;transform:translateY(25px);transition:opacity .85s,transform .85s}.reveal.visible{opacity:1;transform:none}.paused *{animation-play-state:paused!important}.paused .reveal{opacity:1;transform:none;transition:none}.paused .name-stage{transform:none}@keyframes name-in{from{opacity:0;translate:0 45px}to{opacity:1;translate:0 0}}@keyframes picture-in{from{clip-path:inset(50% 0)}to{clip-path:inset(0)}}@keyframes meter{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@media(min-width:1700px){.section{padding-inline:4%}.hero,header{padding-inline:4%}}@media(max-width:760px){header{height:70px;padding-inline:18px;gap:20px}nav{gap:16px;font-size:12px}.book{font-size:12px}.wordmark{width:29px;height:29px;font-size:14px}nav a:first-child{display:none}.hero{height:calc(90svh - 70px);min-height:540px;padding:0 18px 25px}.name-stage{position:relative}h1{display:grid;grid-template-columns:auto auto;gap:.08em;font-size:16vw;white-space:normal;justify-content:center}.hero-image{width:1.2em;height:1.35em;grid-column:2;grid-row:1/3}h1>span:last-child{grid-column:1;grid-row:2;justify-self:end}.hero-bottom{grid-template-columns:1fr auto;gap:22px;font-size:12px}.hero-intro{grid-column:1/3;grid-row:1;max-width:275px}.hero-bottom button{font-size:12px}.equalizer{height:22px}.manifesto{margin:30px 18px 55px;padding-bottom:25px}.manifesto h2{font-size:11vw;padding-top:35px}.manifesto h2 span:nth-child(3){padding-left:16.6%}.manifesto h2 span:nth-child(4){padding-left:40%}.grid-indices{font-size:8px}.section{padding:35px 18px 55px}.section-top{font-size:8px;padding-bottom:25px;line-height:1.5}.section-top span:last-child{text-align:right;max-width:45%}.section-title{display:block;margin-bottom:28px}h2{font-size:11vw}.section-title p{font-size:13px;margin-top:20px}.dates .section-title .mono{display:block;margin-top:15px}.empty-dates,.event-row{grid-template-columns:1fr;gap:15px}.empty-dates a,.event-row a{text-align:left}.empty-dates strong{font-size:21px}.gallery-view>img{min-height:360px;height:58vh}.gallery-controls{padding:8px 0;font-size:12px}.live-caption{display:block}.text-link{font-size:10px}.craft-grid{grid-template-columns:1fr;gap:35px;padding:0}.about-photo img{max-height:480px;object-position:50% 43%}.craft-copy h2{font-size:12vw}.craft-copy p{font-size:16px}.highlights{grid-template-columns:1fr;gap:35px}.highlight img{aspect-ratio:16/10}.highlight h3{font-size:25px}.pending{margin-top:12px}.wedding-grid,.booking-grid{grid-template-columns:1fr;gap:30px}.wedding h2{font-size:12vw}.wedding .lead{font-size:23px}.fields{gap:20px 15px}.choices span{font-size:11px;padding:10px}footer{padding:25px 18px;gap:20px}footer>.mono:not(.prototype){max-width:175px;line-height:1.5}.prototype{line-height:1.5}}@media(max-width:370px){nav{gap:12px}header{gap:14px}.fields{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.name-stage{transform:none}}
/* Compact image sits on the same baseline as the letterforms. */
h1{align-items:baseline;gap:.09em}.hero-image{width:.72em;height:.64em;display:inline-block;align-self:baseline;animation:picture-in 1.3s cubic-bezier(.16,1,.3,1) both}.hero-image img{object-position:50% 32%}
.word-flight{height:270svh;position:relative;background:#eeede8;margin:25px 0 75px}.word-flight-stage{position:sticky;top:0;height:100svh;min-height:480px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;border-block:1px solid #c4c3bf}.flight-label,.flight-footer{position:absolute;left:28px;right:28px;display:flex;justify-content:space-between;gap:20px;font:10px monospace;letter-spacing:.06em;z-index:2}.flight-label{top:24px}.flight-footer{bottom:25px}.stencil-backdrop{position:absolute;inset:4% -2% auto;color:#1717170d;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(100px,20vw,350px);font-weight:900;letter-spacing:-.04em;line-height:.84;rotate:-7deg;z-index:-1;white-space:nowrap;user-select:none;mask-image:repeating-linear-gradient(0deg,#000 0px,#000 53px,transparent 53px,transparent 58px)}.flight-rows{display:flex;flex-direction:column;gap:3vh;padding-block:65px}.flight-row{width:max-content;will-change:transform;line-height:1;font-size:clamp(44px,7.5vw,135px);font-weight:800;letter-spacing:-.065em;text-transform:uppercase}.flight-row:nth-child(even){font-family:Impact,'Arial Black',Arial,sans-serif;font-weight:900;letter-spacing:-.02em}.flight-row span{display:block;white-space:nowrap}.flight-row i{font-style:normal;font-weight:400;color:#777;padding-inline:.16em}.flight-row:nth-child(3){color:transparent;-webkit-text-stroke:1.5px #111}.flight-still{height:auto}.flight-still .word-flight-stage{position:relative;height:auto;min-height:0;padding:70px 28px}.flight-still .flight-row{width:auto;transform:none!important;font-size:clamp(26px,4.5vw,70px)}.flight-still .flight-row span{white-space:normal}.flight-still .flight-rows{padding:15px 0;gap:25px}
@media(max-width:760px){h1{display:flex;align-items:baseline;font-size:11.2vw;white-space:nowrap;gap:.09em}.hero-image{width:.72em;height:.64em;grid-column:auto;grid-row:auto}h1>span:last-child{grid-column:auto;grid-row:auto}.word-flight{height:230svh;margin-bottom:35px}.flight-row{font-size:13vw}.flight-rows{gap:5vh}.flight-label,.flight-footer{left:18px;right:18px;font-size:8px;line-height:1.5}.flight-label span:last-child,.flight-footer span:last-child{text-align:right;max-width:40%}.stencil-backdrop{font-size:35vw;top:18%;line-height:1;rotate:-12deg}.flight-still{height:auto}.flight-still .word-flight-stage{padding-inline:18px}}@media(prefers-reduced-motion:reduce){.word-flight{height:auto}.word-flight-stage{position:relative;height:auto;min-height:0;padding:75px 18px}.flight-row{transform:none!important;width:auto;font-size:clamp(28px,4.5vw,70px)}.flight-row span{white-space:normal}}

/* Optical balance compensates for the name's negative letter spacing. */
.hero-image{position:relative;left:.035em}
.flight-row{display:flex;flex-wrap:nowrap}.flight-group{flex:none;padding-right:.22em}.flight-still .flight-row{display:block}.flight-still [data-repeat]{display:none}.flight-still .flight-group>i:last-child{display:none}
@media(prefers-reduced-motion:reduce){.flight-row{display:block}.flight-row [data-repeat]{display:none}.flight-group>i:last-child{display:none}}

/* Artist portrait treatment: monochrome photography with hand-drawn marks. */
header .wordmark{width:76px;height:76px;min-width:76px;border:0;border-radius:0;rotate:0;letter-spacing:normal;display:block}
header .wordmark img{display:block;width:100%;height:100%;object-fit:contain}
header{height:96px}.hero{height:calc(100svh - 96px)}
.hero-image{isolation:isolate;background:#e8e8e5}.hero-image img{filter:grayscale(1) contrast(1.45);mix-blend-mode:multiply}
.portrait-marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hero-image::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(98deg,transparent 0 5px,#ffffff12 5px 6px);mix-blend-mode:screen}
@media(max-width:760px){header{height:82px;gap:14px}header .wordmark{width:62px;height:62px;min-width:62px}.hero{height:calc(90svh - 82px)}}
@media(max-width:370px){header{gap:10px}header .wordmark{width:50px;height:50px;min-width:50px}}

/* Drawings live outside the photograph: every face stays unobstructed. */
.hero-image{overflow:visible;animation:none}
.portrait-marks{overflow:visible;z-index:3}
.about-photo img{aspect-ratio:4/5;object-fit:cover;object-position:50% 42%}
@media(max-width:760px){.about-photo img{max-height:none;object-position:50% 42%}}

/* Noir study: black, white and selective crimson accents. */
:root{--accent:#cf101e}
.word-flight{margin-bottom:0;background:#e9e9e6}
::selection{background:var(--accent);color:white}
.hero-image img{filter:grayscale(1) contrast(1.5)}
.portrait-marks g{stroke:var(--accent)}
.about-photo{position:relative}.about-photo::before{content:"";position:absolute;left:-10px;top:0;width:3px;height:22%;background:var(--accent)}
.about-photo img{filter:grayscale(1) contrast(1.23)}
.gallery-view>img{filter:grayscale(1) contrast(1.2)}
.highlight img,.highlight:hover img{filter:grayscale(1) contrast(1.3)}
.highlight{position:relative}.highlight>.mono{color:var(--accent)}
.highlight h3{transition:color .25s}.highlight:hover h3{color:var(--accent)}
.highlight img{transition:filter .4s,transform .5s}.highlight:hover img{filter:grayscale(1) contrast(1.45)}
.social-section{background:#f4f4f1;padding-top:48px;border-top:3px solid var(--accent)}
.social-section h2 em{color:var(--accent)}
.record-indicator::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #cf101e15}
.craft-copy>.handwritten{color:#ed3542}
.craft-copy .text-link{border-color:var(--accent)}
header .book{color:var(--accent)}nav a:hover,.book:hover{border-color:var(--accent)}
.equalizer i{background:var(--accent)}
.flight-row i{color:var(--accent);-webkit-text-stroke:0}
.flight-label span:last-child{color:var(--accent)}
.submit{background:var(--accent);border-color:var(--accent)}.submit:hover{background:#a60c17;border-color:#a60c17}
.text-link:hover{color:var(--accent)}
@media(max-width:760px){.word-flight{margin-bottom:0}.social-section{padding-top:35px}}

/* Oversized drawings float away from the portraits. */
.portrait-marks{inset:-38% -32%;width:164%;height:176%;rotate:-9deg;opacity:.95}
.name-stage{position:relative}
#hero-dates{position:absolute;left:8%;top:calc(50% - clamp(135px,16vw,260px));max-width:58%;z-index:3;rotate:-5deg;scroll-margin-top:110px}
.date-tag{font-family:'Marker Felt','Chalkduster','Bradley Hand',cursive;font-size:clamp(17px,2.05vw,32px);font-weight:700;font-style:italic;color:var(--accent);line-height:1.45;letter-spacing:-.04em;overflow-wrap:anywhere;text-transform:uppercase}
.date-tag:nth-child(2){margin-left:24px;rotate:2deg}.date-tag time{white-space:nowrap}
#manage-dates{border:0;background:none;color:#666;font-size:11px;padding:10px 0}
#dates-editor{width:min(740px,calc(100% - 28px));max-height:90svh;overflow:auto}
.edit-date{border-top:1px solid #bbb;padding:14px 0;display:grid;grid-template-columns:1fr 1fr 150px;gap:15px}.edit-date legend{font-weight:bold}.edit-date input{width:100%}.edit-date>button{grid-column:1/-1;justify-self:start}
#dates-editor button:not(.submit):not(.dialog-close),.date-tools label{background:white;border:1px solid #999;padding:9px 12px;font-size:12px}
.date-tools{display:flex;gap:15px;align-items:start;margin-top:20px}.date-tools input{max-width:230px;font-size:11px}#dates-status{font-size:13px}
@media(max-width:760px){#hero-dates{top:calc(50% - 140px);left:5%;max-width:90%}.date-tag{font-size:16px;line-height:1.5}.date-tag:nth-child(2){margin-left:10px}.portrait-marks{inset:-48% -30%;width:160%;height:196%;rotate:-12deg}.edit-date{grid-template-columns:1fr}.date-tools{flex-direction:column}}

/* Finer date lettering and a more prominent wedding chapter. */
.date-tag{font-family:'Bradley Hand','Segoe Print','Comic Sans MS',cursive;font-weight:400;letter-spacing:-.025em;font-size:clamp(17px,1.8vw,29px)}
.wedding{background:#c90e1b;color:white;position:relative;isolation:isolate;overflow:hidden;padding-bottom:85px}
.wedding::after{content:"YES.";position:absolute;right:-.03em;bottom:-.21em;font:900 clamp(180px,27vw,460px)/1 Arial,sans-serif;letter-spacing:-.09em;color:#ffffff0b;z-index:-1;rotate:-8deg;pointer-events:none}
.wedding .section-top{color:#fff;border-color:#ffffff70}.wedding h2{font-weight:800}.wedding h2 em{color:#090909}.wedding .text-link{border-color:white}.wedding .text-link:hover{color:#090909;border-color:#090909}
#wedding-details{border-top:2px solid var(--accent);padding-top:20px;margin-top:30px}#wedding-details[hidden]{display:none}#wedding-details legend{font-size:24px;font-weight:700;color:var(--accent);padding-right:12px}.wedding-form-intro{font-size:13px;line-height:1.5;margin:0 0 24px;color:#666}#wedding-details>label{margin-bottom:24px}#wedding-details textarea{font-size:14px}select{display:block;width:100%;font:14px Arial,sans-serif;color:#111;background:white;border:0;border-bottom:1px solid #aaa;border-radius:0;padding:14px 0;margin-top:4px}.wedding-services{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}.wedding-services label{display:flex;align-items:center;gap:7px}.wedding-services input[type=checkbox]{display:inline-block;width:17px;height:17px;min-width:17px;margin:0;accent-color:var(--accent)}
@media(max-width:760px){.date-tag{font-size:16px}#hero-dates{max-width:86%;top:calc(50% - 170px)}.wedding{padding-bottom:55px}}

/* Each gig stays on one fine handwritten line, fitted to the available width. */
#hero-dates{max-width:none;width:62%;left:8%}
.date-tag{font-size:clamp(13px,1.25vw,20px);font-weight:400;white-space:nowrap;overflow-wrap:normal;line-height:1.7}
.date-tag:nth-child(2){margin-left:14px}
.highlight:nth-child(3) img{object-position:50% 26%}
.wedding-doodles{position:relative;height:120px;margin-top:-10px;margin-bottom:20px;pointer-events:none;color:#fff}
.wedding-doodles svg{position:absolute;overflow:visible}.doodle-love{width:145px;height:110px;left:3%;top:10px;rotate:-13deg}.doodle-rings{width:170px;height:110px;left:37%;top:0;rotate:9deg;color:#090909}.doodle-arrow{width:155px;height:65px;right:8%;top:35px;rotate:-7deg}
@media(max-width:760px){#hero-dates{width:90%;left:3%;top:calc(50% - 135px)}.date-tag{font-size:13px}.date-tag:nth-child(2){margin-left:6px}.wedding-doodles{height:100px;margin-top:0}.doodle-love{width:95px;height:80px;left:0}.doodle-rings{width:115px;height:90px;left:39%}.doodle-arrow{width:70px;right:0;top:35px}}

/* Motion study — ink, exposure, vinyl and depth. */
.scroll-meter{position:fixed;inset:0 0 auto;height:3px;background:var(--accent);transform-origin:left;transform:scaleX(0);z-index:20;pointer-events:none}
.hero-image img{clip-path:inset(0)}
.ink-path{stroke-dasharray:var(--ink-length);stroke-dashoffset:var(--ink-length)}
.ink-visible .ink-path{animation:draw-ink 1.4s cubic-bezier(.3,.1,.2,1) var(--ink-delay) both}
.portrait-marks{animation:crown-drift 7s ease-in-out infinite alternate}
.wedding-doodles .doodle-love{animation:heart-drift 5s ease-in-out infinite alternate}.wedding-doodles .doodle-rings{animation:ring-drift 6s ease-in-out infinite alternate}
.about-photo{overflow:hidden}.about-photo img{transform:translateY(var(--photo-drift,0px)) scale(1.045);will-change:transform}
.about-photo.noir-entry{clip-path:inset(0 0 9% 0);transition:clip-path 1.2s cubic-bezier(.16,1,.3,1),opacity .85s,transform .85s}.about-photo.noir-visible{clip-path:inset(0)}
.about-photo::before{z-index:2;left:0;transform:scaleY(.1);transform-origin:top;transition:transform 1.3s .3s}.about-photo.noir-visible::before{transform:scaleY(1)}
.highlight{perspective:900px;transition-delay:var(--card-delay)}.highlight img{transform:rotateX(var(--card-y,0deg)) rotateY(var(--card-x,0deg));transform-origin:center;transition:transform .35s ease-out,filter .4s;will-change:transform}
.highlight:hover img{transform:rotateX(var(--card-y,0deg)) rotateY(var(--card-x,0deg)) scale(1.018)}
.social-section h2 em{display:inline-block;position:relative}.social-section h2 em::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1s .35s cubic-bezier(.16,1,.3,1)}.social-section.noir-visible h2 em::after{transform:scaleX(1)}
.record-indicator::before{animation:record-breathe 3s ease-in-out infinite}
.wedding.noir-entry::after{translate:70px 0;transition:translate 1.4s cubic-bezier(.16,1,.3,1)}.wedding.noir-visible::after{translate:0 0}
header .book,.text-link{transition:translate .25s ease-out,color .25s,border-color .25s}
.submit span{transition:transform .3s}.submit:hover span{transform:translate(4px,-4px)}
#hero-dates{animation:tag-appear 1.1s .25s both}
@keyframes draw-ink{to{stroke-dashoffset:0}}
@keyframes crown-drift{from{translate:-3px 1px}to{translate:5px -7px}}
@keyframes heart-drift{from{translate:0 0}to{translate:4px -5px}}
@keyframes ring-drift{from{translate:0 -3px}to{translate:-4px 4px}}
@keyframes record-breathe{0%,100%{box-shadow:0 0 0 3px #cf101e15}50%{box-shadow:0 0 0 7px #cf101e08}}
@keyframes tag-appear{from{opacity:0;translate:-16px 8px}to{opacity:1;translate:0 0}}
.paused .ink-path{stroke-dashoffset:0;animation:none!important}.paused .noir-entry{clip-path:none}.paused .portrait-marks,.paused .wedding-doodles svg{translate:0 0}.paused .about-photo img,.paused .highlight img{transform:none!important}.paused #hero-dates{opacity:1;translate:0 0;animation:none!important}.paused .scroll-meter{display:none}.paused .social-section h2 em::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.ink-path{stroke-dashoffset:0}.noir-entry{clip-path:none!important}.portrait-marks,.wedding-doodles svg{translate:0 0}.about-photo img,.highlight img{transform:none!important}#hero-dates{opacity:1;translate:0 0}.scroll-meter{display:none}.social-section h2 em::after{transform:scaleX(1)}}

/* Hand-lettered signature resolves into the editorial wordmark. */
h1>.name-word{position:relative;animation:none!important;display:inline-block}
.name-final{display:block;animation:name-resolve .8s 2s both}
.name-sketch{position:absolute;inset:-8% 0 -22%;width:100%;height:130%;overflow:visible;fill:none;stroke:#111;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;animation:sketch-resolve .75s 2s both}
.name-sketch path{stroke-dasharray:1;stroke-dashoffset:1;animation:write-name .65s var(--letter-delay) cubic-bezier(.35,.15,.25,1) both}
@keyframes write-name{to{stroke-dashoffset:0}}
@keyframes name-resolve{from{opacity:0;filter:blur(3px);translate:0 3px}to{opacity:1;filter:blur(0);translate:0 0}}
@keyframes sketch-resolve{0%{opacity:1}100%{opacity:0;visibility:hidden}}
.hero-bottom{grid-template-columns:1fr 1.2fr auto auto}
.hero-socials{display:flex;flex-direction:column;gap:9px;font-size:12px}.hero-socials a:hover{color:var(--accent)}
.highlight:nth-child(3) img{object-position:50% 50%}
.social-follow{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin-top:65px;padding-top:30px;border-top:1px solid #bbb}
.follow-channel{display:flex;flex-direction:column;align-items:start;gap:15px;padding:20px 0}
.follow-channel>.mono{font-size:10px;color:#666}.follow-channel strong{font-size:clamp(30px,3.5vw,56px);letter-spacing:-.06em;font-weight:600}.follow-channel strong span{font-size:14px;letter-spacing:0;font-weight:400}.follow-copy{font-size:14px;color:#555}.follow-cta{font-size:12px;font-weight:700;color:var(--accent);border-bottom:1px solid;padding:8px 0;transition:translate .25s}.follow-channel:hover .follow-cta{translate:5px 0}
.paused .name-final{animation:none!important;opacity:1;filter:none;translate:0 0}.paused .name-sketch{display:none}
@media(max-width:760px){.hero-bottom{grid-template-columns:1fr auto}.hero-intro{grid-column:1/3}.hero-socials{grid-column:1;grid-row:3;flex-direction:row;gap:18px}.hero-bottom #motion{grid-column:2;grid-row:3}.social-follow{grid-template-columns:1fr;gap:10px;margin-top:40px}.follow-channel+.follow-channel{border-top:1px solid #ccc}.follow-channel strong{font-size:40px}}
@media(prefers-reduced-motion:reduce){.name-final{opacity:1;filter:none;translate:0 0}.name-sketch{display:none}}

/* Social identities become quiet, oversized background graphics. */
.socials-heading{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;font-size:clamp(28px,4vw,55px);letter-spacing:-.06em;margin:0 0 -10px}
.socials-heading span{font:12px Arial,sans-serif;letter-spacing:0;color:#666}
.follow-channel{position:relative;isolation:isolate;overflow:hidden;padding:30px 24px;min-height:240px}
.platform-backdrop{position:absolute;right:-20px;top:50%;translate:0 -50%;width:260px;height:260px;color:var(--accent);opacity:.075;rotate:-12deg;z-index:-1;pointer-events:none;transition:rotate .7s,opacity .7s}
.youtube-backdrop{width:300px;height:300px;rotate:8deg}.follow-channel:hover .platform-backdrop{rotate:0deg;opacity:.11}
.name-final{animation:none;opacity:1}
.wild-name{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;animation:wild-resolve 1.45s 1.7s cubic-bezier(.22,.61,.36,1) both}
.wild-ink{stroke-dasharray:1;stroke-dashoffset:1;animation:wild-write 1.85s var(--write-delay) cubic-bezier(.25,.1,.25,1) both}
.wild-scratch{stroke-dasharray:1;stroke-dashoffset:1;animation:scratch-write 1.9s .2s both}
.wild-ready .name-final{animation:final-settle 1.5s 1.6s cubic-bezier(.22,.61,.36,1) both}
@keyframes wild-write{to{stroke-dashoffset:0}}
@keyframes wild-resolve{0%{opacity:1}60%{opacity:.55}100%{opacity:0;visibility:hidden}}
@keyframes final-settle{from{opacity:0}45%{opacity:.45}to{opacity:1}}
@keyframes scratch-write{0%{stroke-dashoffset:1;opacity:0}20%{opacity:.3}65%{stroke-dashoffset:0;opacity:.2}100%{stroke-dashoffset:0;opacity:0}}
.paused .wild-name{display:none}.paused.wild-ready .name-final{animation:none!important;opacity:1}
@media(max-width:760px){.socials-heading{margin-bottom:12px}.follow-channel{padding:24px 12px}.platform-backdrop{width:230px;height:230px}.youtube-backdrop{width:260px;height:260px}}
@media(prefers-reduced-motion:reduce){.wild-name{display:none}.wild-ready .name-final{animation:none!important;opacity:1}}

/* Clearly draw red ink first; only settle into black after both words exist. */
.wild-name{animation:red-ink-settle 1.25s 4.1s ease-in-out both}
.wild-ink{stroke:#cf101e;animation:red-name-write 2.4s var(--write-delay) linear both}
.wild-ready .name-final{animation:black-name-settle 1.35s 4s ease-in-out both}
.wild-scratch{stroke:#cf101e;animation:red-scratch 3.8s .2s linear both}
@keyframes red-name-write{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes red-ink-settle{0%{opacity:1}45%{opacity:.8}100%{opacity:0;visibility:hidden}}
@keyframes black-name-settle{0%{opacity:0}40%{opacity:.2}100%{opacity:1}}
@keyframes red-scratch{0%{stroke-dashoffset:1;opacity:0}10%{opacity:.45}75%{stroke-dashoffset:0;opacity:.35}100%{stroke-dashoffset:0;opacity:0}}
.paused.wild-ready .name-final{animation:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){.wild-ready .name-final{animation:none!important;opacity:1}.wild-name{display:none}}

/* Stroke geometry is now drawn in JavaScript; only the final handover fades. */
.wild-name{animation:none;opacity:1;visibility:visible;transition:opacity 1.25s ease-in-out}
.wild-ink{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
.wild-scratch{display:none}
.wild-ready .name-final{animation:none;opacity:0;transition:opacity 1.3s ease-in-out}
.wild-ready.name-traced .name-final{opacity:1}
.name-traced .wild-name{opacity:0}
.paused.wild-ready .name-final{opacity:1;transition:none}
@media(prefers-reduced-motion:reduce){.wild-ready .name-final{opacity:1;transition:none}.wild-name{display:none}}

/* Center the two protagonists and give featured clips their own editorial stage. */
.wild-ink{stroke:#050505}
.highlights .dope-highlight{grid-column:2;grid-row:1;text-align:center}
.highlights .highlight:nth-child(2){grid-column:1;grid-row:1}
.highlights .highlight:nth-child(3){grid-column:3;grid-row:1}
.dope-highlight img{object-position:center}.dope-highlight .text-link{margin-inline:auto}
.most-played{background:#0b0b0b;color:#f4f4f1;padding-top:40px}.most-played .section-top{border-color:#444;color:#aaa}.most-played h2 em{color:#ed2635}.most-played .section-title p{color:#bbb}
.featured-note{font-size:11px;color:#aaa;line-height:1.5;margin:0 0 28px}
.featured-videos{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:25px}.video-feature{min-width:0}.video-visual{position:relative;overflow:hidden;margin-bottom:20px}.video-feature img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.2);transition:transform .6s}.video-feature:hover img{transform:scale(1.035)}.video-feature:nth-child(3) img{object-position:50% 30%}.video-play{position:absolute;bottom:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:white;font-size:15px}.video-feature>.mono{font-size:10px;color:#ea3845}.video-feature h3{font-size:clamp(22px,2.2vw,34px);font-weight:500;letter-spacing:-.045em;margin:14px 0}.video-feature p{font-size:13px;color:#aaa;line-height:1.5}.video-stats{display:flex;gap:30px;border-top:1px solid #444;padding-top:17px;margin-top:22px}.video-stats>div{display:flex;flex-direction:column;gap:5px}.video-stats strong{font-size:29px;font-weight:500}.video-stats span{font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:.08em}.video-feature small{display:block;font:9px monospace;color:#aaa;margin-top:19px}.video-feature>.text-link{margin-top:14px}.video-placeholder .video-play{opacity:.65}
@media(max-width:760px){.highlights .dope-highlight,.highlights .highlight:nth-child(2),.highlights .highlight:nth-child(3){grid-column:1;grid-row:auto}.highlights .dope-highlight{grid-row:1}.featured-videos{grid-template-columns:1fr;gap:45px}.video-feature img{aspect-ratio:16/10}.video-feature h3{font-size:27px}}
@media(prefers-reduced-motion:reduce){.video-feature:hover img{transform:none}}
.paused .video-feature:hover img{transform:none}

/* Dates sit directly beneath the first word of the artist name. */
#hero-dates{top:calc(50% + clamp(55px,6.5vw,115px));left:8%;width:62%;rotate:-4deg}
@media(max-width:760px){#hero-dates{top:calc(50% + 42px);left:3%;width:90%}}

/* A brief settling of ink after the real pen strokes finish. */
.wild-name{transition:opacity .7s ease-in-out}
.wild-ready .name-final{transition:opacity .7s ease-in-out}
.wild-ink{stroke:#050505;stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.paused.wild-ready .name-final{transition:none}
@media(prefers-reduced-motion:reduce){.wild-ready .name-final{transition:none}}

/* Give the dates more breathing room below the artist name. */
#hero-dates{top:calc(50% + clamp(55px,6.5vw,115px) + 28px)}
@media(max-width:760px){#hero-dates{top:calc(50% + 62px)}}

.honey{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* Mobile cover: two large lines, a real portrait, then dates in the flow. */
@media(max-width:760px){
 header{height:80px;padding:8px 20px;gap:18px}
 header .wordmark{width:56px;height:56px;min-width:56px}
 nav{gap:18px;font-size:12px}.book{font-size:12px}.book span{font-family:Arial,sans-serif}
 .hero{height:auto;min-height:calc(100svh - 80px);padding:22px 24px max(20px,env(safe-area-inset-bottom));gap:30px}
 .name-stage{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:34px;padding-block:20px;transform:none!important}
 #hero-title{display:grid;grid-template-columns:1fr 29%;grid-template-rows:auto auto;align-items:start;justify-content:stretch;column-gap:5%;row-gap:12px;font-size:23.5vw;line-height:.86;letter-spacing:-.075em;width:100%;white-space:nowrap}
 #hero-title>.name-word:first-child{grid-column:1/3;grid-row:1;justify-self:start}
 #hero-title>.name-word:last-child{grid-column:1;grid-row:2;justify-self:start}
 #hero-title>.hero-image{grid-column:2;grid-row:2;align-self:start;justify-self:end;left:0;width:100%;height:auto;aspect-ratio:1/1.12;margin-top:3px}
 .hero-image img{height:100%;object-position:50% 30%}
 .portrait-marks{inset:-12% -5%;width:110%;height:124%;rotate:-8deg}
 #hero-dates{position:relative;order:2;top:auto;left:auto;max-width:100%;width:100%;rotate:-2deg;scroll-margin-top:30px}
 .date-tag{font-size:12px;line-height:1.9;letter-spacing:-.025em}
 .date-tag:nth-child(2){margin-left:0;rotate:1deg}
 .hero-bottom{flex:none;display:grid;grid-template-columns:1fr auto;gap:14px 10px;margin-top:auto;padding-top:0;border-top:0;font-size:13px;align-items:center}
 .hero-identity{grid-column:1/3;grid-row:1;gap:12px;align-items:center}
 .hero-identity p{line-height:1.5}.hero-identity p span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#777}
 .equalizer{height:28px;gap:3px}
 .hero-intro{display:none}
 .hero-socials{grid-row:2;font-size:12px;gap:18px}
 .hero-bottom #motion{grid-row:2;color:#555;font-size:10px;padding:10px 0;-webkit-appearance:none;appearance:none}
 .hero-socials a{padding-block:8px}
}
@media(max-width:370px){header{gap:12px;padding-inline:18px}nav{gap:12px}.hero{padding-inline:20px}#hero-title{font-size:23vw}.hero-socials{gap:12px}}

/* Staggered type entrance, inspired by editorial motion. The layout stays in place. */
#hero-title>.name-word{animation:none}
html.intro-play #hero-title{animation:cover-settle 2.15s cubic-bezier(.22,1,.36,1) both;transform-origin:center}
html.intro-play .name-word{overflow:hidden;display:inline-block;padding:.1em .035em .18em;margin:-.1em -.035em -.18em}
html.intro-play .name-final{display:block;opacity:1;animation:cover-word 1.35s cubic-bezier(.22,1,.36,1) both;will-change:transform}
html.intro-play .name-word:last-child .name-final{animation-delay:.22s}
html.intro-play .hero-image img{animation:cover-image 1.15s .65s cubic-bezier(.22,1,.36,1) both;transform-origin:left center}
html.intro-play .hero-image{background:transparent}
html.intro-play .hero-image::after{animation:cover-detail .7s 1.3s both}
html.intro-play .portrait-marks{animation:cover-detail .8s 1.35s both}
html.intro-play header{animation:cover-chrome .9s 1.1s cubic-bezier(.22,1,.36,1) both}
html.intro-play #hero-dates,html.intro-play .hero-bottom{animation:cover-chrome .9s 1.3s cubic-bezier(.22,1,.36,1) both}
@keyframes cover-word{from{transform:translate3d(0,125%,0) skewY(7deg)}to{transform:translate3d(0,0,0) skewY(0)}}
@keyframes cover-settle{from{transform:translateY(22px) scale(.9)}to{transform:translateY(0) scale(1)}}
@keyframes cover-image{from{clip-path:inset(0 100% 0 0);transform:scale(1.14) skewX(-9deg)}to{clip-path:inset(0);transform:scale(1) skewX(0)}}
@keyframes cover-detail{from{opacity:0}to{opacity:1}}
@keyframes cover-chrome{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){html.intro-play #hero-title,html.intro-play .name-final,html.intro-play .hero-image img,html.intro-play .hero-image::after,html.intro-play .portrait-marks,html.intro-play header,html.intro-play #hero-dates,html.intro-play .hero-bottom{animation:none!important}}

/* Condensed artist lettering and scroll-led, full-frame image transition. */
@font-face{font-family:'SJ Condensed';src:url('assets/anton.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
#hero-title{font-family:'SJ Condensed',Impact,sans-serif;font-weight:400;font-size:clamp(80px,14.3vw,240px);letter-spacing:-.025em;line-height:1}
#hero-title .name-final{font-weight:400}
#hero-title>.hero-image{width:.73em;height:.8em;align-self:center}
.hero-sequence{height:220svh;position:relative}
.hero-pin{position:sticky;top:0;height:100svh;background:#fff;isolation:isolate;--cover-copy:1;--cover-type:1}
.hero-pin .hero{height:calc(100svh - 96px);min-height:0}
.hero-expansion{position:absolute;z-index:10;overflow:hidden;visibility:hidden;pointer-events:none;background:#0b0b0b;will-change:width,height,left,top}
.hero-expansion img{width:100%;height:100%;display:block;object-fit:cover;filter:grayscale(1) contrast(1.4)}
.hero-zooming .hero-image img{visibility:hidden}
.hero-pin .hero-bottom,.hero-pin #hero-dates,.hero-pin .portrait-marks{opacity:var(--cover-copy)}
.hero-pin .name-word{opacity:var(--cover-type)}
.hero-static{height:auto}
.hero-static .hero-pin{position:relative;height:auto;min-height:100svh}
.hero-static .hero-expansion{display:none}
@media(max-width:760px){
 #hero-title{font-size:26vw;letter-spacing:-.02em;line-height:1;grid-template-columns:1fr 29%;row-gap:0}
 #hero-title>.hero-image{width:100%;height:auto;aspect-ratio:1/1.12;align-self:center;margin-top:0}
 .hero-pin .hero{height:calc(100svh - 80px);min-height:580px;padding-top:8px}
 .hero-pin{height:max(100svh,660px)}
 .hero-sequence{height:max(220svh,1320px)}
 .name-stage{gap:28px;padding-block:12px}
 .hero-static{height:auto}
}
@media(prefers-reduced-motion:reduce){.hero-sequence{height:auto}.hero-pin{position:relative}.hero-expansion{display:none}}

.hero-sequence + .word-flight{margin-top:0}

.hero-zooming .hero-pin #hero-dates,.hero-zooming .hero-pin .hero-bottom,.hero-zooming .hero-pin .portrait-marks{opacity:var(--cover-copy)!important}

/* Individual letters drop from above, then settle on their shared baseline. */
.name-letter{display:inline-block}
html.intro-play #hero-title{animation:none}
html.intro-play .name-word{overflow:visible}
html.intro-play .name-final{animation:none;will-change:auto}
html.intro-play .name-letter{animation:letter-drop 1.15s calc(var(--letter-index)*55ms) both;will-change:transform;transform-origin:50% 90%}
html.intro-play .hero-pin{overflow:clip}
@keyframes letter-drop{
 0%{transform:translate3d(0,-100svh,0) rotate(var(--letter-tilt));animation-timing-function:cubic-bezier(.42,0,.8,.55)}
 68%{transform:translate3d(0,7px,0) rotate(0);animation-timing-function:ease-out}
 83%{transform:translate3d(0,-5px,0);animation-timing-function:ease-in-out}
 100%{transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){html.intro-play .name-letter{animation:none!important}}