@font-face {
  font-family: 'Rauf Casual';
  src: url('assets/fonts/rauf/RaufCasual-Regular.woff2?v=2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rauf Casual';
  src: url('assets/fonts/rauf/RaufCasual-Bold.woff2?v=2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family:'Barlow Semi Condensed';
  src:url('assets/fonts/barlow/BarlowSemiCondensed-Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
:root { --ink:#242424; --muted:#555; --paper:#fff; --gold:#967018; --lettering:'Rauf Casual',sans-serif; }
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 1.125rem/1.65 var(--lettering); font-synthesis:none; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; touch-action:manipulation; }
button { font:inherit; cursor:pointer; touch-action:manipulation; }
a:focus-visible,button:focus-visible { outline:2px solid #315ab7; outline-offset:6px; }
::selection { background:#deded8; }
.skip { position:fixed; top:-80px; left:20px; z-index:20; padding:12px; background:white; }
.skip:focus { top:12px; }
.header { max-width:1160px; margin:auto; padding:52px 24px 0; text-align:center; }
.identity { display:inline-flex; flex-direction:column; align-items:center; }
.identity h1 { font:700 clamp(3rem,17vw,13rem)/1.05 var(--lettering); letter-spacing:0; margin:0; }
.brand-name { display:block; }
.brand-place { display:block; color:var(--gold); font:500 clamp(1.125rem,3.4vw,2.75rem)/1.4 'Barlow Semi Condensed',sans-serif; text-transform:uppercase; letter-spacing:.65em; padding-left:.65em; margin-top:8px; }
nav { display:flex; justify-content:center; gap:42px; padding:31px 0 24px; border-bottom:1px solid #e8e8e8; }
nav a { display:inline-flex; min-height:44px; align-items:center; font-size:1.125rem; letter-spacing:0; }
nav a:hover,.contact a:hover { text-decoration:underline; text-underline-offset:6px; }
.intro { text-align:center; color:var(--muted); margin:28px 20px 36px; line-height:1.8; }
.gallery { max-width:1112px; margin:0 auto; display:grid; gap:14px; }
.gallery-row { display:flex; gap:14px; align-items:flex-start; }
.gallery a { display:block; flex:var(--ratio) 1 6px; min-width:0; border:3px solid var(--gold); overflow:hidden; background:#f1f1f1; cursor:zoom-in; }
.gallery img { display:block; width:100%; height:auto; transition:opacity .2s ease; }
.gallery a:hover img { opacity:.88; }
.contact { text-align:center; padding:90px 24px 58px; }
.contact h2 { margin:0 0 17px; font:700 2rem/1.4 var(--lettering); }
.contact a { display:table; margin:0 auto; min-height:44px; padding:7px 0; }
.email { font-size:1.125rem; overflow-wrap:anywhere; max-width:100%; }
.phone { font-size:1.125rem; color:var(--muted); }
footer { text-align:center; color:#555; font-size:1rem; padding:0 20px 32px; }
.lightbox { background:#181919; color:white; border:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:20px 30px; overflow:hidden; overscroll-behavior:contain; }
.lightbox[open] { display:flex; flex-direction:column; }
.lightbox-top,.lightbox-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-shrink:0; }
.lightbox-top p { margin:0; }
.lightbox button { border:1px solid #777; background:transparent; color:white; min-height:44px; padding:10px 16px; }
.lightbox button:hover { background:#444; }
#large-photo { object-fit:contain; display:block; width:100%; min-height:0; flex:1; margin:18px 0; }
.lightbox-bottom { padding-bottom:8px; }
body:has(dialog[open]) { overflow:hidden; }
@media(max-width:1180px) { .gallery { margin-left:30px; margin-right:30px; } }
@media(max-width:700px) {
.header { padding:32px 22px 0; }
.identity h1 { font-size:17vw; }
nav { gap:clamp(16px,5vw,32px); flex-wrap:wrap; padding:22px 0 14px; }
.intro { font-size:1.125rem; margin:23px 20px 28px; }
.gallery { gap:8px; margin:0 16px; }
.gallery-row { gap:8px; }
.contact { padding-top:65px; padding-bottom:45px; }
.lightbox { padding:14px; }
.lightbox-top { font-size:1rem; }
.lightbox-top p { max-width:60%; }
.lightbox-bottom { font-size:1rem; gap:8px; }
.lightbox button { padding:10px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }