:root{--paper:#f7f7f2;--ink:#272c22;--quiet:#707567;--line:#cdd0c5;--accent:#545f39;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button:hover,a:hover{color:var(--accent)}[hidden]{display:none!important}::selection{background:#dce5b8}sup{font-size:12px;vertical-align:super;margin-left:3px}.topbar{height:270px;margin:0 4%;display:flex;align-items:center;justify-content:space-between;}.wordmark{display:block;position:relative;overflow:hidden;width:360px;height:210px;flex-shrink:0;mix-blend-mode:multiply}.island-logo{display:block;position:absolute;width:525px;height:auto;max-width:none;left:-57px;top:-40.5px}.asterisk{font-size:34px;display:inline-block}.wordmark:hover .asterisk{transform:rotate(45deg);transition:transform .35s}nav{display:flex;gap:36px;font-size:16px}nav .active{border-bottom:1px solid;padding-bottom:3px}.intro{padding:32px 4% 0}.muted{color:var(--quiet)}.gallery-toolbar{display:flex;justify-content:flex-end;align-items:center;padding:0 0 18px;;font-size:14px}.view-controls{display:flex;gap:12px;color:var(--quiet)}.view-controls .selected{color:var(--ink);text-decoration:underline;text-underline-offset:5px}.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:3.5%;row-gap:100px;padding:60px 7% 120px;align-items:start}.artwork{margin:0;min-width:0}.art-open{display:block;width:100%;cursor:zoom-in}.art-open img{display:block;width:100%;height:auto;transition:transform .45s cubic-bezier(.2,.7,.2,1)}.art-open:hover img{transform:translateY(-7px)}figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:17px;font-size:14px;line-height:1.5}figcaption>span:last-child{font-size:12px;color:var(--quiet)}.number{color:var(--quiet);font-size:12px;margin-right:12px}.art-one{grid-column:1/6}.art-two{grid-column:8/13;margin-top:95px}.art-three{grid-column:2/6;margin-top:15px}.art-four{grid-column:8/12;margin-top:65px}.art-five{grid-column:1/6;margin-top:60px}.art-six{grid-column:8/13}.art-seven{grid-column:2/6}.art-eight{grid-column:8/12;margin-top:110px}.gallery.index-layout{display:block;padding:30px 4% 80px}.index-layout .artwork{margin:0;position:relative;;padding:20px 0}.index-layout .art-open{position:absolute;inset:0;z-index:1}.index-layout .art-open img{position:absolute;right:12%;top:50%;width:120px;max-height:160px;object-fit:contain;transform:translateY(-50%);opacity:0;pointer-events:none;z-index:2;box-shadow:none}.index-layout .art-open:hover img,.index-layout .art-open:focus-visible img{opacity:1}.index-layout figcaption{margin:0;font-size:clamp(24px,3vw,44px);align-items:center}.index-layout figcaption>span:last-child{font-size:14px}.index-layout .number{display:inline-block;width:50px;vertical-align:middle}.info-panel{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;margin:0 4% 100px;padding:45px 0;}.eyebrow{font-size:14px}.info-panel h2{font:400 clamp(32px,4.2vw,64px)/1.12 Georgia,serif;letter-spacing:-.04em}.info-panel p{font-size:20px;line-height:1.5;max-width:420px}.info-panel .info-note{font-size:14px;color:var(--quiet);margin-top:35px}#info-close{font-size:14px;text-decoration:underline;text-underline-offset:4px}footer{margin:0 4%;;display:flex;justify-content:space-between;gap:20px;padding:28px 0 40px;font-size:14px}footer>span{color:var(--quiet)}.footer-mark{font-size:20px;letter-spacing:-.8px}dialog{padding:0;border:0;background:var(--paper);color:var(--ink);max-width:none;max-height:none;width:100%;height:100dvh;margin:0}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:var(--paper)}.viewer-top,.viewer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 4%;gap:20px;font-size:14px;flex-shrink:0}.viewer-top{}#viewer-close span{font-size:25px;margin-left:10px;vertical-align:middle}.viewer-image-wrap{flex:1;min-height:0;display:flex;justify-content:center;padding:24px 5%}.viewer-image-wrap img{max-width:100%;max-height:100%;object-fit:contain}.viewer-bottom{}.viewer-bottom h2{margin:0;font:400 24px Georgia,serif;text-align:center}.viewer-bottom button{padding:8px 0}body.viewer-open{overflow:hidden}
@media(min-width:1700px){main,.topbar,footer{max-width:1600px;margin-left:auto;margin-right:auto}.topbar,footer{width:92%}}
@media(max-width:700px){.topbar{height:200px;margin:0 5%}.wordmark{width:min(240px,62vw);height:min(140px,36.2vw)}.island-logo{width:145.83%;left:-15.83%;top:-19.29%}nav{gap:16px}.intro{padding:25px 5% 0}.gallery-toolbar{font-size:14px}.gallery{padding:35px 7% 60px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8%;row-gap:45px}.art-one,.art-three,.art-five,.art-seven{grid-column:1}.art-two,.art-four,.art-six,.art-eight{grid-column:2}.art-two{margin-top:55px}.art-four{margin-top:35px}.art-five{margin-top:15px}.art-six{margin-top:25px}.art-eight{margin-top:50px}figcaption{font-size:14px;margin-top:12px;display:block}figcaption>span:last-child{display:none}.number{margin-right:5px;font-size:12px}.info-panel{grid-template-columns:1fr;gap:0;margin:0 5% 60px}.info-panel h2{font-size:38px}.info-panel p{font-size:18px}footer{margin:0 5%;flex-wrap:wrap;align-items:center;font-size:14px}footer>span{width:100%;order:3;font-size:12px}.index-layout .art-open img{right:18%;width:80px}.index-layout .number{width:28px}.viewer-top,.viewer-bottom{padding:18px 5%}.viewer-bottom h2{font-size:20px}.viewer-image-wrap{padding:20px 4%}}
@media(max-width:380px){.gallery{display:block}.artwork{margin:0 0 45px}.view-controls{gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Center the island logo independently of the navigation. */
.topbar{position:relative;justify-content:center}.topbar .wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.topbar nav{position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media(max-width:700px){.topbar{height:235px}.topbar .wordmark{top:18px;transform:translateX(-50%)}.topbar nav{top:auto;bottom:12px;transform:none}}

/* Gallery controls sit directly beneath the centered island. */
.intro{padding-top:0}.gallery-toolbar{justify-content:center;padding-bottom:0}
@media(max-width:700px){.intro{padding-top:0}}

/* Show the original paintings with inverted colours on hover. */
.art-open img{transition:filter .35s ease;box-shadow:none}
.gallery:not(.index-layout) .art-open:hover img,
.gallery:not(.index-layout) .art-open:focus-visible img{filter:invert(1);opacity:1;transform:none}
.index-layout .art-open:hover img,
.index-layout .art-open:focus-visible img{filter:invert(1);opacity:1}

/* Dimensions accompany paintings; numbering belongs to Index mode. */
.gallery:not(.index-layout) .number{display:none}.gallery:not(.index-layout) figcaption .dimensions{display:inline-block}
@media(max-width:700px){.gallery:not(.index-layout) figcaption .dimensions{display:block;margin-top:3px}}

/* Contact footer. */
.contact-footer{align-items:baseline;padding:30px 0 50px;gap:30px}
.contact-footer>.contact-label{font-size:16px;color:var(--ink);width:auto;order:0}
.contact-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px 30px;font-size:16px;line-height:1.5}
.contact-links a{overflow-wrap:anywhere}
.contact-links a span{font-size:14px;color:var(--quiet)}
.contact-links a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.contact-footer{align-items:flex-start;flex-direction:column;gap:18px}.contact-links{flex-direction:column;justify-content:flex-start;gap:12px}}

/* Keep the contact label next to the links. */
.contact-footer{justify-content:flex-start;align-items:baseline;gap:24px}
.contact-links{justify-content:flex-start}
@media(max-width:700px){.contact-footer{flex-direction:row;flex-wrap:nowrap;gap:20px}.contact-links{min-width:0}}

/* Shared navigation and statement page. */
.view-controls{flex-wrap:wrap;justify-content:center;align-items:center}
.statement-navigation{position:static;display:flex;font-size:14px;gap:12px;padding:0 5%}
.statement-content{max-width:720px;margin:70px auto 110px;padding:0 24px}
.statement-content h1{font:400 clamp(36px,5vw,60px)/1.15 Georgia,serif;margin:0 0 32px}
.manifesto{font-size:20px;line-height:1.65}
.manifesto p{margin:0 0 24px}
@media(max-width:700px){.topbar{height:195px}.statement-content{margin:50px auto 80px}.manifesto{font-size:18px}}

/* Keep Index dimensions close to each painting title. */
.index-layout figcaption{justify-content:flex-start;gap:24px}
@media(max-width:700px){.index-layout figcaption{display:flex;flex-wrap:wrap;gap:6px 16px}.index-layout figcaption .dimensions{display:inline-block}}

.contact-links .graphic-design-link{color:#8b42c4;text-decoration:underline;text-underline-offset:4px}.contact-links .graphic-design-link:hover{color:#6e2c9e}

/* Center Index entries with more room between titles and dimensions. */
.index-layout figcaption{justify-content:center;gap:48px}
@media(max-width:700px){.index-layout figcaption{justify-content:center;gap:12px 32px;text-align:center}}

/* Center footer contacts on both pages. */
.contact-footer{justify-content:center;text-align:center}
.contact-links{justify-content:center;align-items:center}
@media(max-width:700px){.contact-footer{justify-content:center}.contact-links{align-items:center;text-align:center}}

.manifesto blockquote{margin:32px 0;padding:0 24px;font-family:Georgia,'Times New Roman',serif;font-style:italic;line-height:1.65}
@media(max-width:700px){.manifesto blockquote{padding:0 12px}}

/* Contacts page: introduction beside a vertical list of links. */
.contacts-content{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;max-width:1050px;margin:80px auto 120px;padding:0 30px;align-items:start}
.contacts-introduction h1{font:400 clamp(30px,3.4vw,44px)/1.2 Georgia,serif;margin:0 0 16px;letter-spacing:-.025em}
.contacts-introduction p{font-size:20px;line-height:1.55;margin:0 0 24px;max-width:430px}
.contacts-introduction .artist-role{font-size:16px;color:var(--quiet);margin-bottom:35px}
.contacts-page-links{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:22px;text-align:left;padding-top:6px;font-size:18px}
@media(max-width:700px){.contacts-content{grid-template-columns:1fr;gap:35px;margin:50px auto 80px;padding:0 7%}.contacts-introduction p{font-size:18px}.contacts-page-links{align-items:flex-start;text-align:left}}

/* Match the artist name to carousel title sizing. */
.contacts-introduction h1{font-size:24px}
@media(max-width:700px){.contacts-introduction h1{font-size:20px}}

.contacts-introduction .artist-role{font-family:Georgia,'Times New Roman',serif}

/* Match the artist role to the name. */
.contacts-introduction .artist-role{font-family:Georgia,'Times New Roman',serif;font-size:24px;font-weight:400;line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
@media(max-width:700px){.contacts-introduction .artist-role{font-size:20px}}

/* Keep the name and role together with tighter leading. */
.contacts-introduction h1{line-height:1.1;margin-bottom:3px}
.contacts-introduction .artist-role{line-height:1.1;margin-bottom:26px}

/* Keep centered elements stationary between short and scrolling pages. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}

/* Carousel arrows sit midway down either side of the painting. */
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;font:400 36px/1 Arial,Helvetica,sans-serif;width:48px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--paper)}
#previous{left:2%}#next{right:2%}
.viewer-bottom{justify-content:center}
.viewer-image-wrap{padding-left:80px;padding-right:80px}
@media(max-width:700px){.carousel-arrow{width:36px;height:48px;font-size:28px}#previous{left:1%}#next{right:1%}.viewer-image-wrap{padding-left:46px;padding-right:46px}}

/* Bring carousel arrows inward toward the painting. */
#previous{left:12%}#next{right:12%}
.viewer-image-wrap{padding-left:calc(12% + 56px);padding-right:calc(12% + 56px)}
@media(max-width:700px){#previous{left:2%}#next{right:2%}.viewer-image-wrap{padding-left:46px;padding-right:46px}}

/* Show one painting per row throughout the mobile gallery. */
@media(max-width:700px){
  .gallery:not(.index-layout){display:grid;grid-template-columns:minmax(0,1fr);row-gap:45px}
  .gallery:not(.index-layout) .artwork{grid-column:1;margin:0}
}