/* The same sage paper, forest ink, blue accents and straight rules. */
.ff-image-open {
  position:relative;display:block;min-width:0;min-height:0;
  border:0;border-radius:0;background:transparent;color:inherit;
  padding:0;text-align:inherit;cursor:zoom-in;appearance:none;
}
.ff-image-open:focus-visible { outline:2px solid var(--pc-blue);outline-offset:4px; }
.ff-card-image-open { width:100%; }
.ff-tour-stage > .ff-tour-image-open { position:absolute;inset:0;width:100%;height:100%; }
.ff-tour-image-open img { display:block;width:100%;height:100%;object-fit:cover; }
.ff-tour-image-open img[data-fit="contain"] { object-fit:contain;background:#fbfaf7; }
.ff-image-open-hint {
  position:absolute;right:12px;bottom:12px;padding:8px 10px;
  background:var(--pc-bg);border:1px solid var(--pc-hair);color:var(--pc-blue);
  font:9px/1.4 "IBM Plex Mono",monospace;letter-spacing:.04em;
  opacity:0;transition:opacity .15s;pointer-events:none;
}
.ff-image-open:hover .ff-image-open-hint,
.ff-image-open:focus-visible .ff-image-open-hint { opacity:1; }
.ff-work-project-link { display:block;color:inherit;text-decoration:none; }
.ff-work-project-link:focus-visible { outline:2px solid var(--pc-blue);outline-offset:4px; }
.ff-work-project-link:hover h3 { color:var(--pc-blue); }

#ff-image-viewer {
  position:fixed;inset:0;margin:auto;padding:22px;
  width:calc(100vw - 40px);height:calc(100dvh - 40px);max-width:none;max-height:none;
  border:1px solid var(--pc-ink);border-radius:0;
  background:var(--pc-bg);color:var(--pc-ink);overflow:hidden;
  box-sizing:border-box;
}
#ff-image-viewer[open] { display:flex;flex-direction:column;gap:16px; }
#ff-image-viewer::backdrop { background:#24402EAA;backdrop-filter:blur(4px); }
.ff-image-viewer-head {
  flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:24px;border-bottom:1px solid var(--pc-hair);padding-bottom:16px;
}
body.pc-style #ff-image-viewer h2 {
  font:500 clamp(16px,1.8vw,24px)/1.15 "Space Grotesk",sans-serif;
  letter-spacing:-.02em;text-transform:uppercase;margin:0;color:var(--pc-ink);
}
.ff-image-viewer-controls { display:flex;gap:10px; }
.ff-image-viewer-controls button {
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  min-height:44px;min-width:100px;padding:10px 14px;
  background:none;color:var(--pc-blue);border:1px solid var(--pc-hair);border-radius:0;
  font:12px "Space Grotesk",sans-serif;cursor:pointer;
}
.ff-image-viewer-controls .ff-image-viewer-close {
  border-color:var(--pc-blue);background:var(--pc-blue);color:var(--pc-bg);
}
.ff-image-viewer-close span { font-size:22px;line-height:1; }
#ff-image-viewer :focus-visible { outline:2px solid var(--pc-blue);outline-offset:3px; }
.ff-image-viewer-canvas {
  flex:1;min-width:0;min-height:0;overflow:auto;background:#CCD4C0;
  overscroll-behavior:contain;touch-action:pan-x pan-y;
  scrollbar-color:var(--pc-muted) var(--pc-bg);
}
.ff-image-viewer-surface {
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-width:100%;min-height:100%;padding:0;
  background:none;border:0;border-radius:0;cursor:zoom-in;
}
body.pc-style #ff-image-viewer img[data-ff-asset] {
  display:block;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;
  filter:none!important;flex:none;
}
#ff-image-viewer.is-zoomed .ff-image-viewer-surface {
  width:max-content;height:max-content;align-items:flex-start;justify-content:flex-start;cursor:zoom-out;
}
body.pc-style #ff-image-viewer.is-zoomed img[data-ff-asset] {
  width:auto;height:auto;max-width:none;max-height:none;
}
body.pc-style #ff-image-viewer #ff-image-viewer-note {
  flex:none;margin:0;font:9px/1.6 "IBM Plex Mono",monospace;
  color:var(--pc-muted);border-top:1px solid var(--pc-hair);padding-top:12px;
}
@media (max-width:760px) {
  #ff-image-viewer { width:calc(100vw - 20px);height:calc(100dvh - 20px);padding:14px; }
  #ff-image-viewer[open] { gap:12px; }
  .ff-image-viewer-head { gap:12px;align-items:start;padding-bottom:12px; }
  body.pc-style #ff-image-viewer h2 { font-size:14px;line-height:1.3;align-self:center; }
  .ff-image-viewer-controls { gap:7px; }
  .ff-image-viewer-controls button { min-width:72px;min-height:44px;padding:8px 10px;font-size:11px;gap:8px; }
  .ff-image-key-hint { display:none; }
}
@media (hover:none) { .ff-image-open-hint { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .ff-image-open-hint { transition:none; } }