/* LoHeart's own navigation and ink objects; no tape or sticky-note workflow. */
.nav{width:250px;flex-direction:row;flex-wrap:wrap;gap:7px 18px;top:calc(var(--bar) + 32px)}
.nav a{position:relative;background:transparent;color:#222;padding:2px 0;font-size:10px;letter-spacing:.06em;line-height:1.7}
.nav a:hover,.nav a.active{background:transparent;color:#111}
.nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#e83187;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a:hover:after,.nav a.active:after{transform:scaleX(1)}
.brand .serif{font-family:Georgia,serif;font-style:italic;font-weight:400}
.brand .serif:first-child{margin-left:0;letter-spacing:-3px}
.hero:before,.work-scrap:before,.hero-note:before{display:none}
.hero-note{background:transparent;box-shadow:none;transform:rotate(2deg);padding-top:17px}
.work-scrap{box-shadow:none;border-bottom:1px solid #111;background:#fff;padding:0 0 12px;transform:rotate(-5deg)}
.work-scrap:hover{box-shadow:none;transform:rotate(-2deg) translateY(-5px)}
.ink-cut{display:block;width:100%;aspect-ratio:512/660;position:relative;overflow:hidden;mix-blend-mode:multiply}
.ink-cut img{position:absolute;width:300%;max-width:none;height:auto;top:-29%;left:0}
.ink-browser img{left:-100%}.ink-spark img{left:-200%}
.sticker .ink-cut{animation:bob var(--duration,7s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.ink-mascot{--x:12%;--y:13%;--w:20%;--r:-9deg}
.ink-stars{--x:77%;--y:12%;--w:18%;--r:12deg}
.process-section{background:#fff;padding:110px 12%;border-top:1px solid #ddd}
.process-section h2{font-size:clamp(27px,3.4vw,44px);line-height:1.65;margin:35px 0 65px;max-width:820px;font-weight:400;text-align:left}
.process-section h2 span{background:transparent;padding:0}
.process-section h2 em{font-style:normal;color:#e83187}
.process-body{display:grid;grid-template-columns:30% 1fr;gap:9%;align-items:start}
.process-art{transform:rotate(-6deg);padding-top:20px;max-width:320px}
.art-caption{display:block;font:italic 16px Georgia,serif;text-align:center;margin-top:5px}
.process-step{display:grid;grid-template-columns:100px 1fr;gap:5px 20px;border-top:1px solid #222;padding:26px 0 32px;background:transparent;box-shadow:none}
.process-step:last-child{border-bottom:1px solid #222}
.process-step .number{grid-row:1/3;font:10px/2 var(--mono);padding-top:5px}
.process-step h3{font-size:21px;line-height:1.6;font-weight:400;margin:0}
.process-step p{grid-column:2;font-size:12px;line-height:2;margin:5px 0 0;max-width:480px}
@media(max-width:1000px){.nav{width:200px;gap:5px 13px}.nav a{font-size:9px}.ink-mascot{--x:12%;--y:17%;--w:23%}.ink-stars{--x:77%;--y:17%;--w:21%}.process-section{padding:90px 9%}.process-body{gap:6%}.process-step{grid-template-columns:75px 1fr;gap:5px 12px}.process-step h3{font-size:18px}}
@media(max-width:650px){.masthead{left:50%;top:calc(var(--bar) + 19px)}.nav{width:auto;left:8%;right:8%;top:calc(var(--bar) + 84px);justify-content:center;flex-wrap:nowrap;gap:18px;background:#ffffffed;padding:6px 0;border-bottom:1px solid #ddd;backdrop-filter:blur(8px)}.nav a{font-size:9px;letter-spacing:0}.ink-mascot{--x:6%;--y:23%;--w:29%}.ink-stars{--x:76%;--y:19%;--w:23%}.hero-title{top:32%;font-size:23px}.sticker.heart{--y:43%;--x:77%;--w:17%}.sticker.star{--y:24%}.sticker.star2{--y:46%}.hero-note{top:69%;padding:12px 8px;left:41%;width:55%}.hero-note p{font-size:11px}.work-scrap{top:52%;padding:0 0 10px}.process-section{padding:75px 9%}.process-section h2{font-size:26px;margin:28px 0 30px}.process-body{grid-template-columns:1fr;gap:30px}.process-art{width:160px;margin:0 auto;padding:0}.art-caption{font-size:13px;white-space:nowrap;margin-left:-20px}.process-step{grid-template-columns:70px 1fr;padding:23px 0;gap:5px 10px}.process-step .number{font-size:9px}.process-step h3{font-size:17px}.process-step p{font-size:11px}.side-contact{display:none}}
@media(prefers-reduced-motion:reduce){.nav a:after{transition:none}}
@media(min-width:1001px){.nav{width:330px}}
@media(max-width:650px){.ink-stars{--x:80%;--y:20%;--w:18%}.hero-note{top:73%}}
.handwritten-title{left:33%;top:21%;width:37%;aspect-ratio:1536/650;overflow:hidden;transform:rotate(-5deg);mix-blend-mode:multiply}
.handwritten-title img{position:absolute;display:block;left:0;top:-30.7%;width:100%;height:auto}
.hero-margin-note{position:absolute;left:73%;top:68%;width:23%;z-index:4;transform:rotate(8deg);mix-blend-mode:multiply;transition:transform .25s}
.hero-margin-note img{display:block;width:100%;height:auto}
.hero-margin-note:hover{transform:rotate(3deg)}
.scribble{display:none}
@media(max-width:1000px){.handwritten-title{left:32%;top:26%;width:40%}.hero-margin-note{left:73%;top:73%;width:24%}}
@media(max-width:650px){.handwritten-title{left:28%;top:32%;width:69%}.hero-margin-note{left:73%;top:55%;width:25%;transform:rotate(8deg)}}
.handwritten-caption{display:block;position:relative;width:300px;max-width:94%;aspect-ratio:1536/720;overflow:hidden;mix-blend-mode:multiply;transform:rotate(-4deg);margin-top:30px}
.handwritten-caption img{position:absolute;display:block;width:100%;height:auto;top:-23.6%;left:0}
.contact-note.handwritten-caption{width:290px;margin-top:35px}
@media(max-width:650px){.handwritten-caption{width:235px;margin-top:25px}.contact-note.handwritten-caption{width:235px;margin-top:28px}}
.profile-section{padding:100px 12%;display:grid;grid-template-columns:28% 1fr;gap:12%;align-items:center;background:#fff}
.maintenance-row{display:grid;grid-template-columns:1fr 1.6fr;gap:45px;margin:45px 0;padding:30px 0;border-bottom:1px solid #aaa}.maintenance-row h3{font-size:24px;font-weight:400;line-height:1.6;margin:15px 0}.maintenance-row p{font-size:12px;line-height:2;margin:0 0 15px}.maintenance-row .maintenance-fine{font-size:11px;color:#555}.maintenance-row .text-link{color:#b51762}
@media(max-width:650px){.maintenance-row{grid-template-columns:1fr;gap:12px;margin:30px 0}.maintenance-row h3{font-size:23px}.maintenance-row p{font-size:11px}}
.credits-block{margin-top:70px}.credits-block h3{font-size:20px;font-weight:400;margin-bottom:25px}.credits-list{margin:0}.credits-list>div{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:17px 0;border-top:1px solid #aaa}.credits-list>div:last-child{border-bottom:1px solid #aaa}.credits-list dt{font-size:14px}.credits-list dd{margin:0;font-size:12px;text-align:right}.profile-copy .profile-name{font-family:Arial,system-ui,sans-serif;font-style:normal}
@media(max-width:650px){.credits-block{margin-top:45px}.credits-list>div{grid-template-columns:1.4fr 1fr;gap:15px}.credits-list dt{font-size:12px}.credits-list dd{font-size:10px}}
.profile-illustration{transform:rotate(-7deg);max-width:270px}
.profile-copy h2{font-size:clamp(28px,3.3vw,44px);font-weight:400;line-height:1.6;margin:25px 0}
.profile-copy p{font-size:13px;line-height:2.1}.profile-copy .profile-name{font:italic 27px Georgia,serif;margin:25px 0 18px}.profile-name span{display:block;font:10px var(--mono);margin-top:9px}
.pricing-section{padding:100px 12%;border-top:1px solid #ddd;background:#fff}
.pricing-intro{font-size:12px;line-height:2}.price-row{display:grid;grid-template-columns:1fr 1.25fr .8fr;gap:30px;padding:33px 0;border-top:1px solid #222;align-items:start}.price-row:last-child{border-bottom:1px solid #222}
.price-label{font:10px var(--mono)}.price-row h3{font-size:20px;font-weight:400;margin:14px 0 0;line-height:1.6}.price-scope p{font-size:12px;line-height:2;margin:0 0 8px}.price-scope p+p{font-size:11px;color:#555}.price-amount{font:italic 30px Georgia,serif;white-space:nowrap;text-align:right}.price-amount>span{font:10px var(--mono);display:block;margin:9px 0 20px}.price-amount a{font:11px var(--mono);text-decoration:underline;text-underline-offset:5px}
.price-details{display:grid;grid-template-columns:1fr 1.6fr;gap:45px;margin-top:28px}.price-details p{font-size:11px;line-height:2;color:#555;margin:0}.price-details strong{font-weight:400;color:#111}
@media(min-width:1001px){.nav{width:375px}}
@media(max-width:1000px){.profile-section,.pricing-section{padding:85px 9%}.price-row{gap:18px;grid-template-columns:1fr 1fr}.price-scope{grid-column:1;grid-row:2}.price-amount{grid-column:2;grid-row:1/3}.price-details{gap:25px}}
@media(max-width:650px){.nav{left:5%;right:5%;gap:13px}.profile-section{padding:70px 9%;grid-template-columns:1fr;gap:22px}.profile-illustration{width:120px;margin:auto}.profile-copy h2{font-size:29px}.profile-copy p{font-size:12px}.pricing-section{padding:70px 9%}.pricing-intro{font-size:11px;margin-top:20px}.price-row{grid-template-columns:1fr;gap:15px;padding:26px 0}.price-scope{grid-column:1;grid-row:auto}.price-amount{grid-column:1;grid-row:auto;text-align:left;font-size:30px}.price-amount>span{display:inline;margin-left:8px}.price-amount a{display:block;margin-top:17px}.price-row h3{font-size:21px;margin-top:10px}.price-details{grid-template-columns:1fr;gap:16px}.price-details p{font-size:10px}}

.profile-copy .profile-name{font-family:Arial,system-ui,sans-serif;font-style:normal}

/* Keep the work preview below the handwritten headline at every viewport. */
.handwritten-title,.work-scrap{margin-top:-32px}
.work-scrap{top:calc(21% + min(15.66vw,210px) + 58px)}
@media(max-width:1000px){.work-scrap{top:calc(26% + 16.93vw + 54px)}}
@media(max-width:650px){
  .handwritten-title,.work-scrap{margin-top:-20px}
  .hero{height:max(780px,calc(465px + 90vw))}
  .work-scrap{top:calc(32% + 29.2vw + 48px)}
  .hero-note{top:auto;bottom:4%}
}
/* The small yellow star sits above and to the left of the opening “a”. */
.sticker.star{--x:31%;--y:14%}
@media(max-width:1000px){.sticker.star{--x:29%;--y:20%}}
@media(max-width:650px){.sticker.star{--x:31%;--y:25%}}

/* A small material-world counterpoint to the handwritten studio sign-off. */
.studio-bottom{display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,440px);align-items:center;gap:30px;margin-top:-60px}
.studio-bottom .handwritten-caption{align-self:start;margin-top:60px}
.studio-loop{position:relative;margin:0;aspect-ratio:1}
.studio-loop video{display:block;width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse at 50% 52%,#000 58%,transparent 76%)}
.studio-loop-toggle{position:absolute;right:10%;bottom:8%;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid #aaa;border-radius:50%;background:#ffffffdc;color:#555;font:10px var(--mono);cursor:pointer}
.studio-loop-toggle:hover{border-color:#e83187;color:#e83187}
.studio-loop-toggle:focus-visible{outline:2px solid #e83187;outline-offset:4px}
@media(max-width:1000px){.studio-bottom{grid-template-columns:minmax(190px,1fr) minmax(240px,360px);gap:10px;margin-top:-35px}.studio-bottom .handwritten-caption{width:260px;max-width:100%;margin-top:35px}}
@media(max-width:650px){.studio-bottom{grid-template-columns:1fr;margin-top:20px;gap:0}.studio-bottom .handwritten-caption{width:235px;margin-top:0}.studio-loop{width:min(100%,360px);justify-self:center;margin-top:20px}}

.intro-section{padding-bottom:35px}
.studio-loop{transform:translate(30px,-200px);margin-bottom:-180px}
@media(max-width:1000px){.studio-loop{transform:translate(20px,-30px);margin-bottom:-50px}}
@media(max-width:650px){.studio-loop{transform:translate(10px,0);margin-bottom:-30px}}
.intro-section h2,.intro-section>div>p{position:relative;z-index:1}

@media(max-width:650px){
  .work-section{padding-bottom:35px}
  .profile-section{padding-top:30px;gap:14px}
  .process-body{gap:16px}
  .process-section h2{margin-bottom:20px}
}