@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');
:root{--paper:#f5f1e7;--ink:#172e38;--muted:#687075;--gold:#b59962;--progress:0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}header{height:116px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;border-bottom:1px solid #17303a22}.brand{font-family:Georgia,serif;font-size:18px;letter-spacing:2px;line-height:1.1}.brand span{display:block;font-size:25px;letter-spacing:1.6px}.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:7px;letter-spacing:1.6px;margin-top:9px}nav{display:flex;gap:35px;font-size:13px}.header-cta{font-size:12px;border-bottom:1px solid;padding-bottom:9px}.header-cta span{margin-left:35px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:710px}.hero-copy{padding:76px 0 50px 11%}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;margin:0 0 25px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400}h1{font-size:clamp(60px,6.7vw,108px);line-height:.99;letter-spacing:-3px;margin-bottom:28px}em{font-weight:400;color:#8c7151}p{font-size:14px;line-height:1.8}.intro{color:#60686a;margin-bottom:30px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;background:var(--ink);color:white;border:0;padding:19px 25px;font-size:12px}.button:hover{background:#35525b}.hero-note{display:flex;align-items:center;gap:18px;margin-top:42px}.hero-note p{font-size:10px;line-height:1.7;margin:0;color:var(--muted)}.seal{border:1px solid #b1aa97;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;gap:2px;font-family:Georgia;font-size:12px;transform:rotate(-14deg)}.seal span{font-size:9px}.hero-art{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#e4ddc9,#c9c1a8);min-height:710px}.art-label{position:absolute;left:35px;top:30px;font-size:9px;letter-spacing:2px;color:#54605a}.orbit{position:absolute;border:1px solid #7c806c33;border-radius:50%;width:420px;height:420px;left:50%;top:45%;transform:translate(-50%,-50%)}.orbit-two{width:550px;height:550px}.pen{position:absolute;width:40px;height:440px;filter:drop-shadow(12px 13px 8px #30231345);z-index:3}.hero-pen{left:calc(50% - 20px);bottom:126px;transform:translateY(calc(var(--progress) * -130px)) rotate(calc(-10deg + var(--progress) * 10deg));transform-origin:50% 90%;will-change:transform}.pen i{display:block;position:absolute;left:0;width:100%}.cap{top:0;height:24px;background:linear-gradient(90deg,#7c6232,#ede0ab 40%,#ad8d48 65%,#6d5528);border-radius:14px 14px 2px 2px}.wood{top:23px;height:295px;background:repeating-linear-gradient(88deg,transparent 0 4px,#3f1a0a55 5px 6px,transparent 7px 13px),linear-gradient(90deg,#4f2715,#aa7144 35%,#84502b 70%,#442313);border-radius:2px 2px 7px 7px}.clip{top:12px;left:29px!important;width:7px!important;height:104px;border-radius:3px 4px 8px 8px;background:linear-gradient(90deg,#8e733f,#f3df9b,#8e733f);z-index:2}.band{top:315px;height:12px;background:linear-gradient(90deg,#8e733f,#f3df9b,#8e733f)}.grip{top:327px;height:63px;background:repeating-linear-gradient(0deg,#182127 0 3px,#303b3d 4px 5px);border-radius:0 0 10px 10px}.nib{top:389px;height:48px;background:linear-gradient(90deg,#8e733f,#fff1bc,#8e733f);clip-path:polygon(7% 0,93% 0,50% 100%)}.inkwell{position:absolute;width:230px;height:155px;left:calc(50% - 115px);bottom:79px;z-index:4;filter:drop-shadow(0 22px 12px #342f2540)}.well{position:absolute;bottom:0;width:125px;height:120px;background:radial-gradient(ellipse at 30% 25%,#4e6772,#213b49 42%,#102633 75%);border:1px solid #536b7133;border-radius:48% 48% 43% 43%}.left{left:0}.right{right:0}.neck{position:absolute;top:0;left:80px;width:70px;height:65px;background:linear-gradient(90deg,#142b35,#4c6269,#182d36);border-top:10px solid #ae955e;border-radius:9px 9px 0 0}.well-label{position:absolute;left:82px;top:75px;width:68px;text-align:center;color:#cfbd8f;font-family:Georgia;font-size:21px;letter-spacing:3px}.well-label small{font-size:5px;letter-spacing:1px}.art-caption{position:absolute;bottom:25px;left:30px;right:30px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px}.ticker{display:flex;justify-content:space-around;align-items:center;padding:25px 4%;background:var(--ink);color:#e9e1cb;font-size:9px;letter-spacing:2px}.ticker b{color:var(--gold)}.section{padding:95px 7%}.section-head{display:flex;justify-content:space-between;align-items:end}.section-head h2{margin-bottom:20px}h2{font-size:58px;line-height:1.05;letter-spacing:-1px}.section-head>p{font-size:12px;color:var(--muted)}.preview-note{font-size:10px;color:var(--muted);margin:5px 0 25px}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.product{border:0;background:transparent;padding:0;text-align:left;color:inherit}.product-art{height:330px;background:#e6dfd0;position:relative;overflow:hidden}.product-art>span{position:absolute;bottom:20px;left:22px;font-family:Georgia;font-size:12px;color:#817d70}.small-pen{left:calc(50% - 20px);top:-48px;transform:rotate(35deg) scale(.68);transition:transform .4s}.product:hover .small-pen{transform:rotate(28deg) scale(.73)}.maple{background:#eae4d8}.maple .wood{background:repeating-linear-gradient(86deg,transparent 0 5px,#9d712833 6px 7px,transparent 8px 14px),linear-gradient(90deg,#b28749,#e3c38a,#b98d50)}.rosewood{background:#dedcd3}.rosewood .wood{background:repeating-linear-gradient(87deg,transparent 0 4px,#23131677 5px 7px,transparent 8px 12px),linear-gradient(90deg,#3b2020,#8c5145,#3c2021)}.product-title{display:flex;justify-content:space-between;margin-top:22px;align-items:center}.product h3{font-size:29px;margin:0}.product p{font-size:11px;color:var(--muted);margin-top:9px}.maker{display:grid;grid-template-columns:1fr 1fr;background:#e9e5db}.portrait{position:relative;min-height:640px}.portrait img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:center 36%}.portrait>span{position:absolute;bottom:25px;left:30px;font-size:9px;letter-spacing:2px;color:white}.maker-copy{padding:75px 13%}.maker h2{font-size:55px}.maker p:not(.eyebrow){color:#60686a;font-size:13px}.signature{font-family:'Libre Caslon Display',Georgia;font-size:48px;font-style:italic;display:block;transform:rotate(-8deg);width:100px;margin-top:25px}.signature-caption{font-size:8px;letter-spacing:1.5px;display:block;margin-top:20px}.club{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;background:var(--ink);color:var(--paper)}.club h2{font-size:64px}.club-intro{font-family:'Libre Caslon Display',Georgia;font-size:29px;line-height:1.3}.club p:not(.eyebrow):not(.club-intro){font-size:12px;color:#bbc7c9}.light{background:var(--paper);color:var(--ink);margin:18px 0}.light:hover{background:#ddd2bb}.club>div>small{display:block;color:#9dadaf;font-size:9px;line-height:1.8}.membership{aspect-ratio:1.6;background:#e5dfcd;color:var(--ink);padding:28px;border-radius:6px;transform:rotate(-7deg);box-shadow:12px 22px 25px #08182055;background-image:repeating-linear-gradient(35deg,transparent 0 3px,#ffffff18 4px 5px)}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1px}.card-name{font-family:'Libre Caslon Display',Georgia;font-size:68px;line-height:.78;margin:30px 0}.card-name em{font-size:34px;color:inherit;letter-spacing:8px}.card-bottom strong{font-size:26px}.card-bottom small{font-size:7px}.visit{text-align:center;padding-top:100px;padding-bottom:100px}.visit>p:not(.eyebrow){color:var(--muted)}.market-line{border-top:1px solid #142e3833;border-bottom:1px solid #142e3833;display:flex;justify-content:space-between;align-items:center;text-align:left;margin:45px auto 0;max-width:800px;padding:25px 0}.market-line span{font-size:9px;letter-spacing:1px}.market-line p{margin:0;font-size:12px}footer{padding:45px 7%;border-top:1px solid #142e3833;display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}footer p{text-align:right;font-size:11px;color:var(--muted);margin:0}footer>a:not(.brand){font-size:12px}footer small{text-align:right;font-size:9px;color:var(--muted)}dialog{background:var(--paper);color:var(--ink);border:0;padding:45px;width:min(90vw,520px);box-shadow:0 20px 90px #0005}dialog::backdrop{background:#102633aa}dialog h2{font-size:42px}.close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;color:inherit}form label{display:block;font-size:12px;margin-bottom:8px}input{width:100%;padding:15px;border:1px solid #aaa;background:transparent;margin-bottom:15px}form small{display:block;font-size:10px;line-height:1.6;color:var(--muted);margin-top:18px}:focus-visible{outline:2px solid #b48b47;outline-offset:5px}
@media(min-width:1500px){main,header,footer{max-width:1700px;margin:auto}}@media(max-width:800px){header{height:95px;padding:0 6%}.brand{font-size:13px}.brand span{font-size:19px}.brand small{font-size:5px}nav{gap:17px;font-size:10px}.header-cta{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:55px 7% 40px}h1{font-size:76px}.hero-art{min-height:570px}.hero-note{margin-top:30px}.hero-pen{bottom:105px}.inkwell{bottom:58px}.ticker{gap:16px;font-size:7px;letter-spacing:1px;flex-wrap:wrap}.ticker span:last-child,.ticker b:last-of-type{display:none}.section{padding:65px 7%}.section-head{display:block}h2{font-size:46px}.products{gap:12px}.product-art{height:230px}.small-pen{transform:rotate(25deg) scale(.48);top:-95px}.product h3{font-size:23px}.product p{font-size:10px}.maker{grid-template-columns:1fr}.portrait{min-height:500px}.maker-copy{padding:55px 7%}.maker h2{font-size:49px}.club{grid-template-columns:1fr;gap:50px}.club h2{font-size:55px}.membership{max-width:450px;width:94%;margin:10px auto 20px}.market-line{gap:15px}.market-line p{font-size:10px}footer{padding:35px 7%}footer p{font-size:10px}.art-caption{font-size:6px}.card-name{font-size:60px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-pen{transform:rotate(-5deg)}*{transition:none!important}}

/* Keep the reservoirs below the opening viewport; scrolling brings them into view. */
.hero-art{min-height:var(--scene-height,850px)}
.hero-pen{bottom:auto;top:calc(var(--well-top,640px) - 370px)}
.inkwell{bottom:auto;top:var(--well-top,640px)}

/* Lower the pen into the reservoir as the visitor reveals it. */
.hero-pen{top:calc(var(--well-top,640px) - 470px);transform:translateY(calc(var(--progress) * 100px)) rotate(calc(-10deg + var(--progress) * 10deg))}
@media(prefers-reduced-motion:reduce){.hero-pen{transform:translateY(100px)}}

/* Center the opening pen independently from the below-screen reservoir. */
.hero-pen{top:var(--pen-top,100px);transform:translateY(calc(var(--progress) * var(--pen-travel,200px))) rotate(calc(-15deg + var(--progress) * 15deg));transform-origin:50% 50%}
.hero-art .orbit{top:var(--orbit-top,320px)}
@media(prefers-reduced-motion:reduce){.hero-pen{transform:translateY(var(--pen-travel,200px))}}

.hero-runway{position:relative;height:var(--runway-height,auto)}
.hero{position:sticky;top:var(--pin-top,0px)}
.hero-copy{position:relative}
.opening-copy{transition:opacity .3s}
.scroll-story{position:absolute;left:11%;right:10%;top:var(--story-top,350px);opacity:0;visibility:hidden;transition:opacity .35s}
.is-holding .opening-copy{opacity:0;pointer-events:none;visibility:hidden}
.is-holding .scroll-story{opacity:1;visibility:visible}
.story-beat{position:absolute;top:0;left:0;right:0;opacity:0;transform:translateY(18px);transition:opacity .4s,transform .4s;pointer-events:none}
.story-beat.active{opacity:1;transform:none;pointer-events:auto}
.story-beat h2{font-size:clamp(42px,4.8vw,72px);margin-bottom:25px}
.story-beat>p:not(.eyebrow){max-width:330px;color:var(--muted);font-size:13px}
.story-link{display:inline-block;border-bottom:1px solid #172e3855;padding-bottom:8px;font-size:11px;margin-top:15px}
.story-progress{position:absolute;top:330px;display:flex;gap:10px}
.story-progress span{height:2px;width:45px;background:#172e3825}
.story-progress span:first-child{background:var(--ink)}
.hero-runway[style*="--hold-progress: 0."] .story-progress span{background:#172e3855}
@media(max-width:800px),(prefers-reduced-motion:reduce){.hero-runway{height:auto}.hero{position:relative;top:auto}.opening-copy{opacity:1!important;visibility:visible!important;pointer-events:auto!important}.scroll-story{position:relative;left:auto;right:auto;top:auto;opacity:1;visibility:visible;margin-top:65px}.story-beat{position:relative;opacity:1;transform:none;margin-bottom:40px;pointer-events:auto}.story-progress{display:none}}

/* Preserve the supplied logo artwork; frame its generous source margins. */
.brand-image{display:block;position:relative;width:275px;height:82px;overflow:hidden;flex-shrink:0}
.brand-image img{position:absolute;width:330px;max-width:none;height:auto;left:-34px;top:-40px;mix-blend-mode:multiply}
@media(max-width:800px){.brand-image{width:190px;height:58px}.brand-image img{width:230px;left:-24px;top:-28px}header nav{gap:14px}} 
@media(max-width:420px){header{padding:0 4%}.brand-image{width:162px;height:50px}.brand-image img{width:197px;left:-20px;top:-24px}header nav{gap:10px;font-size:9px}}

.real-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 28px}
.photo-art{height:auto;aspect-ratio:4/3;background:#adc6c5}
.photo-art img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s}
.product:hover .photo-art img{transform:scale(1.035)}
.photo-art>span{background:var(--paper);padding:7px 9px;font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:1px;color:var(--ink);bottom:14px;left:14px}
.collection-wide{margin:65px 0 0}.collection-wide>img{display:block;width:100%;height:auto}
.collection-wide figcaption{display:flex;justify-content:space-between;gap:30px;border-bottom:1px solid #172e3833;padding:24px 0}
.collection-wide figcaption>span{font-size:9px;letter-spacing:1.5px;padding-top:5px}
.collection-wide figcaption p{font-size:12px;max-width:440px;color:var(--muted);margin:0}
#dialog-photo{width:100%;height:auto;display:block;margin-top:20px}#dialog-photo[hidden]{display:none}
dialog.photo-dialog{width:min(92vw,920px);max-height:90vh;overflow:auto}
@media(max-width:600px){.real-products{grid-template-columns:1fr;gap:30px}.collection-wide figcaption{display:block}.collection-wide figcaption p{margin-top:12px}.photo-art>span{font-size:7px}dialog.photo-dialog{padding:35px 20px}}

.real-hero-pen{width:293.333px;left:calc(50% - 146.667px);height:440px;filter:drop-shadow(10px 12px 8px #30231335)}
.real-hero-pen img{display:block;width:100%;height:100%;object-fit:contain}

.real-hero-pen{width:220px;height:330px;left:calc(50% - 110px)}

/* Matching back/front image layers put the pen inside the elliptical mouth. */
.photo-inkwell{width:var(--well-width,330px);height:auto;aspect-ratio:1462/1076;left:calc(50% - var(--well-width,330px)/2);filter:none;pointer-events:none}
.photo-inkwell img{display:block;width:100%;height:100%}
.ink-back{z-index:2;filter:drop-shadow(0 18px 12px #342f2530)}
.ink-front{z-index:4;clip-path:url(#inkwell-front-mask)}
.real-hero-pen{z-index:3}

/* Uniform 2× pen scale; inkwell dimensions remain unchanged. */
.real-hero-pen{width:440px;height:660px;left:calc(50% - 220px)}
/* Grow toward the seated size while retaining the centered landing point. */
.hero-pen.real-hero-pen{transform:translateY(calc(var(--progress) * var(--pen-travel,200px))) rotate(calc(-15deg + var(--progress) * 15deg)) scale(calc(.75 + var(--progress) * .25))}
@media(prefers-reduced-motion:reduce){.hero-pen.real-hero-pen{transform:translateY(var(--pen-travel,200px))}}

/* Jimmy’s Pen Club: centered lettering with pricing anchored to the word. */
.pen-club-card{position:relative;aspect-ratio:1.55;padding:22px 25px;background-color:#f3ecd9;border-radius:12px;text-align:center;transform:rotate(-4deg);container-type:inline-size;display:flex;flex-direction:column;justify-content:center}
.club-star{display:block;font-size:4cqw;line-height:1;margin:0 0 3cqw}
.club-card-name{font-family:'Libre Caslon Display',Georgia,serif;line-height:.85;padding:0}
.club-card-name>span:first-child{display:block;font-size:8.5cqw;margin-bottom:1.5cqw}
.club-pen-line{display:inline-block;position:relative;font-size:30cqw;line-height:.85}
.club-pen-line>strong{font-weight:400;letter-spacing:-1.2cqw}
.club-card-name>span:last-child{display:block;font-size:11cqw;margin-top:1.5cqw}
.club-card-price{position:absolute;left:calc(100% - .8cqw);top:1cqw;right:auto;transform:none;white-space:nowrap;text-align:center;line-height:1}
.club-card-price>span{display:block;font-family:'DM Sans',sans-serif;font-size:max(7px,1.9cqw);letter-spacing:.13cqw;margin-bottom:.6cqw}
.club-card-price>strong{display:block;font-family:'Libre Caslon Display',Georgia,serif;font-size:7.5cqw;font-weight:400;line-height:.95;letter-spacing:0}
.club-card-footer{margin-top:3cqw;letter-spacing:.5cqw;font-size:max(7px,1.9cqw)}
.club-card-footer i{display:block;width:9cqw;border-top:1px solid;margin:0 auto 2cqw}
@media(max-width:800px){.pen-club-card{max-width:450px}}
@media(max-width:420px){.pen-club-card{padding:17px 20px}.club-card-price{top:.5cqw}}

/* Hide the inserted pen below the opening, including gaps in the bottle silhouette. */
.real-hero-pen img{clip-path:inset(0 0 var(--inserted-cut,0px) 0)}

/* A dedicated pinned mobile scene keeps the pen visible beside the story. */
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
 .hero-runway{height:var(--runway-height)}
 .hero{position:sticky;top:0;height:100svh;min-height:0;display:block;isolation:isolate}
 .hero-art{position:absolute;inset:0;min-height:0;height:100%;z-index:0;background:radial-gradient(ellipse at 78% 65%,#dfd8c1,#eae5d5 65%,var(--paper))}
 .hero-copy{position:relative;z-index:6;padding:35px 7% 0;height:100%;pointer-events:none}
 .hero-copy a{pointer-events:auto}
 .hero-copy .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:20px;max-width:85%}
 .hero-copy h1{font-size:clamp(42px,11.8vw,72px);letter-spacing:-1.5px;width:82%;margin-bottom:22px}
 .hero-copy .intro{font-size:12px;line-height:1.65;width:60%;margin-bottom:20px}
 .hero-copy .button{font-size:10px;padding:14px 16px;gap:20px}
 .hero-note{display:none}
 .opening-copy{transition:opacity .3s}
 .is-holding .opening-copy{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
 .scroll-story{position:absolute;top:65px;left:7%;right:auto;width:58%;margin:0;opacity:0;visibility:hidden}
 .is-holding .scroll-story{opacity:1;visibility:visible}
 .story-beat{position:absolute;inset:0 auto auto 0;width:100%;opacity:0;transform:translateY(12px);pointer-events:none}
 .story-beat.active{opacity:1;transform:none;pointer-events:auto}
 .story-beat h2{font-size:clamp(33px,9vw,49px);line-height:1.05;letter-spacing:-.7px;margin-bottom:20px}
 .story-beat>p:not(.eyebrow){font-size:11px;line-height:1.7;width:90%}
 .story-link{font-size:10px;line-height:1.6;max-width:85%}
 .real-hero-pen{width:320px;height:480px;left:calc(77% - 160px)}
 .photo-inkwell{left:calc(77% - var(--well-width)/2)}
 .hero-art .orbit{left:77%;width:290px;height:290px}
 .hero-art .orbit-two{width:390px;height:390px}
 .art-label{display:none}.art-caption{left:7%;right:7%;font-size:5px;bottom:14px}
}

@media(max-width:800px) and (prefers-reduced-motion:no-preference){
 .hero{height:var(--mobile-scene-height,100svh)}
 .real-hero-pen{height:var(--mobile-pen-height,400px);width:var(--mobile-pen-width,266.667px);left:calc(77% - var(--mobile-pen-width,266.667px)/2)}
}

@media(max-width:800px) and (prefers-reduced-motion:no-preference){
 .photo-inkwell{transform:translateY(calc(var(--well-rise,0px) * (1 - var(--progress))));will-change:transform}
}