*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#faf9f7;color:#191919}body{font-family:Arial,Helvetica,sans-serif}.back{position:absolute;left:1.5%;top:30px;color:inherit;text-decoration:none;font-weight:700;letter-spacing:.12em;font-size:16px}.back:hover{text-decoration:underline}.layout{display:grid;grid-template-columns:28% minmax(0,1fr);column-gap:1.2%;padding:68px 8% 50px 3.1%;align-items:start}.heading{font-family:Georgia,'Times New Roman',serif;font-size:clamp(58px,5.5vw,88px);font-weight:400;line-height:1;letter-spacing:-.06em;margin:0}.gallery{padding-top:22px;max-width:750px;min-width:0}.artwork-stage{position:relative;width:fit-content;max-width:100%;margin:0 auto}.art{display:block;width:auto;height:auto;max-width:100%;max-height:72vh;object-fit:contain}.caption{text-align:left;width:100%;font-size:17px;line-height:1.24;margin-top:20px}.nav{position:absolute;inset:0 0 auto 0;height:0;pointer-events:none}.arrow{position:absolute;top:0;transform:translateY(-50%);pointer-events:auto;font:400 22px/1 Arial,Helvetica,sans-serif;color:#191919;background:none!important;border:0!important;box-shadow:none!important;appearance:none;cursor:pointer;padding:3px 5px}.arrow:hover{opacity:.55}.arrow[hidden]{display:none!important}#prev{left:-34px}#next{right:-34px}.counter{position:absolute;right:0;top:0;font-size:12px;color:#777;white-space:nowrap}.artwork-stage{--art-height:400px}.nav{top:calc(var(--art-height)/2)}.counter{top:calc(var(--art-height)/2 + 12px);transform:translateY(calc(var(--art-height)/2 - 3px))}@media(max-width:800px){.back{top:24px;left:5%;font-size:13px}.layout{display:block;padding:85px 10% 40px}.heading{font-size:clamp(58px,12vw,90px);margin-bottom:22px}.gallery{padding:0}.art{max-height:65vh}.caption{font-size:15px}.arrow{font-size:19px}#prev{left:-26px}#next{right:-26px}}
.counter{top:calc(var(--art-height)/2 + 12px);transform:none}

/* Extra breathing room between artwork and navigation arrows. */
@media(min-width:801px){#prev{left:-58px}#next{right:-58px}}
@media(max-width:800px){#prev{left:-40px}#next{right:-40px}}

/* Increased arrow clearance on all portfolio pages. */
@media(min-width:801px){#prev{left:-90px}#next{right:-90px}}
@media(max-width:800px){#prev{left:-52px}#next{right:-52px}}

/* Keep arrows inside the iPhone viewport while preserving desktop spacing. */
@media(max-width:800px){#prev{left:-20px}#next{right:-20px}}

/* Mobile arrows: 30px outside artwork; desktop remains 90px. */
@media(max-width:800px){#prev{left:-30px}#next{right:-30px}}