/* ========================================================================== */
/* HEADER & LOGO                                                              */
/* ========================================================================== */
.fixed-header{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
pointer-events:none;
background:transparent;
}

.fixed-header__inner{
max-width:100%;
margin:0.75em 0 0 0;
padding-left:0.75em;
padding-right:var(--gutter);
text-align:left;
pointer-events:none;
}

.fixed-header__inner a,
.fixed-header__inner button,
.fixed-header__inner .major,
.fixed-header__inner .minor{
pointer-events:auto;
}

.major{
font-family:'fragment',system-ui,sans-serif!important;
color:var(--color-light);
font-size:clamp(27.54px,5.832vw,55.08px);
letter-spacing:0.02em;
margin:0;
padding:0;
display:block;
line-height:1;
position:relative;
z-index:1;
}

.minor{
font-family:'stencil',system-ui,sans-serif!important;
color:var(--color-medium);
opacity:0.95;
font-size:clamp(34px,7.2vw,68px);
letter-spacing:0.02em;
margin-top:-0.4em;
margin-left:0.2em;
padding:0;
display:block;
line-height:1;
position:relative;
z-index:2;
}
/* ========================================================================== */
/* DRAWER NAVIGATION                                                          */
/* ========================================================================== */
.nav-toggle{
position:fixed;
top:var(--gap-2);
right:var(--nav-edge-offset);
width:72px;
height:72px;
border:1px solid var(--color-medium);
border-radius:var(--radius);
background:rgba(0,0,0,0.8);
backdrop-filter:blur(8px);
z-index:1001;
}
.nav-toggle img{
width:100%;
height:100%;
object-fit:cover;
border-radius:var(--radius);
}
.drawer-overlay{
position:fixed;
inset:0;
background:rgba(23,18,0,0.4);
opacity:0;
pointer-events:none;
transition:opacity 200ms ease;
z-index:1000;
}
.drawer{
position:fixed;
top:0;
right:0;
height:100vh;
width:min(280px,58.67vw);
transform:translateX(100%);
transition:transform 260ms ease;
z-index:1002;
background:linear-gradient(180deg, rgba(0,0,0,1), rgba(23,18,0,0.4));
border-left:1px solid var(--color-medium);
backdrop-filter:blur(10px);
}
.drawer-inner{
height:100%;
display:flex;
flex-direction:column;
padding:var(--gap-2);
}
.drawer-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:var(--gap-1);
padding-bottom:var(--gap-1);
border-bottom:1px solid var(--color-medium);
}
.drawer-close{
border:1px solid var(--color-medium);
background:rgba(255,255,255,0.04);
color:var(--color-light);
border-radius:var(--radius);
padding:10px 12px;
}
.drawer-nav{
display:flex;
flex-direction:column;
gap:var(--gap-1);
padding-top:var(--gap-1);
}
.drawer-link{
display:block;
text-decoration:none;
color:var(--color-light);
padding:4px;
border-radius:var(--radius);
border:1px solid transparent;
box-sizing:border-box;
transition:background 160ms ease, border-color 160ms ease;
}
.drawer-link:hover{
color:var(--color-light);
border-color:var(--color-light);
}
.drawer-link:focus-visible{
outline:2px solid var(--color-light);
outline-offset:3px;
}
.drawer-divider{
border-bottom:1px dotted var(--color-medium);
}
.drawer-link-icon{
display:inline-flex !important;
align-items:center;
gap:10px;
}
.drawer-link-icon i{
width:18px;
text-align:center;
font-size:1rem;
flex:0 0 18px;
}
.drawer-icon-row{
display:flex;
gap:var(--gap-1);
align-items:center;
}
.drawer-icon-row .drawer-link{
width:auto;
}
.drawer-open .drawer{
transform:translateX(0);
}
.drawer-open .drawer-overlay{
opacity:1;
pointer-events:auto;
}
/* ========================================================================== */
/* FOOTER COPY & TOASTS                                                       */
/* ========================================================================== */
.copy-wrap{
position:relative;
}
.copy-toast{
position:absolute;
left:50%;
bottom:-1em;
transform:translateX(-50%) translateY(4px);
font-size:16px;
letter-spacing:0.08em;
text-transform:uppercase;
opacity:0;
pointer-events:none;
transition:opacity 180ms ease, transform 180ms ease;
}
.copy-toast.is-visible{
opacity:1;
transform:translateX(-50%) translateY(0);
}
/* ========================================================================== */
/* IN-SECTION FOOTER                                                          */
/* ========================================================================== */
.section-footer{
margin-top:var(--gap-3);
padding-top:var(--gap-2);
border-top:1px dotted var(--color-medium);
display:flex;
align-items:center;
justify-content:flex-end;
gap:var(--gap-1);
flex-wrap:wrap;
}
.social{
display:flex;
gap:var(--gap-1);
}
.social a{
color:var(--color-light);
text-decoration:none;
padding:calc(var(--gap-1) * 0.6) calc(var(--gap-1) * 0.75);
border-radius:var(--radius);
border:1px solid var(--color-medium);
background:var(--bg);
}
.social a:hover{
color:var(--color-light);
background:var(--color-medium);
}
/* ========================================================================== */
/* FIXED SITE FOOTER                                                          */
/* ========================================================================== */
.site-footer{
position:fixed;
bottom:clamp(8px, var(--gap-1), 16px);
left:0;
width:100%;
z-index:900;
background:rgba(0,0,0,0.50);
backdrop-filter:blur(1.5px);
border-top:1px solid var(--color-medium);
border-bottom:1px solid var(--color-medium);
padding:calc(var(--gap-1) * 0.75) var(--gutter);
}
.footer-inner{
max-width:var(--max);
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--gap-1);
flex-wrap:wrap;
}
.footer-left{
display:flex;
align-items:center;
min-width:220px;
flex:1 1 240px;
}
.footer-type{
font-size: 0.8rem;
line-height:1;
opacity:1;
display:flex;
justify-content:flex-start;
font-family:var(--font-typewriter);
color:var(--color-light);
}
.footer-type > .text{
width:0;
max-width:none;
white-space:nowrap;
overflow:hidden;
animation:typingW 6s steps(var(--characters)) infinite;
}
.footer-type:after{
content:"\00A0\00A0\00A0 />";
animation:blink 1s infinite;
animation-timing-function:step-end;
}
@keyframes typingW{
75%,
100%{ width:calc(var(--characters) * 1ch); }
}
@keyframes blink{
50%{ opacity:0; }
}
.footer-social{
display:flex;
align-items:center;
gap:14px;
}
.footer-social a{
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border-radius:50%;
border:1px solid var(--color-medium);
color:var(--color-light);
text-decoration:none;
background:var(--bg);
transition:background 200ms ease, opacity 200ms ease, border-color 200ms ease;
}
.footer-social a:hover{
background:var(--bg);
opacity:0.9;
border-color:var(--color-light);
}
.footer-social i{
font-size:16px;
line-height:1;
}
/* ========================================================================== */
/* MEDIA QUERIES                                                              */
/* ========================================================================== */
@media (max-width: 700px){
.footer-inner{ justify-content:center; }
.footer-left{
width:100%;
min-width:0;
justify-content:center;
flex:1 1 100%;
}
.footer-copy{
width:100%;
text-align:center;
white-space:normal;
}
.footer-social{
width:100%;
justify-content:center;
}
}
@media (max-width: 640px){
.footer-inner{
justify-content:center;
text-align:center;
}
}
@media (max-width: 380px){
.footer-type{ font-size:12px; }
}