/* Compact first-screen hero: heading first, then the complete net collage. */
.intro{max-width:none;margin:0 auto;padding:14px clamp(24px,7vw,104px) 12px;align-items:flex-end}
.intro-copy{max-width:850px}
.eyebrow{margin-bottom:7px}
.intro h1{font:600 clamp(31px,3.7vw,47px)/1.02 var(--sans);letter-spacing:-.055em}
.intro h1 br{display:none}
.intro h1 em{font-style:italic;font-weight:600;color:#d87621}
.intro .dek{max-width:470px;font-size:12px;line-height:1.45;margin:8px 0 0}
.intro-meta{display:none}
.hint{padding-bottom:4px}
.scene-label,.scene-caption{display:none}
.net-scene{height:min(760px,calc(100svh - 200px));min-height:540px;margin:0 auto;max-width:none}
.basket{top:0;width:min(900px,calc(100svh - 220px),96vw);height:min(900px,calc(100svh - 220px),96vw);min-height:0;filter:drop-shadow(0 22px 22px #272c3026)}
.basket-shadow{display:none}
/* Fit the card clipping window to the inside of the supplied net bowl. */
.photo-bed{inset:auto;left:14%;top:29%;width:72%;height:58%;z-index:3;clip-path:polygon(9% 0,91% 0,99% 18%,92% 48%,77% 77%,61% 95%,50% 100%,39% 95%,23% 77%,8% 48%,1% 18%)}
.net-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:4;pointer-events:none;user-select:none}
.photo-card{--jitter-x:0px;--jitter-y:0px;--jitter-r:0deg;transform:translate3d(var(--jitter-x),var(--jitter-y),0) rotate(calc(var(--rot) + var(--jitter-r)));transition:transform 90ms ease-out,box-shadow .35s}
.photo-card:hover,.photo-card:focus-visible{z-index:12!important}
.fish{width:var(--size);height:var(--size);filter:drop-shadow(0 9px 8px #b14e1b24);overflow:visible}
.fish-art{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.about h2{font-family:var(--sans);font-weight:500;letter-spacing:-.05em}
@media(max-width:760px){
  .intro{padding:13px 23px 9px;display:block}
  .intro h1{font-size:clamp(30px,8vw,39px)}
  .intro .dek{display:none}
  .hint{display:none}
  .net-scene{height:min(650px,calc(100svh - 160px));min-height:500px;margin-top:0}
  .basket{top:0;width:min(96vw,calc(100svh - 190px));height:min(96vw,calc(100svh - 190px))}
  .photo-bed{left:14%;top:29%;width:72%;height:58%}
  .photo-card{padding:4px 4px 13px}
}
@media(prefers-reduced-motion:reduce){.photo-card{transition:transform .01ms,box-shadow .01ms}}
/* Let the floating photos and fish share the full scene without a net mask. */
.net-scene{overflow:visible;height:min(900px,calc(100svh - 135px));min-height:640px}
.photo-bed{inset:0;width:100%;height:100%;overflow:visible;clip-path:none;}
.fish-layer{overflow:visible;}
.photo-card{border-radius:2px;padding:6px 6px 6px;}
.photo-card img{height:100%;}
.photo-note{display:none!important;}
.hook-art{position:absolute;top:0;max-width:none;object-fit:fill;pointer-events:none;user-select:none;}
.hook-photo{z-index:2;}
@media(max-width:760px){.net-scene{height:min(800px,calc(100svh - 110px));min-height:620px}.photo-card{padding:4px}}
/* A single fixed layer coordinates the supplied grouped hook-and-line SVG. */
.hook-rig{position:fixed;inset:0;z-index:80;pointer-events:none;visibility:hidden;opacity:0;overflow:hidden;transition:opacity .16s ease;}
.hook-rig.is-visible{visibility:visible;opacity:1;}
.hook-art{position:absolute;display:block;top:0;max-width:none;object-fit:fill;pointer-events:none;user-select:none;z-index:1;}
.hook-photo{position:absolute;display:block;box-sizing:border-box;padding:5px 5px 5px;background:#fffdfa;border:1px solid #d9d4c9;box-shadow:0 12px 26px #20252a50;opacity:0;transform-origin:center;z-index:2;}
.hook-photo.photo-visible{opacity:1;}
.hook-photo img{display:block;width:100%;height:100%;object-fit:cover;}
.photo-card.is-caught{visibility:hidden;pointer-events:none;}
.brand-logo{display:block;width:46px;height:42px;object-fit:contain;flex:none}
@media(max-width:760px){.brand-logo{width:38px;height:36px}}
.brand-logo{width:36px;height:33px}
@media(max-width:760px){.brand-logo{width:31px;height:29px}}
.hook-extension{position:absolute;top:0;width:1.4px;height:0;background:#919191;transform:translateX(-50%);pointer-events:none;z-index:1}
.topbar{padding-left:clamp(24px,7vw,104px);padding-right:clamp(24px,7vw,104px)}
footer .keep-looking{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
footer .keep-looking:hover{color:#d87621}
.gallery{width:min(1100px,calc(100vw - 36px));max-width:none;max-height:calc(100vh - 36px);margin:auto;padding:clamp(20px,4vw,44px);border:0;background:#f5f2ea;color:#252b28;box-shadow:0 20px 80px #1115}
.gallery::backdrop{background:#171b1bd9}
.gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.gallery-header p,.gallery-help{font:9px var(--mono);letter-spacing:.1em;color:#777970}
.gallery-header p{margin:0 0 8px}
.gallery-header h2{margin:0;font:500 clamp(27px,4vw,42px)/1.05 var(--serif);letter-spacing:-.04em}
.gallery-header h2 em{color:#d87621;font-weight:500}
.gallery .gallery-close{width:42px;height:42px;border:1px solid #bcb8ad;border-radius:50%;background:transparent;font-size:27px;color:inherit;cursor:pointer}
.gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-height:calc(100vh - 210px);overflow:auto;padding:2px}
.gallery-photo{min-width:0;border:0;padding:0;background:transparent;text-align:left;color:inherit;cursor:pointer}
.gallery-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#e4e0d6;transition:transform .2s ease,filter .2s ease}
.gallery-photo:hover img,.gallery-photo:focus-visible img{transform:translateY(-3px);filter:saturate(1.1)}
.gallery-photo span{display:block;padding-top:7px;font:9px var(--mono);color:#555950}
.gallery-help{margin:22px 0 0;text-align:right}
@media(max-width:760px){.topbar{padding-left:23px;padding-right:23px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:calc(100vh - 200px)}.gallery{padding:20px 16px}.gallery-photo span{font-size:8px}}
.top-link.open-gallery{border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer}
.top-link.open-gallery:hover{color:#d87621}
.gallery-header h2{font:600 clamp(31px,4vw,48px)/1.02 var(--sans);letter-spacing:-.055em}
.gallery-header h2 em{font-style:italic;font-weight:600}
.gallery-count{display:block;margin-top:11px;font:9px var(--mono);letter-spacing:.1em;color:#777970}
.gallery-photo video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#252b28;transition:transform .2s ease}
.viewer figure video{display:block;max-width:min(78vw,1180px);max-height:76vh;box-shadow:0 16px 60px #0006;background:#000}
.viewer figure video[hidden]{display:none}
.viewer figure img[hidden]{display:none}