.brand-mark{height:44px;width:44px;flex:none;border:0;background:url('assets/photos/midnightwolf-logo.png') center/cover;filter:invert(1);mix-blend-mode:screen;color:transparent;font-size:0}
.field-notes{background:#171815;color:var(--paper)}
.field-notes .section-kicker{color:#a6a39b}
.field-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:42px 0 43px}
.field-heading h2{font-size:clamp(46px,5.2vw,70px);margin:19px 0 0}
.field-heading h2 em,.reels-heading h3 em{font-family:var(--serif);font-weight:400;color:var(--accent)}
.field-heading .button{margin-bottom:5px}
.field-heading .button-outline{color:var(--paper);border-color:rgba(193,154,104,.68)}
.photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:230px;gap:12px}
.photo-card{position:relative;overflow:hidden;display:block;background:#282923;isolation:isolate}
.photo-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(0deg,rgba(10,11,9,.86),transparent);z-index:0}
.photo-card img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s}
.photo-card:hover img{transform:scale(1.045);filter:saturate(1.08)}
.photo-card-tall{grid-row:span 2}
.photo-card-portrait{grid-row:span 2}
.photo-card-portrait img{object-position:40% 26%}
.photo-caption{position:absolute;z-index:1;bottom:17px;left:17px;right:40px;display:grid;gap:4px}
.photo-caption small{font-size:8px;letter-spacing:1.7px;color:#d5b48c}
.photo-caption b{font:500 15px/1.3 var(--display);letter-spacing:-.3px}
.photo-arrow{position:absolute;z-index:1;right:16px;bottom:18px;color:var(--accent);font-size:15px}
.reels-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:76px 0 27px}
.reels-heading h3{font:500 clamp(27px,3.2vw,39px)/1.15 var(--display);letter-spacing:-1.2px;margin:14px 0 0}
.reels-heading .arrow-link{margin-bottom:3px}
.reel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.reel-embed{min-width:0;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.08);min-height:250px}
.reel-embed .instagram-media{min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.reel-embed blockquote{padding:22px;color:#333;font-size:12px}
.reel-embed blockquote a{color:#333}
.reels-note{font-size:9px;color:#8f8d85;margin:14px 0 0}
.line-qr{display:flex;align-items:center;gap:13px;margin-top:16px;color:#d8d5cc}
.line-qr img{display:block;width:104px;height:104px;object-fit:contain;background:#fff;padding:5px}
.line-qr span{max-width:100px;font-size:9px;line-height:1.5;color:#aaa79f}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:210px}.photo-card-tall{grid-row:span 2}.reel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.field-heading{display:block;margin:35px 0 28px}.field-heading h2{font-size:49px}.field-heading>.button{margin-top:24px}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:195px;gap:9px}.photo-card-tall{grid-row:span 1}.photo-card-portrait{grid-column:span 2;grid-row:span 2}.photo-caption{left:12px;bottom:12px}.photo-caption b{font-size:13px}.photo-caption small{font-size:7px}.photo-arrow{right:12px;bottom:13px}.reels-heading{align-items:flex-start;gap:18px;margin:53px 0 23px}.reels-heading h3{font-size:27px}.reels-heading .arrow-link{gap:10px;white-space:nowrap;margin-top:20px;font-size:10px}.reel-grid{grid-template-columns:1fr;gap:12px}.reel-embed{max-width:410px;width:100%;margin-inline:auto}}

/* A darker, more focused look keeps training imagery and calls to action in front. */
.field-notes{background:#080808}
.photo-card{background:#101010}
.photo-card:after{background:linear-gradient(0deg,rgba(0,0,0,.92),transparent 72%)}
.reel-embed{background:#111;border-color:rgba(255,255,255,.12)}
.reel-embed blockquote,.reel-embed blockquote a{color:#eee}

/* Gallery tiles stay close to square so portrait subjects aren't cut off. */
.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:260px;grid-auto-flow:row}
.photo-card-tall,.photo-card-portrait{grid-row:span 1}
.photo-card-promo img{object-position:center 46%;filter:saturate(.72) contrast(1.06)}
.photo-card-promo-wide img{transform:scale(1.32)}
.photo-card-promo-wide:hover img{transform:scale(1.36)}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:220px}.photo-card-portrait{grid-column:span 2;grid-row:span 2}}
@media(max-width:650px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:195px;gap:9px}.photo-card-portrait{grid-column:span 2;grid-row:span 2}.photo-card-promo-wide img{transform:scale(1.28)}}
.photo-card-competition img{object-position:36% 34%;filter:saturate(.62) contrast(1.08)}
.photo-card-competition:hover img{filter:saturate(.75) contrast(1.08)}