@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&family=Amatic+SC:wght@400;700&family=Bad+Script&family=Quicksand:wght@400;500;600&family=Sacramento&display=swap');
:root{--cream:#fcfaf5;--ink:#2d4650;--gold:#b0875b;--peach:#f4cfc0;--line:#c4a380;--hand:'Amatic SC',sans-serif;--script:'Sacramento',cursive}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 'Quicksand',sans-serif}body::before,body::after{content:'';position:absolute;top:0;bottom:0;width:32px;min-height:1536px;background-image:url('assets/reference/homepage.png');background-position:left top;background-size:1024px 1536px;z-index:-1}body::before{left:0}body::after{right:0;transform:scaleX(-1)}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%}.art{display:block;position:relative;overflow:hidden;aspect-ratio:var(--crop-w)/var(--crop-h);isolation:isolate}.art>img{position:absolute;max-width:none;width:calc(1024 / var(--crop-w) * 100%);height:auto;left:calc(-1 * var(--crop-x) / var(--crop-w) * 100%);top:calc(-1 * var(--crop-y) / var(--crop-h) * 100%);pointer-events:none;user-select:none}.site-header{max-width:912px;margin:auto;position:relative;height:368px}.socials{display:flex;gap:16px;align-items:center}.socials a{display:block;width:34px;height:35px}.site-header>.socials{position:absolute;right:0;top:19px}.masthead{position:relative;height:302px;padding-top:63px}.brand-row{display:grid;grid-template-columns:85px 320px 85px;gap:4px;align-items:start;justify-content:center}.flourish{width:85px;mix-blend-mode:multiply}.brand{display:block;text-align:center;padding-top:15px}.brand-name{display:block;font:76px/.98 var(--script);letter-spacing:-1.6px}.brand-sub{display:block;font:32px/1 var(--hand);margin-top:8px;letter-spacing:1px}.heart-rule{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--gold);font:29px/1 var(--hand)}.heart-rule::before,.heart-rule::after{content:'';height:1px;background:var(--gold);flex:1}.brand .heart-rule{width:207px;margin:9px auto 0}.margin-note{position:absolute;text-align:center;margin:0;font:27px/.96 var(--script);letter-spacing:1px;transform:rotate(-12deg)}.left-note{left:16px;top:102px;width:130px}.right-note{right:23px;top:107px;width:104px;transform:rotate(-7deg)}.margin-note span{font-size:33px;line-height:1.4}.nav{display:flex;justify-content:space-between;align-items:center;margin:12px 81px 0;gap:25px;font:24px/1.2 var(--hand);text-transform:uppercase}.nav a{position:relative;white-space:nowrap;padding:6px 8px 12px}.nav a.active::after,.nav a:hover::after{content:'';position:absolute;bottom:3px;left:0;right:0;height:4px;border-radius:70%;background:var(--peach)}main{max-width:912px;margin:auto}.hero{height:363px;display:grid;grid-template-columns:396px 338px 130px;gap:22px;margin-left:-13px;align-items:start}.hero-art{display:block;width:396px}.hero-copy{padding-top:30px}.hero-copy h1{font:54px/1.13 Georgia,serif;font-weight:400;color:var(--gold);margin:0 0 8px;letter-spacing:-1px}.hero-copy p{font-size:15px;line-height:1.65;margin:10px 0 22px}.button{display:inline-flex;gap:16px;align-items:center;justify-content:center;background:var(--gold);color:#fff;padding:14px 30px;font:17px/1.4 var(--hand);text-transform:uppercase;letter-spacing:2px;min-height:52px}.hero-note{padding-top:45px;text-align:center}.out-now{display:block;background:#fae5dc;border-radius:52% 48% 48% 48%;width:122px;height:126px;padding-top:25px;font:40px/.92 var(--script);transform:rotate(-8deg);position:relative}.out-now::before{content:'';position:absolute;left:-29px;top:-21px;width:90px;height:74px;background:linear-gradient(76deg,transparent 48%,#f2c9b9 49% 51%,transparent 52%) 51px 0/25px 22px no-repeat,linear-gradient(53deg,transparent 48%,#f2c9b9 49% 51%,transparent 52%) 14px 8px/30px 25px no-repeat,linear-gradient(30deg,transparent 48%,#f2c9b9 49% 51%,transparent 52%) 0 37px/27px 19px no-repeat}.buzz{margin-top:33px;font:26px/1 var(--script)}.buzz .bee{width:30px;margin:0 auto 7px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;height:370px}.feature-card{display:flex;flex-direction:column;align-items:center;min-width:0;padding:8px 8px 15px;background:#f5efe3;border-radius:15px 11px 13px 12px;text-align:center}.feature-card h2{font:42px/1.2 var(--hand);text-transform:uppercase;font-weight:400;margin:0 0 4px}.feature-art{width:100%;height:224px;aspect-ratio:auto}.feature-art img{top:calc(-1 * var(--crop-y) / var(--crop-h) * 100%);height:calc(1536 / var(--crop-h) * 100%)}.feature-card:nth-child(3) .feature-art{height:214px;margin-top:6px}.feature-card p{font:17px/1.25 var(--hand);letter-spacing:1px;text-transform:uppercase;margin:5px 0 8px}.text-link{display:inline-flex;align-items:center;gap:15px;font:700 18px/1.4 var(--hand);letter-spacing:1.3px;text-transform:uppercase;position:relative;color:#17242a}.text-link::after{content:'';position:absolute;left:0;right:30px;bottom:-2px;height:1px;background:var(--gold)}.text-link b{font:24px/1 Georgia,serif;font-weight:400}.feature-card>.text-link{margin-top:auto}.native-print{height:237px;width:100%;padding:2px 0 0;display:flex;align-items:center;justify-content:center}.native-print img{width:100%;height:229px;object-fit:fill;transform:rotate(-2deg);box-shadow:0 1px 6px #d9cfbe}.news-grid{display:grid;grid-template-columns:540px 1fr;gap:28px;margin-top:24px;min-height:303px}.section-title{font:34px/1.15 Georgia,serif;font-weight:400;color:var(--gold);margin:0 0 0 5px;letter-spacing:-.7px}.news-grid .heart-rule{width:210px;height:19px;margin-left:5px;font-size:27px}.update-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 5px}.update .art{width:100%;border-radius:2px}.update time{display:block;font-size:10px;letter-spacing:1.1px;margin-top:6px}.update h3{font:17px/1.28 Georgia,serif;font-weight:400;margin:3px 0 0}.more-link{margin:17px 0 0 8px}.events{border-left:1px solid #eadbc8;padding-left:28px}.events .section-title{white-space:nowrap;font-size:31px;margin-left:0}.events .heart-rule{margin-left:0}.event-list{margin-top:2px}.event{display:flex;align-items:center;gap:20px;height:66px;border-bottom:1px solid #e9dccc;padding:5px 0}.event:last-child{border-bottom:0}.date{width:56px;min-width:56px;text-align:center;background:#f9e6de;border-radius:3px;padding:3px 0;line-height:1}.date>span{display:block;font:14px/1.2 var(--hand);letter-spacing:1px}.date b{font:27px/1.1 Georgia,serif;font-weight:400}.event-copy{flex:1}.event-copy strong{display:block;font:16px/1.4 Georgia,serif;font-weight:400;white-space:nowrap}.event-copy small{font-size:12px;white-space:nowrap}.event .flourish{width:20px;min-width:20px}.events .more-link{margin-left:3px;margin-top:16px}footer{max-width:912px;margin:13px auto 0;height:92px}footer>.heart-rule{font-size:32px;gap:13px}.footer-row{display:flex;align-items:center;justify-content:space-between;margin-top:0}.footer-bee{width:180px}.footer-row>p{font:34px/1.2 var(--script);margin:0 0 0 49px;white-space:nowrap}.footer-social{display:flex;align-items:center;gap:17px}.footer-social>span{font:20px/1 var(--hand);text-transform:uppercase}.footer-social .socials{gap:13px}
/* Detail panels keep the reference homepage composition while providing working navigation. */
dialog{width:min(960px,calc(100% - 32px));max-height:90svh;background:var(--cream);color:var(--ink);border:1px solid #d9c6ac;border-radius:8px;padding:50px 36px 36px;overflow:auto}dialog::backdrop{background:#1b3039a8;backdrop-filter:blur(3px)}body:has(dialog[open]){overflow:hidden}.close-dialog{position:absolute;right:12px;top:6px;border:0;background:transparent;color:var(--ink);font:36px/1.2 sans-serif;cursor:pointer;padding:4px 10px}dialog h2{font:38px/1.15 Georgia,serif;color:var(--gold);font-weight:400}dialog h3{font:28px/1.2 Georgia,serif;font-weight:400}dialog .section-heading{display:flex;gap:12px;align-items:center}dialog .book-feature,dialog .about-section{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:center}dialog .book-feature>img{max-height:410px;object-fit:contain}dialog .coming-book{border-top:1px solid var(--line);margin-top:32px}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.portfolio-grid img{width:100%;height:230px;object-fit:contain;background:#f5efe5;cursor:zoom-in}.freebie-grid{max-width:560px;margin:auto}.coloring-preview{display:block;width:100%;max-height:430px;object-fit:contain}.freebie-card{text-align:center}.freebie-card .button{margin:12px 0}.about-image img{border-radius:50%}.hand{font:32px var(--script)}.draft-note{padding:16px;background:#f5ece0;border-left:3px solid var(--gold)}a:focus-visible,button:focus-visible{outline:3px solid #365763;outline-offset:4px}.skip-link{position:fixed;top:-100px;left:12px;z-index:20;background:var(--ink);color:white;padding:12px}.skip-link:focus{top:12px}
@media(min-width:801px) and (max-width:1000px){.site-header,main,footer{max-width:calc(100% - 80px)}.hero{grid-template-columns:42% 36% 15%;gap:3%;margin-left:0}.hero-art{width:100%}.hero-copy h1{font-size:48px}.news-grid{grid-template-columns:58% 1fr;gap:18px}.events{padding-left:18px}.events .section-title{font-size:28px}.event{gap:10px}.footer-row>p{margin-left:0;font-size:30px}.footer-social{gap:10px}.margin-note{font-size:24px}.left-note{left:-15px}.right-note{right:-15px}.nav{margin-inline:40px}}
@media(max-width:800px){body::before,body::after{width:15px;min-height:100vh}.site-header,main,footer{max-width:calc(100% - 48px)}.site-header{height:auto}.site-header>.socials{top:14px;right:0}.masthead{height:auto;padding-top:69px}.margin-note{display:none}.brand-row{grid-template-columns:55px minmax(0,320px) 55px;gap:0}.flourish{width:55px}.brand{padding-top:0}.brand-name{font-size:64px}.brand-sub{font-size:27px}.brand .heart-rule{width:170px}.nav{flex-wrap:wrap;justify-content:center;margin:24px 0 18px;gap:4px 18px;font-size:24px}.hero{height:auto;grid-template-columns:1fr;margin:0;gap:0;text-align:center}.hero-art{width:min(100%,396px);margin:auto}.hero-copy{padding:12px 0 30px;max-width:480px;margin:auto}.hero-copy h1{font-size:48px}.hero-copy p{font-size:16px}.hero-note{display:none}.feature-grid{height:auto;grid-template-columns:1fr;max-width:420px;margin:auto;gap:22px}.feature-card{min-height:370px;padding:14px 14px 18px}.feature-art{width:282px;max-width:100%}.native-print{width:282px;max-width:100%}.feature-card p{font-size:20px}.text-link{font-size:21px}.news-grid{grid-template-columns:1fr;gap:32px;margin-top:36px}.update-grid{gap:14px}.update time{font-size:12px}.events{border-left:0;border-top:1px solid #eadbc8;padding:22px 0 0}.events .section-title{font-size:34px}.event{height:74px}.event-copy strong{font-size:18px}.event-copy small{font-size:14px}.event .flourish{width:20px}.event-list{max-width:470px}footer{height:auto;margin-top:28px;padding-bottom:28px}.footer-row{flex-wrap:wrap;justify-content:center;gap:18px}.footer-bee{display:none}.footer-row>p{margin:5px 0 0;font-size:34px;width:100%;text-align:center}dialog{padding:42px 20px 24px}dialog .book-feature,dialog .about-section{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.portfolio-grid img{height:180px}}
@media(max-width:420px){.brand-row{grid-template-columns:34px minmax(0,1fr) 34px}.flourish{width:34px}.brand-name{font-size:49px}.brand-sub{font-size:25px}.nav{gap:3px 12px}.hero-copy h1{font-size:43px}.update-grid{grid-template-columns:1fr}.update{display:grid;grid-template-columns:110px 1fr;gap:0 16px}.update .art{grid-row:1/3}.update time{align-self:end}.update h3{align-self:start}.section-title{font-size:31px}.news-grid .heart-rule{margin-bottom:10px}.event{gap:12px}.event-copy strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Fine alignment against the supplied 1024px reference. */
.art { mix-blend-mode: multiply; }
.margin-note { font-family: 'Bad Script', cursive; font-size: 23px; line-height: 1.12; }
.out-now { font-family: var(--script); font-size: calc(31px + 3pt); line-height: 1.05; }
.buzz { font-family: 'Bad Script', cursive; font-size: 21px; line-height: 1.2; }
.footer-row>p { font-family: var(--script); font-size: 27px; }
@media(min-width:1001px) { .hero { grid-template-columns:409px 338px 130px; } }
/* Reference crops already share the page paper tone; avoid darkening it twice. */
.art, .flourish { mix-blend-mode: normal; }
.portfolio-grid img { cursor: default; }

/* Keep only the flourish ink; turn the light paper pixels transparent at render time. */
.render-filters { position: absolute; pointer-events: none; }
.flourish img { filter: url(#ink-transparency); }

/* Jessica's revised identity: supplied logo, rustic leaves, and slab-serif titles. */
:root { --slab: 'Roboto Slab', Rockwell, serif; }
.hero-copy h1, .section-title, .events .section-title, .update h3,
.event-copy strong, .date b, dialog h2, dialog h3 { font-family: var(--slab); font-weight: 400; }
.hero-copy h1 { font-size: 47px; line-height: 1.22; }
.section-title { font-size: 30px; }
.events .section-title { font-size: 27px; }
.site-header { height: 458px; }
.masthead { height: 392px; padding-top: 25px; }
.brand-row { align-items: center; }
.brand { padding-top: 0; }
.brand-logo { display: block; width: 100px; aspect-ratio: 1308 / 1462; position: relative; overflow: hidden; margin: 0 auto 16px; }
.brand-logo img { position: absolute; max-width: none; width: calc(3300 / 1308 * 100%); left: calc(-1067 / 1308 * 100%); top: calc(-475 / 1462 * 100%); }
.rustic-flourish { display: block; position: relative; overflow: hidden; width: 72px; aspect-ratio: 586 / 1598; }
.rustic-flourish img { position: absolute; max-width: none; width: calc(920 / 586 * 100%); left: calc(-189 / 586 * 100%); top: calc(-62 / 1598 * 100%); }
.brand-row>.rustic-flourish:last-child { transform: scaleX(-1); }
.event>.rustic-flourish { width: 16px; min-width: 16px; }
.heart-rule { gap: 0; }
.heart-rule::after { display: none; }
.brand .heart-rule { margin-top: 18px; }
.hero-art { padding: 20px 35px 24px 55px; }
.book-mockup { display: block; width: 255px; max-width: 100%; border-left: 13px solid #b8a48a; border-radius: 7px 2px 2px 7px; box-shadow: 5px 8px 0 #ded4c1, 9px 13px 18px #a48b6840; transform: rotate(-5deg); }
.book-mockup img { display: block; width: 100%; border-radius: 0 2px 2px 0; }
.footer-row { min-height: 66px; }
.footer-row>p { margin-left: 0; }
@media(max-width:800px) {
  .site-header { height: auto; }
  .masthead { height: auto; padding-top: 64px; }
  .brand-logo { width: 80px; margin-bottom: 13px; }
  .rustic-flourish { width: 48px; }
  .hero-art { padding: 20px 40px 30px; }
  .book-mockup { margin: auto; }
  .hero-copy h1 { font-size: 43px; }
  .section-title, .events .section-title { font-size: 28px; }
}
@media(max-width:420px) {
  .rustic-flourish { width: 30px; }
  .brand-logo { width: 70px; }
  .hero-copy h1 { font-size: 38px; }
}

/* Name uses the former author/illustrator display face; subtitle uses the body face. */
.brand-name { font-family: var(--hand); font-size: 64px; font-weight: 400; line-height: 1.05; letter-spacing: 2px; }
.brand-sub { font-family: 'Quicksand', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: 2px; margin-top: 16px; }
@media(max-width:800px) { .brand-name { font-size: 56px; } }
@media(max-width:420px) { .brand-name { font-size: 48px; letter-spacing: 1px; } .brand-sub { font-size: 12px; letter-spacing: 1px; } }

/* Reveal wider decorative rails as desktop gutters grow. */
body { position: relative; isolation: isolate; min-height: 100vh; }
@media(min-width:801px) {
  body::before, body::after {
    --pattern-rail: clamp(32px, calc((100vw - 940px) / 2), 96px);
    width: var(--pattern-rail);
    background-size: calc(var(--pattern-rail) * 32) 1536px;
  }
}

/* Original left/right artwork from Jessica's current WordPress theme. */
.original-flourish { display: block; width: 72px; }
.original-flourish img { display: block; width: 100%; height: auto; }
@media(max-width:800px) { .original-flourish { width: 48px; } }
@media(max-width:420px) { .original-flourish { width: 30px; } }

/* Keep the supplied self-portrait fully visible beside the About biography. */
dialog .about-image { width: min(100%, 240px); margin-inline: auto; }
dialog .about-image img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* Event accents match the original header flourishes. */
.event > .original-flourish { width: 20px; min-width: 20px; flex-shrink: 0; }

/* Tile the original pattern at its natural size instead of stretching a screenshot. */
body::before, body::after {
  background-image: url('assets/side-pattern.png');
  background-size: auto;
  background-repeat: repeat;
  background-position: left top;
}

/* Compact identity and softer editorial styling, per Jessica's review. */
.brand-logo { width: calc(100px * 2 / 3); margin-bottom: 12px; }
.brand-name { font-size: 32px; line-height: 1.2; white-space: nowrap; letter-spacing: 1px; }
.brand-sub { margin-top: 12px; }
.brand-row { align-items: stretch; grid-template-columns: 68px 320px 68px; }
.brand-row>.original-flourish { width: 100%; height: 100%; position: relative; }
.brand-row>.original-flourish img { position: absolute; height: 100%; width: 100%; object-fit: fill; }
.site-header { height: auto; padding-bottom: 22px; }
.masthead { height: auto; padding-top: 48px; }
.nav { margin: 30px 30px 0; gap: 18px; }
.hero { height: auto; min-height: 363px; padding-bottom: 48px; }
.book-mockup { border-left: 0; padding-left: 13px; background: url('assets/fly-book.jpg') -5px center / auto 104%; }
.book-cover { display: block; position: relative; overflow: hidden; aspect-ratio: 574 / 718; }
.book-cover img { position: absolute; max-width: none; width: calc(580 / 574 * 100%); left: calc(-3 / 574 * 100%); top: calc(-13 / 718 * 100%); border-radius: 0; }
.out-now { border-radius: 43% 57% 49% 51% / 54% 43% 57% 46%; transform: rotate(-9deg); }
.out-now::before { display: none; }
.hand-rays { position: absolute; width: 92px; height: 78px; left: -35px; top: -28px; color: #edc7b8; }
.hero-copy h1, .section-title, .events .section-title, .update h3, .event-copy strong, .date b, dialog h2, dialog h3, .shop-section h2, .shop-section h3 { font-family: var(--slab); font-weight: 300; }
.section-title, .events .section-title { font-size: 27px; margin-bottom: 18px; }
.text-link::after { display: none; }
.shop-section { margin: 48px 0; padding-top: 25px; }
.shop-section>h2 { font-size: 32px; color: var(--gold); margin: 0 0 12px; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.shop-grid article { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; padding: 24px; background: #f5efe3; border-radius: 10px; }
.shop-grid img { width: 110px; max-height: 170px; object-fit: contain; }
.shop-grid h3 { font-size: 23px; line-height: 1.25; margin: 0 0 10px; }
.shop-grid p { font-size: 14px; }
.shop-grid .button { padding: 12px 16px; letter-spacing: 1px; }
#shop { scroll-margin-top: 24px; }
@media(max-width:800px) {
 .masthead { padding-top: 64px; }
 .brand-logo { width: calc(80px * 2 / 3); }
 .brand-name { font-size: 28px; }
 .brand-row { grid-template-columns: 54px minmax(0,320px) 54px; }
 .nav { margin-inline: 0; gap: 4px 18px; }
 .hero { padding-bottom: 48px; }
 .shop-grid { grid-template-columns: 1fr; }
}
@media(max-width:420px) {
 .brand-logo { width: calc(70px * 2 / 3); }
 .brand-name { font-size: 24px; letter-spacing: .4px; }
 .brand-row { grid-template-columns: 38px minmax(0,1fr) 38px; }
 .brand-sub { font-size: 11px; letter-spacing: .5px; }
 .shop-grid article { grid-template-columns: 80px 1fr; padding: 18px; gap: 14px; }
 .shop-grid img { width: 80px; }
}

/* Tint the supplied transparent logo with the same ink token as the subtitle. */
.brand-logo::before {
  content: '';
  position: absolute;
  width: calc(3300 / 1308 * 100%);
  height: calc(2550 / 1462 * 100%);
  left: calc(-1067 / 1308 * 100%);
  top: calc(-475 / 1462 * 100%);
  background-color: var(--ink);
  -webkit-mask: url('assets/jessica-logo.png') center / 100% 100% no-repeat;
  mask: url('assets/jessica-logo.png') center / 100% 100% no-repeat;
}
.brand-logo img { opacity: 0; }

/* A thin picture-book binding uses clean plaid with no cover lettering or illustration fragments. */
.book-mockup {
  position: relative;
  padding-left: 6px;
  background: transparent;
  border-radius: 3px 1px 1px 3px;
  box-shadow: 2px 3px 0 #ded4c1, 5px 7px 12px #a48b6830;
}
.book-mockup::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background-color: #faf2e7;
  background-image: linear-gradient(90deg, #422e1f30, #422e1f08 50%, #422e1f20), repeating-linear-gradient(0deg, transparent 0 7px, #d5a88b99 7px 14px), repeating-linear-gradient(90deg, transparent 0 6px, #d5a88b99 6px 12px);
  background-position: center;
  border-radius: 3px 0 0 3px;
  box-shadow: inset 1px 0 1px #ffffff40;
}
.book-cover { border-left: 1px solid #b28f8170; }

/* Image-led portfolio with an accessible larger-artwork viewer. */
#illustration { width: min(1120px, calc(100% - 32px)); }
.gallery-intro { max-width: 660px; margin-bottom: 28px; }
.portfolio-grid { gap: 26px 20px; }
.gallery-item { display: flex; flex-direction: column; padding: 10px 10px 14px; background: #f5efe3; border-radius: 5px; }
.portfolio-grid .gallery-item img { width: 100%; height: 270px; object-fit: contain; background: transparent; cursor: zoom-in; }
.gallery-item>span { padding: 4px 6px 0; }
.gallery-item>.gallery-action { font-family: var(--hand); font-size: 19px; letter-spacing: .8px; color: var(--ink); }
.gallery-item:hover { background: #ede4d4; }
#artwork-viewer { width: min(1220px, calc(100% - 24px)); max-height: 95svh; padding: 44px 24px 18px; }
#artwork-viewer::backdrop { background: #192b36dc; }
.close-artwork { position: absolute; top: 4px; right: 10px; border: 0; padding: 4px 12px; font-size: 30px; color: var(--ink); background: transparent; cursor: pointer; }
.artwork-stage { height: min(69svh, 900px); display: flex; justify-content: center; align-items: center; }
.artwork-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.artwork-toolbar { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 14px; }
.artwork-toolbar button { border: 1px solid var(--line); background: transparent; color: var(--ink); min-width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.artwork-caption { text-align: center; min-width: 0; }
#artwork-title { font-size: 24px; margin: 0; }
#artwork-count { font-size: 13px; margin: 4px 0; }
#artwork-original { display: block; text-align: center; font-size: 14px; text-decoration: underline; margin-top: 8px; }
@media(max-width:600px) {
 .portfolio-grid { gap: 16px 10px; }
 .portfolio-grid .gallery-item img { height: 180px; }
 .gallery-item { padding: 5px 5px 12px; font-size: 14px; }
 #artwork-viewer { padding: 44px 12px 16px; }
 .artwork-stage { height: 60svh; }
 #artwork-title { font-size: 20px; }
 .artwork-toolbar { gap: 12px; }
}
@media(max-width:360px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* Centered identity matching Jessica's simplified header reference. */
.brand-row { display: flex; justify-content: center; }
.brand { width: 100%; max-width: 650px; }
.brand-logo { width: 76px; margin: 0 auto 12px; }
.brand-name { font-size: clamp(32px, 5.5vw, 58px); line-height: 1.15; letter-spacing: 1.5px; }
.brand-sub { font-size: 15px; letter-spacing: 1px; margin-top: 26px; }
.masthead { padding-top: 60px; }
.nav { margin-top: 36px; }
#shop { width: min(500px, calc(100% - 32px)); padding: 64px 30px; text-align: center; }
.shop-preview h2 { color: var(--gold); font-size: 34px; margin: 0 0 18px; }
.shop-preview p { font-size: 20px; margin: 0; }
@media(max-width:600px) {
 .brand-logo { width: 62px; }
 .brand-name { letter-spacing: .5px; }
 .brand-sub { font-size: 12px; margin-top: 20px; }
 .masthead { padding-top: 62px; }
}

/* Wider desktop margins reveal more of the pattern at its original tile size. */
@media(min-width:801px) {
 body::before, body::after { width: clamp(64px, calc((100vw - 828px) / 2), 192px); }
 .site-header, main, footer { width: calc(100% - 156px); max-width: 800px; }
 .nav { margin-inline: 0; gap: 8px; }
 .hero { grid-template-columns: 38% minmax(0, 1fr) 100px; gap: 18px; margin-left: 0; }
 .hero-art { width: 100%; }
 .hero-copy h1 { font-size: 44px; }
 .out-now { width: 100px; height: 108px; font-size: calc(35px + 3pt); }
 .news-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
 .events { padding-left: 20px; }
 .event { gap: 12px; }
 .event-copy strong, .event-copy small { white-space: normal; }
 .events .section-title { white-space: normal; }
 .feature-art { height: 195px; }
 .feature-card:nth-child(3) .feature-art { height: 185px; }
 .native-print { height: 208px; }
 .native-print img { height: auto; max-height: 208px; object-fit: contain; }
 .feature-grid { height: 350px; }
}

/* Allow the full market and bookstore names to wrap comfortably. */
.event { height: auto; min-height: 78px; padding-block: 10px; }
.event-copy strong, .event-copy small { white-space: normal; }

#fox-island { width: min(720px, calc(100% - 32px)); }
.event-poster { display: block; width: 100%; height: auto; margin-top: 24px; border-radius: 4px; }

.update-thumbnail { display: block; width: 100%; aspect-ratio: 164 / 125; height: auto; object-fit: contain; background: #fff; border-radius: 2px; }
.prints-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prints-grid .gallery-item img { height: 310px; }
@media(max-width:600px) { .prints-grid .gallery-item img { height: 190px; } }
@media(max-width:420px) { .update-thumbnail { grid-row: 1 / 3; } }
@media(max-width:360px) { .prints-grid { grid-template-columns: 1fr; } }

.additional-freebie { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 20px; }
.freebie-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Keep header social links above the overlapping masthead hit area. */
.site-header > .socials { z-index: 2; }

/* Fine-tune the handwritten release badge spacing. */
.out-now { line-height: calc(.92em - 8px - .92pt); padding-top: 33px; }

/* Align the J descender with the space between Jessica and Mavromatis. */
.brand {
 display: grid;
 grid-template-columns: max-content .55em max-content;
 width: max-content;
 max-width: 100%;
 font-size: clamp(32px, 5.7vw, 64px);
 color: var(--ink);
}
.brand-logo {
 grid-column: 2;
 grid-row: 1;
 justify-self: start;
 width: 1.4em;
 margin: 0 0 2px;
 transform: translateX(-22%);
}
.brand-logo::before { background-color: currentColor; }
.brand-name { display: contents; font-size: inherit; font-weight: 700; line-height: 1.15; letter-spacing: 1px; }
.given-name { grid-column: 1; grid-row: 2; }
.family-name { grid-column: 3; grid-row: 2; }
.brand-sub { grid-column: 1 / -1; grid-row: 3; font-size: clamp(12px, 1.5vw, 17px); margin-top: 24px; letter-spacing: 1px; }
@media(max-width:420px) { .brand-name { letter-spacing: .3px; } .brand-sub { margin-top: 20px; } }
.brand-logo { transform: translateX(calc(.275em - 18%)); }

/* Refine the relative sizes and spacing of the three identity lines. */
.brand { font-size: clamp(42.6667px, 7.6vw, 85.3333px); }
.brand-logo {
 width: .7em;
 transform: translate(calc(.275em - 18%), 3px);
}
.brand-sub { margin-top: 20px; font-weight: 400; }
@media(max-width:420px) {
 .brand { font-size: clamp(36px, 10.94vw, 45.95px); }
 .brand-sub { margin-top: 16px; }
}

/* Restore the larger monogram and soften the name lettering. */
.brand-logo { width: 1.05em; }
.brand-name { font-weight: 400; }
.brand-sub { margin-top: 17px; }
@media(max-width:420px) { .brand-sub { margin-top: 13px; } }

/* Tighten the name gap while keeping the monogram aligned above it. */
.brand { grid-template-columns: max-content .35em max-content; }
.brand-logo { transform: translate(calc(.175em - 18%), 3px); }
.given-name, .family-name, .brand-sub { position: relative; top: -5px; }

.book-retailers { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.book-retailers .button { border: 0; text-align: center; }

.illustration-feature-preview { display: block; width: 100%; height: 224px; object-fit: contain; }
@media(min-width:801px) { .illustration-feature-preview { height: 195px; } }

.book-story-link { display: block; width: fit-content; margin-top: 14px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.book-story { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; scroll-margin-top: 24px; }
.book-story h2 { font-size: 30px; margin-top: 0; }
.book-story p { max-width: 68ch; }
.book-story summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.book-story summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media(max-width:800px) { .book-story-link { margin-inline: auto; } }

.update-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.buildings-thumbnail { background-color: #f9f4ee; }
@media(max-width:420px) { .update-grid { grid-template-columns: 1fr; } }

#about .about-section { align-items: start; }
#about .about-section a { text-decoration: underline; text-underline-offset: 3px; }

/* Reader excerpts supplied from Amazon review screenshots. */
.book-reviews { margin-top: 36px; }
.book-reviews h2 { font-size: 30px; margin: 0 0 20px; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reader-review { display: flex; flex-direction: column; margin: 0; padding: 22px 20px; background: #f5eee4; border-radius: 8px; }
.review-stars { color: #95683c; letter-spacing: 3px; font-size: 18px; }
.reader-review blockquote { margin: 12px 0 20px; }
.reader-review blockquote p { margin: 0; font-size: 15px; line-height: 1.75; }
.reader-review figcaption { margin-top: auto; font-size: 11px; line-height: 1.7; }
.reader-review time { display: block; }
.review-source { display: inline-block; margin-top: 18px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:700px) { .review-grid { grid-template-columns: 1fr; } }


/* Center the three identity elements while retaining the navigation treatment. */
.site-header { display: block; }
.masthead { padding: 50px 0 18px; }
.brand-row { display: flex; justify-content: center; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.brand-logo { order: 0; align-self: center; width: 72px; margin: 20px 0 42px; }
.brand-logo::after { inset: -20px -26px; }
.brand-name { order: 1; display: flex; flex-direction: row; justify-content: center; gap: .25em; font-size: clamp(50.6667px, 8.9333vw, 90.6667px); line-height: 1.15; white-space: nowrap; }
.brand-sub { order: 2; margin: 15px 0 0; font-size: 12px; letter-spacing: 2px; }
.site-header > .socials { position: absolute; top: 22px; right: 0; height: auto; transform: none; }
@media(max-width:520px) {
 .masthead { padding-top: 46px; }
 .brand-logo { width: 58px; margin: 15px 0 34px; }
 .brand-logo::after { inset: -17px -21px; }
 .brand-name { font-size: clamp(38.6667px, 11.3333vw, 58.6667px); gap: .2em; letter-spacing: .4px; }
 .brand-sub { font-size: 10px; letter-spacing: 1.3px; margin-top: 12px; }
}
.brand-logo { transform: rotate(-5deg); overflow: visible; isolation: isolate; }
.brand-logo::after { content: ''; position: absolute; z-index: -1; background: #f6dfd4; border-radius: 47% 53% 58% 42% / 57% 43% 57% 43%; transform: rotate(9deg); }
.brand-logo::after { background: #f6dfd4; }
.brand-logo::before { transform: translateY(1px); background-color: var(--ink); }
.brand-name { font-family: var(--hand); font-weight: 700; }
.given-name, .family-name, .brand-sub { position: static; }
.brand-sub { font-weight: 500; }
.brand-sub { position: relative; top: -2px; font-size: 13px; }
@media(max-width:520px) { .brand-sub { font-size: 11px; } }
.site-header > .socials { gap: 12px; }
.site-header > .socials a { width: 25px; height: 26px; }
.site-header > .socials .art { width: 100%; }
.nav { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid #dbc8b2; justify-content: space-between; gap: 10px; font-size: 24px; }
.nav a { padding: 7px 10px; isolation: isolate; }
.nav a.active::after, .nav a:hover::after { inset: 0; height: auto; border-radius: 45% 55% 48% 52%; background: #f6dfd4; z-index: -1; }
@media(max-width:800px) { .nav { flex-wrap: wrap; justify-content: center; gap: 4px 15px; } }
@media(max-width:520px) { .nav { gap: 3px 8px; font-size: 22px; } .nav a { padding-inline: 8px; } }

/* A softly rounded, irregular star behind the handwritten release badge. */
.booking-section { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 30px; margin: 42px 0 30px; padding: 30px; background: #f5eee4; border-radius: 8px; }
.booking-section .eyebrow { font-size: 10px; letter-spacing: 1.8px; margin: 0 0 10px; }
.booking-section h2 { font-size: 30px; font-weight: 300; line-height: 1.3; margin: 0 0 14px; }
.booking-section p { font-size: 14px; line-height: 1.8; margin-bottom: 0; }
.booking-actions .button { display: inline-block; text-align: center; }
.booking-actions p { font-size: 12px; margin: 14px 0 10px; }
.booking-email, #contact section > p a { text-decoration: underline; text-underline-offset: 4px; }
.booking-email { font-size: 13px; }
.email-updates { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 30px; margin: 24px 0 34px; padding: 30px; background: #f9e8df; border-radius: 8px; }
.email-updates .eyebrow { font-size: 10px; letter-spacing: 1.8px; margin: 0 0 10px; }
.email-updates h2 { font-size: 30px; font-weight: 300; line-height: 1.3; margin: 0 0 14px; }
.email-updates p { font-size: 14px; line-height: 1.8; margin-bottom: 0; }
.signup-actions .button { display: inline-block; text-align: center; }
.signup-actions p { font-size: 12px; margin-top: 14px; }
@media(max-width:650px) { .email-updates { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; } }
@media(max-width:650px) { .booking-section { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; } }

.out-now { background: transparent; border-radius: 0; isolation: isolate; }
.out-now::after {
 content: ''; position: absolute; inset: -13px -15px; z-index: -1;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpath fill='%23fae5dc' d='M72 5 Q76 0 80 8 L91 30 Q94 35 100 32 L122 21 Q130 17 128 27 L124 49 Q123 55 130 58 L145 66 Q153 71 143 77 L126 88 Q121 91 124 99 L131 122 Q134 132 123 129 L99 121 Q93 118 89 125 L79 145 Q74 153 69 143 L59 123 Q56 117 49 120 L26 130 Q17 134 20 123 L26 100 Q28 94 21 90 L5 80 Q-3 74 7 69 L27 58 Q32 55 29 48 L20 27 Q16 18 27 21 L50 29 Q57 32 60 25 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.copyright { margin: 20px 0 0; padding-bottom: 20px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--ink); }

.out-now-second-line { position: relative; top: -2px; }