# Query: 1
# ContextLines: 1

/* theme + base (unchanged essentials) */
:root{ --safety-orange:#ff6700; --maxw:1100px; --pad:16px; }
*,*::before,*::after{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.4; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-color:#000; position:relative;
}
/* fixed full-viewport background */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.6)),
    url("/Images/1.png");
  background-position:center top; background-size:cover; background-repeat:no-repeat;
}

/* layout */
header, footer, .main{ width:min(100% - 2*var(--pad), var(--maxw)); margin-inline:auto; }
header, footer{ padding:12px 0; }
.main{
  min-height:100dvh; min-height:calc(var(--vh,1vh)*100);
  display:grid; place-items:center; gap:24px; padding:clamp(24px,6vw,64px) 0;
}

/* nav */
.top-nav{ display:flex; gap:clamp(12px,4vw,28px); flex-wrap:wrap; align-items:center; justify-content:center;
  font-family:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif; letter-spacing:.02em; font-size:clamp(14px,2.2vw,18px); }
.top-nav a{ color:#000; text-decoration:none; text-underline-offset:2px; text-shadow:0 0 10px rgba(255,255,255,.65); }
.top-nav a:hover,.top-nav a:focus-visible{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--safety-orange); outline-offset:3px; }

/* masthead */
.logo-text{ margin:0; text-align:center; text-transform:uppercase; line-height:.85; letter-spacing:.04em; }
.logo-text .spray{
  position:relative; display:block; font-family:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-weight:400; color:var(--safety-orange); -webkit-text-stroke:1px rgba(255,103,0,.65);
  text-shadow:0 0 2px rgba(255,103,0,.95),0 0 6px rgba(255,103,0,.65),0 0 14px rgba(255,103,0,.35),0 2px 24px rgba(0,0,0,.35);
}
.logo-text .spray:first-child{ font-size:clamp(40px,11vw,110px); }
.logo-text .spray:last-child{  font-size:clamp(34px,9.5vw,92px); margin-top:.06em; }
.logo-text .spray::before{
  content:attr(data-text); position:absolute; inset:0; color:transparent;
  background:
    radial-gradient(6px 6px at 12% 28%, rgba(255,103,0,.18) 0 40%, transparent 41%),
    radial-gradient(4px 4px at 72% 44%, rgba(255,103,0,.18) 0 40%, transparent 41%),
    radial-gradient(3px 3px at 36% 70%, rgba(255,103,0,.15) 0 50%, transparent 51%),
    radial-gradient(5px 5px at 84% 18%, rgba(255,103,0,.12) 0 45%, transparent 46%),
    radial-gradient(2px 2px at 8% 80%, rgba(255,103,0,.12) 0 50%, transparent 51%);
  background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; opacity:.85; filter:blur(.25px);
  mix-blend-mode:screen; pointer-events:none;
}

/* flipbook container: no height rules; we let the embed control it */
.flipbook-embed{
  width:min(100%, var(--maxw));
  margin-inline:auto; padding:8px;
  background:#111; box-shadow:0 6px 30px rgba(0,0,0,.45); border-radius:10px; overflow:visible;
}
/* no iframe CSS here on purpose */

/* footer */
footer{ display:flex; justify-content:center; padding-bottom:32px; }
.about-link{ color:#000; font-weight:600; text-decoration:none; text-shadow:0 0 10px rgba(255,255,255,.65); }
.about-link:hover,.about-link:focus-visible{ text-decoration:underline; }

/* optional mobile fallback: make the embed taller when fullscreen isn't available */
@media (max-width: 640px){
  .fp-iframe{ height: 75vh !important; } /* fallback height on phones */
}