/* Art first: the artist's mark, one menu, and optional artwork information. */
.portfolio-menu-button{pointer-events:auto;display:flex;align-items:center;gap:14px;min-height:44px;padding:10px 0;border:0;background:none;color:#29433b;font:14px "Avenir Next",Avenir,"Segoe UI",sans-serif;cursor:pointer}
.menu-lines{width:24px;height:8px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.paint-home .portfolio-menu-button{color:var(--control-paint);text-shadow:0 1px 8px #ffffff70}
.paint-home[data-control-tone="light"] .portfolio-menu-button{text-shadow:0 1px 8px #0008}
.site-index{position:fixed;inset:0;margin:0 0 0 auto;width:min(520px,100%);height:100dvh;max-height:none;max-width:none;border:0;padding:36px 44px;background:#fbfaf6;color:#29433b;box-shadow:-15px 0 70px #0002}
.site-index::backdrop{background:#0c201e66}
.index-close{display:block;margin-left:auto;min-height:44px;padding:10px 0;border:0;background:none;font-size:13px}
.index-links{display:flex;flex-direction:column;gap:27px;margin-top:100px}
.index-links a{color:inherit;text-decoration:none;font:42px/1.15 Georgia,serif}
.index-links a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:9px}
.index-links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:9px}
.index-signoff{position:absolute;bottom:38px;font:20px Georgia,serif}
body.index-open{overflow:hidden}
.work-disclosure{position:fixed;z-index:12;bottom:52px;left:4.3vw;color:var(--control-paint);font:12px "Avenir Next",Avenir,"Segoe UI",sans-serif;text-shadow:0 1px 8px #fff6}
.paint-home[data-control-tone="light"] .work-disclosure{text-shadow:0 1px 8px #0008}
.work-disclosure summary{list-style:none;cursor:pointer;padding:12px 0;min-height:44px;letter-spacing:.08em;width:max-content}
.work-disclosure summary::-webkit-details-marker{display:none}
.work-divider{opacity:.55;margin:0 9px}
.work-disclosure-panel{position:absolute;bottom:52px;left:0;width:min(290px,80vw);padding:24px;background:#fbfaf6;color:#29433b;text-shadow:none;box-shadow:0 5px 30px #0002}
.work-disclosure-panel p{font:22px/1.4 Georgia,serif;margin:0 0 17px}
.work-disclosure-panel a{font:12px "Avenir Next",Avenir,"Segoe UI",sans-serif;text-decoration:none;border-bottom:1px solid #aeb7aa;padding-bottom:5px}
.paint-home .next-work-peek{position:fixed;z-index:10;inset:auto 0 0;width:100%;height:34px;display:block;border-top:7px solid #fbfaf6;background:#fbfaf6;overflow:hidden}
.next-work-peek img{width:100%;height:180px;object-fit:cover;object-position:center;display:block}
.next-work-peek.is-dismissed{display:none!important}
@media(max-width:600px){.portfolio-menu-button{font-size:13px}.site-index{padding:25px}.index-links{margin-top:80px}.index-links a{font-size:38px}.work-disclosure{left:22px;bottom:44px}.paint-home .next-work-peek{height:27px;border-top-width:5px}}

/* Each overlay follows the light beneath its own lettering, like the signature. */
.paint-home .portfolio-menu-button,.paint-home .work-disclosure summary{color:#fffaf0!important;text-shadow:0 1px 2px #000b,0 2px 8px #0008!important;transition:color .18s ease,text-shadow .18s ease}
.paint-home .portfolio-menu-button[data-ink="dark"],.paint-home .work-disclosure summary[data-ink="dark"]{color:#18211b!important;text-shadow:0 1px 2px #fffc,0 2px 8px #fff8!important}
.paint-home .menu-lines{filter:drop-shadow(0 1px 2px #0009)}
.paint-home .portfolio-menu-button[data-ink="dark"] .menu-lines{filter:drop-shadow(0 1px 2px #fffc)}
.paint-home .work-disclosure summary{font-weight:500}
@media(prefers-reduced-motion:reduce){.paint-home .portfolio-menu-button,.paint-home .work-disclosure summary{transition:none}}
/* A stable white masthead keeps navigation readable on every painting. */
.portfolio-header,.gallery-page .portfolio-header,.about-page .portfolio-header{background:#fff;padding:12px 4.3%;min-height:104px;border-bottom:1px solid #0000000b}
.portfolio-header .portfolio-wordmark,.paint-home .portfolio-wordmark,.paint-home .portfolio-wordmark[data-ink="dark"]{background:transparent;color:#29433b!important;filter:none;text-shadow:none!important}
.paint-home .portfolio-menu-button,.paint-home .portfolio-menu-button[data-ink="dark"],.portfolio-menu-button{color:#29433b!important;text-shadow:none!important;font-size:15px;font-weight:600;letter-spacing:.01em}
.paint-home .menu-lines,.paint-home .portfolio-menu-button[data-ink="dark"] .menu-lines,.menu-lines{filter:none;border-top-width:2px;border-bottom-width:2px;height:10px;width:25px}
.scroll-invitation{position:fixed;z-index:12;bottom:32px;left:calc(50% - 43px);width:86px;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0;color:#fff;text-decoration:none;font:12px "Avenir Next",Avenir,"Segoe UI",sans-serif;text-shadow:0 1px 3px #000,0 0 8px #0008}
.scroll-invitation svg{width:16px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #000)}
.scroll-invitation.is-dismissed{display:none}
@media(max-width:600px){.portfolio-header,.gallery-page .portfolio-header,.about-page .portfolio-header{padding:13px 22px;min-height:80px}.scroll-invitation{bottom:max(22px,env(safe-area-inset-bottom))}.portfolio-menu-button{font-size:14px}}

/* The SVG converts the photographed paper to transparency without widening the pen strokes. */
.portfolio-header .artist-signature,.paint-home .portfolio-header .artist-signature,.gallery-page .portfolio-header .artist-signature,.about-page .portfolio-header .artist-signature{filter:none;mix-blend-mode:normal}

/* Direct desktop links; the compact menu is reserved for small screens. */
.desktop-navigation{display:flex;align-items:center;gap:34px;pointer-events:auto}
.portfolio-header .desktop-navigation a{color:#29433b;font:500 15px "Avenir Next",Avenir,"Segoe UI",sans-serif;text-decoration:none;padding:13px 0;min-height:44px;display:flex;align-items:center}
.portfolio-header .desktop-navigation a:hover,.portfolio-header .desktop-navigation a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.portfolio-header .portfolio-menu-button{display:none}
@media(max-width:700px){.desktop-navigation{display:none}.portfolio-header .portfolio-menu-button{display:flex}}
/* A smaller masthead gives more of the viewport back to the paintings. */
.portfolio-header,.gallery-page .portfolio-header,.about-page .portfolio-header{min-height:78px;padding:9px 4.3%}
.portfolio-header .portfolio-wordmark{width:123px;height:60px}
.gallery-page{padding-top:78px}
@media(max-width:600px){.portfolio-header,.gallery-page .portfolio-header,.about-page .portfolio-header{min-height:60px;padding:8px 22px}.portfolio-header .portfolio-wordmark{width:81px;height:40px}.gallery-page{padding-top:94px}}
/* A clear first-visit invitation, with a soft shadow rather than a button box. */
.scroll-invitation{left:calc(50% - 60px);width:120px;min-height:100px;bottom:24px;flex-direction:column;gap:8px;padding:12px 0 15px;font-size:16px;font-weight:600;line-height:1.3;isolation:isolate;text-shadow:0 1px 3px #000,0 2px 10px #000}
.scroll-invitation::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-24px -42px;background:radial-gradient(ellipse at center,#000b 0%,#0007 32%,#0003 55%,transparent 74%)}
.scroll-invitation svg{width:30px;height:44px;stroke-width:2;filter:drop-shadow(0 1px 2px #000);animation:scroll-nudge 2s ease-in-out infinite}
@keyframes scroll-nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(6px)}}
.scroll-invitation:hover svg{animation-play-state:paused}
@media(max-width:600px){.scroll-invitation{bottom:max(22px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.scroll-invitation svg{animation:none}}
/* Let a slight hint of the artwork show through the white masthead. */
.portfolio-header,.gallery-page .portfolio-header,.about-page .portfolio-header{background:rgba(255,255,255,.94)}

/* The paintings fill the viewport, edge to edge. */
html.paint-document,.paint-document .paint-home{background:#fff}
.paint-home .paint-backdrop{inset:0;transform:none;width:100%;height:100%;background:#fff}
.paint-home .paint-end,.paint-home .paint-footer{background:#fff;color:#29433b}
.paint-home .paint-footer a,.paint-home .paint-gallery-link{color:#29433b}

.paint-home .paint-footer{justify-content:center}

/* Reveal the homepage navigation when scrolling back up. */
.paint-home .portfolio-header{transition:transform .22s ease}
.paint-home .portfolio-header.is-scrolled-away{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.paint-home .portfolio-header{transition:none}}

/* Small serif controls echo the original large serif menu links. */
.portfolio-header .portfolio-menu-button,.site-index .index-close{font:400 18px/1.4 Georgia,serif;letter-spacing:0}
.site-index .index-close{display:flex;align-items:center;justify-content:center;gap:14px;color:#29433b;background:none;border:0}
.site-index .index-close span{font:inherit;font-size:26px;line-height:1;width:25px;text-align:center}

/* One underline for the whole gallery link, including on hover. */
.paint-home .paint-gallery-link,.paint-home .paint-gallery-link:hover{display:inline-flex;align-items:center;gap:20px;min-height:48px;padding:10px 0;background:transparent;border:0;border-bottom:1px solid #29433b66;border-radius:0;color:#29433b;font:18px/1.4 Georgia,serif;text-decoration:none;text-shadow:none;box-shadow:none}
.paint-home .paint-gallery-link span{font:inherit;text-decoration:none}
.paint-home .paint-gallery-link svg{display:block;width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.paint-home .paint-gallery-link:hover{border-bottom-color:#29433b}
.paint-home .paint-gallery-link:focus-visible{outline:2px solid #29433b;outline-offset:6px}