@charset "UTF-8";
/* A screenshot's natural ratio controls its width; no padded image tiles. */
.dialog-gallery { --shot-height: 340px; cursor: grab; align-items: start; touch-action: pan-x pan-y; }
.dialog-gallery.is-dragging { cursor: grabbing; user-select: none; }
.project-screenshot { width: max-content; max-width: none; flex: 0 0 auto; }
.screenshot-open { display: block; width: max-content; padding: 0; border: 0; border-radius: 10px; background: none; cursor: zoom-in; }
.project-screenshot img { display: block; width: auto; max-width: none; height: var(--shot-height); object-fit: initial; border: 1px solid #8ea47a; border-radius: 10px; background: none; }
.project-screenshot figcaption { font-size: 14px; }
.folder-app-icon, .dialog-app-icon { aspect-ratio: 1; border-radius: 25%; object-fit: contain; background: none; }
.image-viewer { width: min(1240px, calc(100% - 24px)); height: min(960px, 95dvh); max-height: 95dvh; padding: 18px 20px; border: 2px solid #9faf82; border-radius: 10px 5px 13px 6px; background: #f6f3e8; color: #2b4d31; overflow: hidden; }
.image-viewer::backdrop { background: #112c21ed; backdrop-filter: blur(7px); }
.image-viewer-toolbar { height: 74px; display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.image-viewer-toolbar h2 { font-size: 21px; line-height: 1.5; margin: 0; }
.image-viewer-count { font-size: 14px; color: #53644e; }
.image-viewer-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.viewer-zoom { padding: 9px 14px; border: 1px solid #a8b590; border-radius: 4px 7px; background: #f3e884; font-size: 15px; }
.viewer-close { width: 42px; height: 42px; background: #e5ebd4; border: 1px solid #a5b88d; border-radius: 50%; font-size: 30px; line-height: 1; }
.image-viewer-stage { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 10px; height: calc(100% - 116px); align-items: center; }
.viewer-prev, .viewer-next { width: 42px; height: 50px; border: 1px solid #9faf82; border-radius: 8px; background: #edf0dc; font-size: 25px; }
.viewer-prev:disabled, .viewer-next:disabled { opacity: .3; cursor: default; }
.image-viewer-viewport { height: 100%; min-width: 0; overflow: auto; display: flex; align-items: start; justify-content: center; touch-action: pan-y pinch-zoom; cursor: grab; scrollbar-width: thin; }
.image-viewer-viewport:active { cursor: grabbing; }
.image-viewer-image { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: auto; user-select: none; }
.image-viewer.is-zoomed .image-viewer-image { width: 100%; max-height: none; margin-block: 0; }
.image-viewer-hint { text-align: center; font-size: 14px; line-height: 1.5; margin: 12px 0 0; color: #53644e; }
.image-viewer[open] { animation: none; }
.message-panel { margin-top: 48px; padding: 34px; border: 1px solid #b0bf946b; border-radius: 5px 12px 6px 10px; background: #3d604044; }
.message-panel { background-image: var(--pencil-fibre); box-shadow: 2px 3px 0 #9db17c22; outline: 1px dashed #b7c69755; outline-offset: -7px; }
.image-viewer { background-image: var(--pencil-fibre); }
.message-panel h3 { font-size: 25px; line-height: 1.5; }
.message-panel > p { color: #d5e2c5; font-size: 16px; margin-top: 10px; }
#message-form { margin-top: 29px; }
.message-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
#message-form label { display: block; font-size: 17px; color: #e7edd8; }
#message-form label span { font-size: 12px; letter-spacing: .08em; margin-left: 10px; color: #bfd1ac; }
#message-form input, #message-form textarea { display: block; width: 100%; min-width: 0; padding: 13px 0; border: 0; border-bottom: 1px solid #bdd09c; border-radius: 0; color: #fffdf1; background: transparent; font: inherit; font-size: 18px; line-height: 1.8; box-shadow: none; }
#message-form input::placeholder, #message-form textarea::placeholder { color: #c9d6b7; opacity: .85; }
#message-form > label { margin-top: 30px; }
#message-form textarea { min-height: 150px; resize: vertical; }
.message-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.message-submit { width: 100%; min-height: 56px; padding: 12px 20px; margin-top: 30px; background: #f3e884; color: #2b4d31; border: 1px solid #c4b758; border-radius: 5px 9px 4px 8px; box-shadow: 3px 4px 0 #b3bd7855; font-size: 18px; font-weight: 700; display: flex; justify-content: center; gap: 30px; }
.message-submit:disabled { opacity: .6; cursor: wait; }
.message-status { min-height: 28px; font-size: 16px; margin-top: 15px; color: #f3e884; }
.message-status.is-error { color: #ffd2b6; }
.floating-nav .nav-contact { background: #9dac8266; border: 1px solid #b4c69955; gap: 8px; }
@media(max-width:600px) {
  .dialog-gallery { --shot-height: 330px; }
  .image-viewer { padding: 14px 10px; width: calc(100% - 12px); height: 96dvh; max-height: 96dvh; }
  .image-viewer-toolbar { height: 83px; align-items: start; gap: 8px; }
  .image-viewer-toolbar h2 { font-size: 18px; }
  .image-viewer-actions { gap: 6px; }
  .viewer-zoom { font-size: 13px; padding: 8px; }
  .viewer-close { width: 34px; height: 34px; font-size: 26px; }
  .image-viewer-stage { grid-template-columns: 27px minmax(0,1fr) 27px; gap: 4px; height: calc(100% - 126px); }
  .viewer-prev, .viewer-next { width: 27px; height: 42px; font-size: 19px; }
  .image-viewer-hint { font-size: 12px; }
  .message-panel { margin-top: 32px; padding: 25px 20px; }
  .message-panel h3 { font-size: 23px; }
  .message-panel > p { font-size: 15px; }
  .message-form-row { grid-template-columns: 1fr; gap: 25px; }
  #message-form input, #message-form textarea { font-size: 17px; }
  .message-submit { font-size: 17px; }
}