:root {
  color-scheme: light;
  --ink: #232521;
  --paper: #f7f7f3;
  --muted: #62675f;
  --line: #d8dbd2;
  --accent: #8b7751;
  --serif: 'Bodoni MT', 'Didot', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 36px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.75 Arial, Helvetica, sans-serif; }
a { color: inherit; text-underline-offset: 6px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
::selection { background: #d5ccb8; color: var(--ink); }
.header { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 29px 6%; border-bottom: 1px solid var(--line); }
.wordmark { font: 2rem/1.05 var(--serif); letter-spacing: -.055em; text-decoration: none; white-space: nowrap; }
.wordmark span { display: block; font: .75rem/1.5 Arial, sans-serif; letter-spacing: .16em; margin: 11px 0 0 3px; }
nav { display: flex; align-items: center; gap: 34px; font-size: .875rem; }
nav a { text-decoration: none; padding-block: 8px; }
nav a:hover { color: var(--accent); }
.nav-contact { border-bottom: 1px solid var(--ink); margin-left: 20px; }
.nav-contact span { margin-left: 26px; }
.hero { display: grid; grid-template-columns: 1.12fr 1fr; gap: 0 5%; padding: 50px 6% 0; }
.hero-copy { padding: 60px 0 28px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.eyebrow { font-size: .75rem; letter-spacing: .17em; line-height: 1.6; margin: 0 0 36px; }
.hero .eyebrow { color: var(--muted); }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.055em; }
h1 { font-size: clamp(4rem, 7.8vw, 8.4rem); line-height: 1.04; }
h1 em, h2 em { font-weight: 400; letter-spacing: -.06em; }
.hero-description { font-size: 1.125rem; line-height: 1.65; color: var(--muted); margin: 30px 0 22px; }
.hero-cta { display: inline-flex; align-items: center; gap: 45px; font-size: .875rem; padding-bottom: 10px; border-bottom: 1px solid var(--ink); text-decoration: none; }
.hero-cta:hover { color: var(--accent); border-color: var(--accent); }
.hero-bottom { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 58px; }
.hero-bottom p { font-size: .75rem; line-height: 1.7; letter-spacing: .13em; color: var(--muted); margin: 0; }
.round-link { border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; width: 48px; height: 48px; font-size: 1.3rem; text-decoration: none; transition: border-color .3s; }
.round-link:hover { border-color: var(--ink); }
figure { margin: 0; }
.hero-image { position: relative; min-width: 0; align-self: start; }
.hero-image img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
.hero-image figcaption { display: flex; justify-content: space-between; gap: 14px; padding-top: 15px; font-size: .75rem; letter-spacing: .075em; color: var(--muted); }
.hero-image figcaption span:last-child { text-align: right; }
.hero-inquiry { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-decoration: none; padding: 27px 0; margin-top: 58px; font-size: .75rem; letter-spacing: .15em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-inquiry:hover { color: var(--accent); }
.section { padding: 110px 8%; }
.section-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.section-top .eyebrow { margin: 0; }
.text-link { font-size: .875rem; display: inline-block; }
.work-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin: 65px 0 70px; }
h2 { font-size: clamp(3.2rem, 5.5vw, 6rem); line-height: 1.12; }
.work-heading p { margin: 0 5% 9px 0; color: var(--muted); font-size: 1rem; }
.gallery { display: grid; grid-template-columns: 1.06fr .94fr; gap: 84px 11%; align-items: start; }
.piece { display: block; text-decoration: none; min-width: 0; }
.piece-two { margin-top: 145px; }
.piece-three { margin-top: -60px; }
.piece-four { margin-top: 90px; }
.image-frame { position: relative; overflow: hidden; }
.piece img { width: 100%; height: auto; display: block; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.view-piece { position: absolute; bottom: 20px; right: 20px; background: var(--paper); color: var(--ink); padding: 10px 14px; font-size: .75rem; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.piece:hover img { transform: scale(1.025); }
.piece:hover .view-piece, .piece:focus-visible .view-piece { opacity: 1; transform: translateY(0); }
.piece figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 18px; font-size: 1rem; }
.number { font-size: .75rem; color: var(--muted); margin-right: 10px; }
.category { font-size: .75rem; letter-spacing: .03em; text-align: right; color: var(--muted); }
.artist { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: .95fr 1.05fr; gap: 12%; align-items: center; }
.artist-photo { position: relative; margin: 0 5%; }
.artist-photo img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: center 30%; display: block; }
.photo-caption { display: block; font-size: .75rem; letter-spacing: .1em; padding-top: 18px; color: #c6c9bf; }
.artist-content { max-width: 440px; }
.artist .eyebrow { color: #c6c9bf; }
.artist-lead { font: 1.65rem/1.4 var(--serif); letter-spacing: -.02em; margin: 30px 0 22px; }
.artist-content p:not(.artist-lead):not(.eyebrow) { color: #c6c9bf; margin-bottom: 30px; }
.art { background: #edefe8; }
.coming-soon { border-bottom: 1px solid var(--accent); color: #6d5b38; font-size: .75rem; letter-spacing: .14em; padding-bottom: 7px; white-space: nowrap; }
.art-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9%; align-items: center; margin: 68px 0 80px; }
.art-content > div { max-width: 375px; }
.art-lead { font: 2.15rem/1.25 var(--serif); letter-spacing: -.03em; }
.art-content p:not(.art-lead) { color: var(--muted); }
.art-content .text-link { margin-top: 14px; }
.art-endnote { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid #cbd0c3; padding-top: 24px; font-size: .75rem; letter-spacing: .1em; color: var(--muted); }
.contact { padding-block: 100px 115px; }
.contact { position: relative; isolation: isolate; overflow: hidden; background: #171717; color: #faf8f4; }
.contact::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 48% 51%, rgba(17,17,17,.94) 12%, rgba(17,17,17,.82) 42%, rgba(17,17,17,.28) 82%), url('tattoo-cartridges-backdrop.webp') center / cover no-repeat; pointer-events: none; }
.contact .contact-copy p { color: #e0ded9; }
.contact .contact-copy p:first-child { color: #faf8f4; }
.contact .button { background: #faf8f4; color: #191919; }
.contact .button:hover { background: #e5e1d9; }
.contact.section { padding-inline: 18%; padding-block: 150px; }
.contact h2 { font-size: clamp(2.8rem, 4.2vw, 5rem); }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9%; align-items: start; }
.contact-copy { max-width: 400px; margin-top: 125px; }
.contact-copy p { margin: 0 0 20px; color: var(--muted); }
.contact-copy p:first-child { color: var(--ink); font: 1.6rem/1.4 var(--serif); }
.button { display: flex; align-items: center; justify-content: space-between; gap: 22px; background: var(--ink); color: var(--paper); padding: 19px 24px; text-decoration: none; font-size: .875rem; transition: background .3s; min-height: 56px; margin-top: 28px; }
.button:hover { background: #44493f; }
.email { display: inline-block; font-size: .875rem; margin-top: 20px; overflow-wrap: anywhere; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 38px 6%; border-top: 1px solid var(--line); }
.footer>a:not(.wordmark), .footer>span { font-size: .75rem; }
.footer>span { color: var(--muted); }
.footer .wordmark { font-size: 1.6rem; }
.skip { position: fixed; left: 20px; top: -100px; background: white; padding: 12px; z-index: 5; }
.skip:focus { top: 10px; }
@media(min-width:1700px) {
  .header,.hero,.footer { padding-inline: max(6%, calc((100vw - 1500px)/2)); }
  .section { padding-inline: max(8%, calc((100vw - 1400px)/2)); }
}
@media(max-width:1000px) {
  .header { padding-inline: 5%; }
  nav { gap: 22px; }
  .nav-contact { margin-left: 0; }
  .hero { padding-inline: 5%; gap: 0 4%; }
  .hero-copy { padding-top: 18px; }
  .hero-bottom { padding-top: 30px; }
  .hero-image figcaption span:last-child { display: none; }
  .section { padding: 80px 6%; }
  .gallery { gap: 60px 7%; }
  .piece figcaption { display: block; }
  .category { display: block; text-align: left; margin-top: 5px; font-size: .75rem; }
  .artist { gap: 8%; }
  .artist-photo { margin: 0; }
  .footer { flex-wrap: wrap; }
  .back-top { display: none; }
}
@media(max-width:680px) {
  .header { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 23px 6% 16px; gap: 22px 10px; }
  .wordmark { grid-column: 1/3; font-size: 1.85rem; }
  nav { display: contents; }
  nav a { font-size: .875rem; grid-row: 2; padding: 0; white-space: nowrap; }
  nav a:nth-child(2) { text-align: center; }
  nav a:nth-child(3) { text-align: right; }
  nav .nav-contact { grid-row: 1; grid-column: 3; text-align: right; justify-self: end; padding-bottom: 4px; }
  .nav-contact span { margin-left: 12px; }
  .hero { grid-template-columns: 1fr; padding: 42px 6% 0; }
  .hero-copy { padding: 0 0 32px; }
  .eyebrow { margin-bottom: 25px; }
  h1 { font-size: clamp(3.7rem, 14vw, 5.8rem); line-height: 1.06; }
  .hero-description { font-size: 1rem; margin: 24px 0 20px; }
  .hero-bottom { padding-top: 35px; }
  .hero-cta { gap: 35px; }
  .hero-image img { aspect-ratio: 4/5; }
  .hero-image figcaption { font-size: .75rem; }
  .hero-inquiry { margin-top: 32px; padding: 20px 0; font-size: .75rem; letter-spacing: .06em; }
  .section { padding: 58px 6%; }
  .section-top { align-items: start; gap: 18px; }
  .section-top .eyebrow { font-size: .75rem; letter-spacing: .08em; }
  .section-top .text-link { font-size: .875rem; }
  .work-heading { margin: 38px 0 40px; display: block; }
  h2 { font-size: clamp(2.85rem, 10.4vw, 4.5rem); }
  .work-heading p { margin: 22px 0 0; }
  .gallery { grid-template-columns: 1fr; gap: 42px; }
  .piece-two,.piece-three,.piece-four { margin: 0; }
  .piece figcaption { display: flex; gap: 10px; font-size: .95rem; }
  .category { margin: 0; text-align: right; font-size: .75rem; }
  .view-piece { opacity: 1; transform: none; bottom: 12px; right: 12px; font-size: .75rem; }
  .artist { grid-template-columns: 1fr; gap: 42px; }
  .artist-photo { margin: 0 5%; }
  .artist-content { max-width: none; }
  .artist h2 { font-size: 4.6rem; }
  .artist-lead { font-size: 1.5rem; }
  .art-content { grid-template-columns: 1fr; gap: 20px; margin: 38px 0 44px; }
  .art-content h2 { font-size: 4.4rem; }
  .art-lead { font-size: 1.9rem; }
  .art-endnote { display: block; }
  .art-endnote span { display: block; margin-top: 6px; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact.section { padding: 110px 12%; }
  .contact-copy { max-width: none; margin-top: 20px; }
  .contact::before { inset: 0; background-size: 100% 100%, auto 100%; background-position: center; }
  .footer { padding: 30px 6%; align-items: center; gap: 30px; }
  .footer>span { width: 100%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } * { transition: none!important; animation: none!important; } }
@media(forced-colors:active) { .button,.nav-contact,.round-link { border: 1px solid ButtonText; } }

.motion-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 5; border: 1px solid #bdbdb4; border-radius: 30px; padding: 11px 17px; color: #232521; background: #f7f7f3f5; font: .875rem/1.5 Arial,sans-serif; cursor: pointer; box-shadow: 0 3px 16px #0001; }
.motion-toggle:hover { background: #e8e8e1; }
.motion-toggle:focus-visible { outline: 2px solid #8b7751; outline-offset: 4px; }
.footer { padding-bottom: 80px; }
.studio-detail { padding: 58px 8% 42px; background: #fff; text-align: center; }
.studio-detail img { display: block; width: min(100%, 860px); height: auto; margin-inline: auto; }
.studio-detail figcaption { font-size: .75rem; letter-spacing: .18em; margin-top: 20px; color: var(--muted); }
@media(max-width:680px){.studio-detail{padding:30px 5%}.studio-detail figcaption{margin-top:10px}}
@media(max-width:680px){.motion-toggle{right:12px;bottom:12px}}

.piece-five { grid-column: 1 / -1; width: min(100%, 640px); justify-self: center; }
.piece-five img { aspect-ratio: 4 / 5; object-fit: contain; }

.hero-image img { aspect-ratio: 1440 / 1664; object-fit: contain; }

.piece-bird { grid-column: 1 / -1; width: min(100%, 640px); justify-self: center; }

.piece-jackalope { grid-column: 1 / -1; width: min(100%, 640px); justify-self: center; }
.instagram-button { display:inline-block; padding:12px 20px; border:1px solid var(--ink); text-decoration:none; } .instagram-button:hover { background:var(--ink); color:var(--paper); } .piece:hover img { transform:none; }
.apparel-page { min-height:65vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:90px 6%; text-align:center; }
.apparel-page .eyebrow { color:var(--muted); }
.apparel-page .text-link { margin-top:40px; }
nav [aria-current="page"] { border-bottom:1px solid var(--ink); }
@media(max-width:1000px) and (min-width:681px) { .header { flex-wrap:wrap; } .header nav { flex-wrap:wrap; } }
@media(max-width:680px) { .header { grid-template-columns:repeat(4,minmax(0,1fr)); } .header .wordmark { grid-column:1/4; } nav a { grid-row:2; font-size:.8rem; text-align:center; } nav a:nth-child(1){grid-column:1;text-align:left} nav a:nth-child(2){grid-column:2} nav a:nth-child(3){grid-column:3;text-align:center} nav a:nth-child(4){grid-column:4;text-align:right} nav .nav-contact{grid-row:1;grid-column:4}.apparel-page{min-height:60vh;padding:70px 6%}.apparel-page h1{font-size:clamp(3rem,13vw,5rem)} }
@media(max-width:680px) { .header{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:14px}.header .wordmark{grid-column:1/5}nav a:nth-child(1){grid-row:2;grid-column:1/3;text-align:left}nav a:nth-child(2){grid-row:2;grid-column:3/5;text-align:center}nav a:nth-child(3){grid-row:2;grid-column:5/7;text-align:right}nav a:nth-child(4){grid-row:3;grid-column:1/4;text-align:left}nav a:nth-child(5){grid-row:3;grid-column:4/7;text-align:right}nav .nav-contact{grid-row:1;grid-column:5/7} }
.header .wordmark { display:block; width:250px; flex-shrink:0; line-height:0; }
.header-logo { display:block; width:100%; height:auto; }
@media(max-width:680px) { .header .wordmark { width:min(220px,100%); } }
.header .wordmark { width:180px; }
.art { position:relative; padding-top:200px; margin-top:110px; }
.jackalope-decoration { position:absolute; width:280px; height:auto; top:-145px; right:8%; pointer-events:none; z-index:1; }
@media(max-width:680px) { .header .wordmark{width:160px;max-width:100%}.art{margin-top:90px;padding-top:150px}.jackalope-decoration{width:210px;top:-100px;right:6%} }
.work,.artist { position:relative; }
.floral-accent { position:absolute; width:100px; height:auto; pointer-events:none; z-index:1; }
.floral-work { top:65px; left:0; transform:translateX(-20%) rotate(18deg); width:85px; }
.floral-artist { right:0; bottom:18px; width:100px; transform:rotate(-12deg); }
.floral-contact { left:20px; bottom:20px; width:120px; transform:rotate(16deg); }
@media(max-width:680px) { .floral-work{width:45px;top:145px;left:0}.floral-artist{width:62px;bottom:8px;right:4px}.floral-contact{width:65px;left:4px;bottom:10px} }
body { overflow-x:clip; } .header nav { flex-wrap:wrap; }
/* Continuous botanical margins keep decoration outside the reading area. */
.botanical-page{position:relative;isolation:isolate;overflow:clip}
.vine-edge{position:absolute;top:45px;bottom:0;width:clamp(90px,12vw,180px);background:url('floral-vine.webp') center top / 100% auto repeat-y;pointer-events:none;z-index:2}
.vine-left{left:clamp(-48px,-3vw,-18px)}
.vine-right{right:clamp(-48px,-3vw,-18px);transform:scaleX(-1);background-position:center 280px}
.botanical-page>.section,.botanical-page>.hero,.botanical-page>.studio-detail{padding-left:15%;padding-right:15%}
.botanical-page .artist{gap:9%}.botanical-page .artist-photo{margin:0}
.botanical-page .contact.section{padding-left:18%;padding-right:18%}
.botanical-page .jackalope-decoration{right:17%;width:250px;top:-130px}
.header{padding:10px 5%;gap:24px;justify-content:flex-start}
.header .wordmark{width:145px}
.header nav{gap:22px;margin-left:auto;font-size:.82rem}
.header .nav-contact{margin-left:0}.header .nav-contact span{margin-left:10px}
@media(min-width:681px) and (max-width:1000px){.header{flex-wrap:nowrap;gap:20px}.header nav{gap:14px;flex-wrap:nowrap;font-size:.75rem}.header .wordmark{width:120px}.header .nav-contact span{display:none}}
@media(max-width:680px){.header{padding:8px 6% 12px;row-gap:4px;column-gap:8px}.header .wordmark{width:125px}.header nav a{padding:6px 0}.header nav{margin:0}.vine-edge{width:68px;top:30px}.vine-left{left:-34px}.vine-right{right:-34px;background-position:center 120px}.botanical-page>.section,.botanical-page>.hero,.botanical-page>.studio-detail{padding-left:15%;padding-right:15%}.botanical-page .contact.section{padding-left:15%;padding-right:15%}.botanical-page .jackalope-decoration{width:190px;right:16%;top:-100px}.botanical-page .art{padding-top:140px}.botanical-page .section-top{flex-wrap:wrap}.botanical-page .piece figcaption{display:block}.botanical-page .category{text-align:left;margin-top:5px}.botanical-page h1{font-size:clamp(2.9rem,11vw,4.5rem)}.botanical-page h2,.botanical-page .art-content h2{font-size:clamp(2.5rem,9vw,3.8rem)}.botanical-page .hero-inquiry{flex-wrap:wrap}}
/* Separate, asymmetric flower trails with generous clear reading margins. */
.botanical-page .art{margin-top:0;padding-top:90px}
.flower-trail{position:absolute;width:115px;height:360px;pointer-events:none;z-index:2;mask-image:linear-gradient(transparent,#000 12%,#000 87%,transparent)}
.flower-trail img{position:absolute;width:100%;height:auto}
.flower-trail img:first-child{width:76%;top:0;left:10%;transform:rotate(-13deg)}
.flower-trail img:last-child{width:115%;top:125px;left:-10%;transform:rotate(12deg)}
.trail-one{top:12%;left:-25px;transform:rotate(-8deg)}
.trail-two{top:43%;right:-32px;transform:rotate(9deg) scaleX(-1)}
.trail-three{top:78%;left:-30px;transform:rotate(-12deg)}
.jackalope-visitor{position:fixed;bottom:18px;left:-130px;width:100px;z-index:4;pointer-events:none;opacity:0}
.jackalope-visitor img{display:block;width:100%;height:auto}
.jackalope-visitor.is-hopping{animation:jackalope-visit 5s linear both}
.jackalope-visitor.is-hopping img{animation:jackalope-hop .7s ease-in-out infinite}
@keyframes jackalope-visit{0%{left:-120px;opacity:0}10%{opacity:1}45%,65%{left:12px;opacity:1}95%{opacity:1}100%{left:-120px;opacity:0}}
@keyframes jackalope-hop{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(-7deg)}}
.motion-paused .jackalope-visitor{display:none}
@media(max-width:680px){.flower-trail{width:54px;height:260px}.flower-trail img:last-child{top:78px;width:135%}.trail-one{left:-22px}.trail-two{right:-23px}.trail-three{left:-24px}.botanical-page .art{padding-top:58px}.jackalope-visitor{width:65px;bottom:8px}}
@media(prefers-reduced-motion:reduce){.jackalope-visitor{display:none}}
/* Complete single stems curve out through the sides, never a masked cut. */
.flower-trail{height:auto;width:clamp(90px,12vw,160px);mask-image:none;overflow:visible}
.flower-trail img,.flower-trail img:first-child,.flower-trail img:last-child{display:block;position:static;width:100%;height:auto;transform:none}
.trail-two{top:auto;bottom:70px;right:-35px;left:auto;transform:rotate(-24deg);transform-origin:bottom center}
.trail-three{top:auto;bottom:25px;left:-38px;right:auto;transform:rotate(26deg);transform-origin:bottom center}
.jackalope-visitor{z-index:30}
.jackalope-visitor.is-hopping{animation:jackalope-crossing 6s linear both}
@keyframes jackalope-crossing{0%{left:-130px;opacity:1}100%{left:calc(100vw + 20px);opacity:1}}
@media(max-width:680px){.flower-trail{width:70px}.trail-two{right:-28px;bottom:45px}.trail-three{left:-30px;bottom:10px}}
.artist-label{display:flex;align-items:center;gap:32px;margin-bottom:28px}
.artist-label .eyebrow{margin:0}
.artist-label img{display:block;width:48px;height:auto;flex:none;transform:rotate(12deg)}
@media(max-width:680px){.artist-label{gap:26px}.artist-label img{width:42px}}
.art-content > .art-heading-floral { position:relative; max-width:none; padding-bottom:160px; }
.art-heading-flower { position:absolute; width:100px; height:auto; right:0; top:calc(100% - 145px); transform:rotate(12deg); pointer-events:none; }
@media(max-width:680px){.art-content > .art-heading-floral{padding-bottom:135px}.art-heading-flower{width:82px;top:calc(100% - 125px);right:4px}}
.artist-name-floral{display:flex;align-items:center;gap:28px;width:max-content;max-width:100%}
.artist-name-floral h2{flex:0 1 auto;min-width:0}
.artist-name-floral img{display:block;width:clamp(95px,10vw,145px);height:auto;flex:none;transform:translateY(25px) rotate(10deg);pointer-events:none}
@media(min-width:681px) and (max-width:1000px){.artist-name-floral{gap:20px}.artist-name-floral h2{font-size:clamp(2.7rem,4.5vw,4rem)}.artist-name-floral img{width:90px}}
@media(max-width:680px){.artist-name-floral{gap:18px}.artist-name-floral img{width:85px;transform:translateY(20px) rotate(10deg)}.botanical-page .artist-name-floral h2{font-size:clamp(2.2rem,8vw,3.4rem)}}
.art-heading-flower { transform:translateY(-96px) rotate(12deg); }
.elephant-photo-wrap{position:relative}
.hero-image .elephant-corner{position:absolute;right:-28px;bottom:-23px;width:170px;height:auto;aspect-ratio:auto;object-fit:contain;pointer-events:none}
.hero-image figcaption{padding-top:38px}
.piece-two{position:relative}
.piece-two .cat-dragon-flower{position:absolute;width:70px;height:auto;right:30%;bottom:calc(100% + 20px);pointer-events:none;transform:rotate(18deg)}
.memorial-flower-wrap{display:flex;justify-content:center;padding:35px 0 25px}
.piece-five .memorial-flower-wrap img{width:135px;height:auto;aspect-ratio:auto;transform:rotate(25deg);pointer-events:none}
.art-heading-flower{width:240px;max-width:100%;height:auto;right:-8px;top:auto;bottom:4px;transform:none}
@media(max-width:680px){.hero-image .elephant-corner{width:125px;right:-20px;bottom:-18px}.hero-image figcaption{padding-top:32px}.piece-two{margin-top:105px}.piece-two .cat-dragon-flower{width:62px;right:12%;bottom:calc(100% + 12px)}.piece-five .memorial-flower-wrap img{width:115px}.art-heading-flower{width:205px;top:auto;bottom:0;right:0}.art-content > .art-heading-floral{padding-bottom:145px}}
.artist-name-floral{gap:14px}.artist-name-floral img{transform:translateY(8px)}
.hero-image .elephant-corner{right:-24px;bottom:auto;top:calc(100% + 18px);width:145px}
.hero-image figcaption{padding-top:135px}
@media(max-width:680px){.artist-name-floral{gap:14px}.artist-name-floral img{transform:translateY(8px)}.hero-image .elephant-corner{right:-12px;top:calc(100% + 16px);bottom:auto;width:115px}.hero-image figcaption{padding-top:110px}}
.piece-two{margin-top:330px}
.piece-two .cat-dragon-flower{height:288px;width:auto;max-width:90%;object-fit:contain;right:12%;bottom:calc(100% + 24px);transform:none}
.piece-five .memorial-flower-wrap img{width:384px;max-width:100%;height:auto;transform:none}
.art-heading-flower{transform:translateY(-72px)}
.snake-path{position:relative;height:130px;margin-top:24px;overflow:hidden;width:100%}
.snake-traveller{position:absolute;top:15px;left:0;width:288px;animation:snake-travel 12s linear infinite}
.artist-photo .snake-traveller img{display:block;width:288px;max-width:none;height:auto;aspect-ratio:auto;object-fit:contain;animation:snake-undulate 1.4s ease-in-out infinite}
@keyframes snake-travel{from{left:-288px}to{left:100%}}
@keyframes snake-undulate{0%,100%{transform:translateY(0) skewY(-2deg)}50%{transform:translateY(7px) skewY(2deg)}}
.motion-paused .snake-traveller,.motion-paused .snake-traveller img{animation-play-state:paused}
@media(max-width:680px){.piece-two{margin-top:330px}.piece-two .cat-dragon-flower{height:288px;width:auto;max-width:90%;right:12%}.art-heading-flower{transform:translateY(-72px)}}
@media(prefers-reduced-motion:reduce){.snake-traveller{animation:none;left:0;width:min(288px,100%)}.artist-photo .snake-traveller img{animation:none;width:100%}}
/* The open centre of the corner flourish sits outside the photo edge. */
.hero-image .elephant-corner{width:170px;top:auto;right:-67px;bottom:-53px;}
.hero-image figcaption{padding-top:78px}
@media(max-width:680px){.hero-image .elephant-corner{width:125px;top:auto;right:-50px;bottom:-40px}.hero-image figcaption{padding-top:65px}}
.twinkle-field{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.twinkle-field span{position:absolute;left:var(--x);top:var(--y);font-size:var(--size);line-height:1;color:#a06b37;text-shadow:0 0 3px #cf9e5c30;opacity:.45;animation:gentle-twinkle 5s ease-in-out var(--delay) infinite}
@keyframes gentle-twinkle{0%,100%{opacity:.2;transform:scale(.78)}50%{opacity:.75;transform:scale(1.08)}}
.motion-paused .twinkle-field span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.twinkle-field span{animation:none;opacity:.4}}
.snake-path{height:130px;overflow:visible}
.snake-hole{position:absolute;top:43px;width:26px;height:39px;border-radius:50%;background:radial-gradient(ellipse at center,#080906 42%,#10120e 65%,#73654b 70%,#302d25 78%,transparent 82%);box-shadow:inset 3px 1px 5px #0009;z-index:1}
.snake-hole-left{left:0;transform:rotate(-9deg)}
.snake-hole-right{right:0;transform:rotate(9deg)}
.snake-tunnel{position:absolute;left:13px;right:13px;top:0;height:130px;overflow:hidden;z-index:2;mask-image:linear-gradient(to right,transparent,#000 5px,#000 calc(100% - 5px),transparent)}
.snake-traveller{top:15px}
.botanical-page .artist{padding-bottom:220px}
.artist>.snake-path,.artist-content>.snake-path{position:absolute;left:0;right:0;bottom:25px;width:100%;height:130px;margin:0;overflow:hidden}
.artist .snake-tunnel{left:0;right:18px;mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent)}
.artist .snake-hole-right{right:4px}
.artist .snake-traveller{animation-duration:18s}
.artist .snake-traveller img{display:block;width:288px;height:auto;max-width:none;animation:snake-undulate 1.4s ease-in-out infinite}
.botanical-page .art{padding-bottom:220px}
.meadow-border{position:absolute;bottom:0;left:0;right:0;height:165px;background:url('meadow-grass.webp') center bottom / 560px 187px repeat-x;pointer-events:none}
@media(max-width:680px){.botanical-page .artist{padding-bottom:195px}.botanical-page .art{padding-bottom:190px}.meadow-border{height:140px;background-size:480px 160px}}
.motion-paused .artist .snake-traveller,.motion-paused .artist .snake-traveller img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.artist .snake-traveller,.artist .snake-traveller img{animation:none}}
.piece-two .cat-dragon-flower { bottom:calc(100% + 72px); } @media(max-width:680px){.piece-two .cat-dragon-flower{bottom:calc(100% + 72px)}.piece-two{margin-top:378px}}
.piece-five .memorial-flower-wrap img{width:480px;max-width:100%;height:auto;}
.piece-two .reading-mouse{position:absolute;width:105px;height:auto;max-width:none;right:-125px;top:48%;transform:none;pointer-events:none}
@media(max-width:1000px){.piece-two .reading-mouse{width:75px;right:-85px}}
@media(max-width:680px){.piece-two .reading-mouse{width:58px;right:-66px;top:55%}}
/* Restore the portrait-width, two-hole snake animation. */
.botanical-page .artist{padding-bottom:110px}
.artist .artist-photo .snake-path{position:relative;left:auto;right:auto;bottom:auto;width:100%;height:130px;margin-top:24px;overflow:visible}
.artist .snake-tunnel{left:13px;right:13px;mask-image:linear-gradient(to right,transparent,#000 5px,#000 calc(100% - 5px),transparent)}
.artist .snake-hole-right{right:0}
.artist .snake-traveller{animation-duration:12s}
@media(max-width:1000px){.botanical-page .artist{padding-bottom:80px}}
@media(max-width:680px){.botanical-page .artist{padding-bottom:58px}}
.piece-two .reading-mouse{width:150px;right:auto;left:-175px;top:70%}
.snake-page-crease{position:absolute;left:0;top:18px;width:24px;height:88px;z-index:3;background:linear-gradient(100deg,#232521 10%,#151711 48%,#55584c 52%,#2c2f25 64%,transparent 85%);clip-path:polygon(0 0,75% 12%,100% 87%,0 100%);pointer-events:none}
.artist .snake-tunnel{left:12px;right:0;mask-image:linear-gradient(to right,transparent,#000 10px,#000 calc(100% - 12px),transparent)}
@media(max-width:1000px){.piece-two .reading-mouse{width:110px;left:-130px;right:auto;top:76%}}
@media(max-width:680px){.piece-two .reading-mouse{width:100px;left:-35px;right:auto;top:auto;bottom:-155px}.piece-two{margin-bottom:155px}}
/* Stars stay within the white hero and portfolio, clear of the ink still life. */
.hero,.work{position:relative}
.twinkle-field span::before,.twinkle-field span::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);opacity:.7}
.twinkle-field span::before{width:1px;height:1.65em}
.twinkle-field span::after{width:1.65em;height:1px}
.hero-lavender{display:block;width:min(320px,100%);height:auto;margin:24px auto 0;pointer-events:none}
/* Enlarge the elephant flourish, retaining its bottom/right placement. */
.hero-image .elephant-corner{width:218px}
@media(max-width:680px){.hero-image .elephant-corner{width:173px}}
.hero > .hero-lavender{grid-column:1/-1;justify-self:center;margin:24px auto 0}
.piece-two .reading-mouse{width:200px;left:-248px;right:auto;top:80px;bottom:auto}
@media(min-width:681px) and (max-width:1000px){.piece-two .reading-mouse{width:170px;left:-218px;top:80px}}
@media(max-width:680px){.piece-two .reading-mouse{width:170px;left:auto;right:0;top:auto;bottom:calc(100% + 48px)}.piece-two{margin-top:650px}.piece-two .cat-dragon-flower{bottom:calc(100% + 330px)}}
/* A fine paper slit, with only a narrow shadow at the opening. */
.snake-page-crease{left:10px;top:20px;width:2px;height:85px;background:#10120f;clip-path:none;box-shadow:-2px 0 3px #0006,1px 0 1px #73766980;transform:rotate(-5deg)}
/* Detached long rays and shorter diagonal shimmer marks. */
.twinkle-field span::before,.twinkle-field span::after{width:1.85em;height:1.85em;background:linear-gradient(currentColor,currentColor) center top/1px 18% no-repeat,linear-gradient(currentColor,currentColor) center bottom/1px 18% no-repeat,linear-gradient(currentColor,currentColor) left center/18% 1px no-repeat,linear-gradient(currentColor,currentColor) right center/18% 1px no-repeat;opacity:.75}
.twinkle-field span::after{width:1.55em;height:1.55em;transform:translate(-50%,-50%) rotate(45deg);background-size:1px 12%,1px 12%,12% 1px,12% 1px;opacity:.6}
/* Preserve the corner composition with a little more air around the photo. */
.hero-image .elephant-corner{right:-91px;bottom:-77px}
@media(max-width:680px){.hero-image .elephant-corner{right:-74px;bottom:-64px}}
.piece-two .reading-mouse{transform:translate(-72px,-72px)}
.portfolio-canopy{position:relative;height:clamp(220px,31vw,390px);margin:35px 0 32px;pointer-events:none}
.portfolio-canopy img{position:absolute;right:calc(-21.43% - 18px);top:0;width:min(78vw,900px);height:100%;object-fit:contain;object-position:right center}
.meadow-sword{position:absolute;bottom:0;left:63%;transform:translateX(-50%);width:360px;max-width:65vw;height:auto;pointer-events:none;z-index:2}
.meadow-border{mask-image:linear-gradient(to right,#000 0%,#000 48%,transparent 57%,transparent 69%,#000 78%,#000 100%)}
.botanical-page .art{padding-bottom:310px}
.header nav{gap:clamp(12px,2vw,28px)}
.novel-title{font-size:clamp(2.5rem,6vw,5.5rem);line-height:1.15;max-width:950px}
.novel-status{font:italic 1.8rem var(--serif);margin:32px 0}
@media(max-width:680px){.portfolio-canopy{height:210px;margin-top:25px}.portfolio-canopy img{width:100vw;max-width:none}.meadow-sword{width:275px;max-width:75vw;left:60%}.botanical-page .art{padding-bottom:260px}.header nav a[href="graphic-novel.html"]{grid-column:1/-1;justify-self:center}}
/* Keep the reading mouse at its upper resting position. */
.piece-two .reading-mouse{animation:none!important;transition:none!important}
/* Expand the memorial ornament while keeping its centre aligned. */
.piece-five .memorial-flower-wrap img{width:672px;max-width:calc(100vw - 36px);height:320px;object-fit:fill}
.memorial-flower-wrap{overflow:visible}
/* A continuous grass bed with feathered edges around the sword clearing. */
.meadow-border{mask-image:none}
.meadow-sword{mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);filter:none}
@media(max-width:680px){.piece-five .memorial-flower-wrap img{height:auto;min-height:180px}}
.piece-five .memorial-flower-wrap img{flex:none;height:256px}
@media(max-width:680px){.piece-five .memorial-flower-wrap img{height:210px;min-height:0}}
.twinkle-field .star-glow{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 3px 1px #fff,0 0 7px 2px #fff7;z-index:2}
.inquiry-page{max-width:1000px;margin:auto;padding:65px 6% 100px}
.inquiry-page h1{font-size:clamp(3rem,6vw,5rem)}
.inquiry-page fieldset{border:0;border-top:1px solid var(--line);padding:28px 0;margin:35px 0 0;min-width:0}
.inquiry-page legend{font:1.7rem var(--serif);padding-right:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.inquiry-page label{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;font-size:.9rem}
.inquiry-page input,.inquiry-page select,.inquiry-page textarea{font:1rem/1.5 Arial,sans-serif;padding:12px;border:1px solid #9b9d93;border-radius:2px;background:#fff;color:#232521;width:100%;min-width:0}
.inquiry-page textarea{resize:vertical}
.inquiry-page .button{cursor:pointer;border:0}
.form-help{font-size:.85rem;color:var(--muted)}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.commission-heading{max-width:100%!important}
.commission-mushrooms{display:block;width:340px;max-width:100%;height:auto;margin-top:32px}
.header{flex-wrap:wrap}
.header nav{flex-wrap:wrap}
@media(max-width:680px){.header nav a[href="prints.html"]{grid-column:auto}}
.apparel-page,.inquiry-page,.sculpture-feature{position:relative;isolation:isolate}
.inquiry-page .twinkle-field{z-index:-1}
.inquiry-page{padding-left:8%;padding-right:8%}
.hair-art-layout{display:grid;grid-template-columns:minmax(70px,180px) auto minmax(70px,180px);align-items:center;gap:35px;width:100%;max-width:1050px}
.hair-tool{display:block;width:100%;height:auto;pointer-events:none}
.hair-dryer{transform:rotate(-14deg)}
.hair-brush{transform:rotate(14deg)}
.hair-art-layout h1{font-size:clamp(3rem,7vw,6rem)}
.nest-crow{position:absolute;right:17%;bottom:5px;width:140px;height:auto;pointer-events:none}
@media(max-width:680px){.hair-art-layout{gap:10px;grid-template-columns:70px minmax(0,1fr) 70px}.hair-art-layout h1{font-size:clamp(2rem,8vw,3.5rem)}.nest-crow{width:85px;right:15%;bottom:0}}
.portfolio-canopy img.nest-crow{top:auto;right:17%;bottom:5px;width:140px;height:auto;object-fit:contain}
@media(max-width:680px){.portfolio-canopy img.nest-crow{width:85px;right:15%;bottom:0}}
.commission-mushrooms{width:340px;height:266px;object-fit:fill;margin-top:64px}
@media(max-width:680px){.commission-mushrooms{width:340px;max-width:100%;height:auto;aspect-ratio:340/266;margin-top:56px}}
/* Preserve the artwork's natural proportions inside its requested dimensions. */
.commission-mushrooms{width:340px;height:266px;object-fit:contain;object-position:center bottom;aspect-ratio:auto}
@media(max-width:680px){.commission-mushrooms{width:340px;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain}}
/* Balanced invitation with room between each line. */
.commission-heading{text-align:center}
.commission-heading h2{line-height:1.45;letter-spacing:-.04em}
.commission-heading .commission-mushrooms{margin-left:auto;margin-right:auto}
.creature-parade{display:block;width:100%;max-width:1050px;height:auto;margin:0 auto 55px;pointer-events:none}
.portfolio-canopy img.nest-crow{width:280px;right:calc(17% + 144px);bottom:5px}
@media(max-width:680px){.portfolio-canopy img.nest-crow{width:170px;right:calc(15% + 65px)}.creature-parade{margin-bottom:35px}}
/* Keep every shimmer, including its outer rays, inside its own section. */
.twinkle-field span{left:clamp(38px,var(--x),calc(100% - 58px));top:clamp(38px,var(--y),calc(100% - 58px))}
.twinkle-field{z-index:0}
@media(max-width:680px){.twinkle-field span{left:clamp(27px,var(--x),calc(100% - 46px));top:clamp(38px,var(--y),calc(100% - 58px))}}
/* Tighter section rhythm, with each creature spaced independently. */
.section{padding-top:68px;padding-bottom:68px}
.contact.section{padding-top:68px;padding-bottom:68px}
.work-heading{margin-top:40px;margin-bottom:42px}
.art-content{margin-top:38px;margin-bottom:48px}
.sculpture-inquire.section{padding-top:20px;padding-bottom:55px}
.sculpture-feature.section{padding-bottom:50px}
.creature-parade{display:flex;align-items:flex-end;justify-content:space-between;gap:5%;max-width:none;margin:0 auto 24px;width:100%}
.creature-parade svg{display:block;width:calc(var(--creature-width) / 1939 * 85%);height:auto;flex:none}
.sculpture-inquire .art-content{margin-top:24px}
.sculpture-inquire>.eyebrow{margin-bottom:18px}
.portfolio-canopy img.nest-crow{right:calc(17% + 176px)}
@media(max-width:680px){.section{padding-top:45px;padding-bottom:45px}.sculpture-inquire.section{padding-top:16px}.portfolio-canopy img.nest-crow{right:calc(15% + 97px)}.creature-parade{margin-bottom:20px}.work-heading{margin-top:28px;margin-bottom:32px}}
.prints-page{padding:30px 6% 40px;min-height:0}
.prints-page>.eyebrow{margin-bottom:16px}
.haku-frame{position:relative;width:min(100%,900px);isolation:isolate}
.haku-frame>img{display:block;width:100%;height:auto}
.prints-page .haku-frame h1{position:absolute;left:46%;top:53%;transform:translate(-50%,-50%);width:53%;font-size:clamp(24px,5vw,64px);line-height:1.12;margin:0}
.prints-page .text-link{margin-top:20px}
/* Fill Haku's open centre while retaining a generous clear gap. */
.prints-page .haku-frame h1{font-size:clamp(34px,7.7vw,92px);width:64%;left:44%;white-space:nowrap}

.piece-two .reading-mouse{transform:translate(-72px,0)}

.prints-page{padding-top:65px;padding-bottom:65px}
.hair-dryer{transform:rotate(-45deg) scaleX(-1)}
.hair-brush{transform:rotate(14deg) scaleX(-1) scale(1.15)}
.hair-page{padding-block:55px}
.hair-art-layout{gap:48px}
.hair-accessories{width:min(650px,90%);height:auto;display:block;margin:26px auto 0}
.apparel-art-layout{display:grid;grid-template-columns:minmax(90px,240px) minmax(180px,1fr) minmax(90px,240px);gap:45px;align-items:center;width:min(1120px,100%)}
.apparel-art-layout h1{font-size:clamp(2.5rem,5vw,5.5rem)}
.apparel-garment{width:100%;height:auto;transform-origin:50% 15%;animation:garment-sway 5s ease-in-out infinite alternate}
.floral-hoodie{animation-delay:-3s}
@keyframes garment-sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.apparel-garment{animation:none}}
#work{padding-bottom:0}
#artist{padding-top:40px}
.memorial-flower-wrap{position:relative;top:-48px}
@media(max-width:680px){.hair-art-layout{gap:24px}.hair-accessories{width:96%;margin-top:35px}.apparel-art-layout{grid-template-columns:1fr 1fr;gap:22px}.apparel-art-layout h1{grid-column:1/-1;grid-row:1}.apparel-garment{max-width:180px;justify-self:center}#artist{padding-top:17px}}
/* Keep the reading mouse anchored beside the dragon without hover or reveal motion. */
.piece-two .reading-mouse{top:176px!important;left:-368px!important;right:auto!important;bottom:auto!important;transform:none!important;animation:none!important;transition:none!important}
@media(min-width:681px) and (max-width:1000px){.piece-two .reading-mouse{left:-338px!important}}
@media(max-width:680px){.piece-two .reading-mouse{left:auto!important;right:72px!important;top:auto!important;bottom:calc(100% + 48px)!important}}
.hair-surround{position:relative;display:block;width:min(100%,1050px);aspect-ratio:1.7;margin:0 auto;isolation:isolate}
.hair-surround h1{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:50%;font-size:clamp(36px,6.5vw,78px);line-height:1.12;margin:0}
.hair-surround .hair-tool,.hair-ornament{position:absolute;display:block;height:auto;pointer-events:none}
.hair-surround .hair-dryer{width:22%;left:2%;top:15%}
.hair-surround .hair-brush{width:24%;right:1%;top:11%}
.hair-comb{width:11%;left:10%;bottom:0;transform:rotate(-22deg)}
.hair-scissors{width:12%;right:10%;bottom:0;transform:rotate(24deg)}
.hair-bloom-one{width:9%;left:44%;top:-2%;transform:rotate(68deg)}
.hair-bloom-two{width:7%;left:35%;bottom:0;transform:rotate(-24deg)}
.hair-bloom-three{width:8%;right:34%;bottom:-1%;transform:rotate(30deg)}
.hair-page .text-link{margin-top:25px}
.apparel-garment{animation:mirrored-garment 1.6s ease-in-out infinite alternate;animation-delay:0s;--rock:1}
.floral-hoodie{--rock:-1;animation-delay:0s}
@keyframes mirrored-garment{from{transform:rotate(calc(-10deg * var(--rock))) translateY(0)}to{transform:rotate(calc(10deg * var(--rock))) translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.apparel-garment{animation:none}}
@media(max-width:680px){.hair-surround{aspect-ratio:1.15}.hair-surround h1{font-size:clamp(30px,8vw,50px);width:55%}.hair-surround .hair-dryer{top:15%;width:24%}.hair-surround .hair-brush{top:14%;width:25%}.hair-comb{width:15%;left:6%}.hair-scissors{width:16%;right:7%}.hair-bloom-one{width:13%;top:0;left:44%}.hair-bloom-two{width:11%;left:32%;bottom:4%}.hair-bloom-three{width:11%;right:30%;bottom:2%}}

/* Navigation wraps naturally rather than sharing explicit mobile grid cells. */
@media(max-width:1100px){
.header{display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 5%}
.header .wordmark{width:125px;grid-column:auto}
.header nav{display:flex;position:static;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 22px;width:100%;margin:0}
.header nav a,.header nav a:nth-child(n),.header nav .nav-contact{position:static;grid-column:auto;grid-row:auto;margin:0;padding:6px 0;white-space:nowrap;text-align:center;font-size:.875rem}
.header nav .nav-contact span{margin-left:8px}
}
@media(max-width:420px){.header nav{gap:5px 17px}.header nav a,.header nav a:nth-child(n){font-size:.8rem}}