/* ============================================================
BLACKLOW — Dedicated Blackwork Tattoo
Monochrome / blackletter / death system
============================================================ */
/* Fonts are loaded via + in each
page's — far faster than @import, which serializes the request chain. */
:root{
--ink: #050505; /* base black */
--ink-1: #0a0a0a;
--ink-2: #101010; /* raised surface */
--ink-3: #161616; /* card / border-on-dark */
--bone: #e9e7e1; /* primary text */
--bone-dim: #9b9893; /* secondary text */
--bone-faint: #5a5854; /* tertiary / captions */
--line: rgba(233,231,225,0.12);
--line-soft: rgba(233,231,225,0.06);
--blade: #f4f2ec; /* cursor / hi-contrast */
--fdisp: 'Pirata One', serif; /* blackletter display */
--fcond: 'Oswald', sans-serif; /* condensed grotesque */
--fmono: 'Space Mono', monospace; /* technical labels */
--maxw: 1320px;
--gut: clamp(20px, 5vw, 80px);
--ease: cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
background:var(--ink);
color:var(--bone);
font-family:var(--fcond);
font-weight:300;
line-height:1.5;
letter-spacing:.01em;
overflow-x:hidden;
cursor:default;
/* faint top-light, like the studio photos */
background-image:radial-gradient(120% 80% at 50% -10%, #141414 0%, #080808 38%, #030303 100%);
background-attachment:fixed;
}
@media (hover:none){ body{ cursor:auto; } }
/* native cursors restored (custom blade cursor removed) */
*{ cursor:auto; }
a,button,label,summary,.btn,.filter,.hand,.chipset label,.consent,.fback,.nav__burger,[data-cursor]{ cursor:pointer; }
input,textarea{ cursor:text; }
input[type=range],input[type=checkbox],input[type=radio],select{ cursor:pointer; }
.cursor,.cursor__dot{ display:none !important; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--bone); color:var(--ink); }
/* ---------- GRAIN + VIGNETTE OVERLAYS ---------------------- */
.grain, .vignette{
position:fixed; inset:0; pointer-events:none; z-index:9000;
}
.grain{
opacity:.05; mix-blend-mode:screen;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grain 600ms steps(2) infinite;
}
@keyframes grain{
0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)}
100%{transform:translate(3%,3%)}
}
.vignette{
z-index:8999;
background:
radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 86%, rgba(0,0,0,.92) 100%);
}
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; } }
/* ---------- CUSTOM BLADE CURSOR --------------------------- */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor__cross{ position:relative; width:34px; height:34px;
transition:width .25s var(--ease), height .25s var(--ease); }
.cursor__cross::before, .cursor__cross::after{
content:''; position:absolute; background:var(--blade); }
.cursor__cross::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
.cursor__cross::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px); }
.cursor__dot{ position:fixed; top:0; left:0; width:5px; height:5px; background:var(--blade);
border-radius:50%; transform:translate(-50%,-50%); z-index:9999; pointer-events:none;
mix-blend-mode:difference; transition:transform .12s var(--ease); }
.cursor__read{ position:absolute; left:24px; top:24px; font-family:var(--fmono);
font-size:9px; letter-spacing:.05em; color:var(--blade); white-space:nowrap;
opacity:.8; }
body.is-hover .cursor__cross{ width:54px; height:54px; }
body.is-down .cursor__cross{ width:20px; height:20px; }
/* ---------- LAYOUT ---------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ position:relative; padding-block:clamp(80px,12vh,160px); }
.rule{ height:1px; background:var(--line); border:0; }
/* ---------- TYPE ------------------------------------------ */
.eyebrow{ font-family:var(--fmono); font-size:11px; letter-spacing:.42em;
text-transform:uppercase; color:var(--bone-dim); display:inline-flex; gap:.9em; align-items:center; }
.eyebrow::before{ content:''; width:30px; height:1px; background:var(--bone-faint); display:inline-block; }
.display{ font-family:var(--fdisp); font-weight:400; line-height:.92;
letter-spacing:.005em; }
.cond{ font-family:var(--fcond); }
h1,h2,h3{ font-weight:400; line-height:1.02; }
.kicker{ font-family:var(--fcond); font-weight:600; text-transform:uppercase;
letter-spacing:.16em; }
.lead{ color:var(--bone-dim); font-weight:300; font-size:clamp(15px,1.4vw,18px);
line-height:1.7; letter-spacing:.02em; max-width:54ch; }
.lead--wide{ max-width:none; }
.mono{ font-family:var(--fmono); }
.tnum{ font-family:var(--fmono); }
/* ---------- HEADER / NAV ---------------------------------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:1000;
display:flex; align-items:center; justify-content:space-between;
padding:18px var(--gut); mix-blend-mode:normal;
transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(5,5,5,.72); backdrop-filter:blur(10px);
border-bottom:1px solid var(--line); padding-block:12px; }
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__brand img{ width:30px; height:auto; filter:drop-shadow(0 0 1px rgba(0,0,0,.6)); }
.nav__brand .wm{ font-family:var(--fcond); font-weight:600; letter-spacing:.34em;
font-size:14px; text-transform:uppercase; padding-left:2px; }
.nav__links{ display:flex; gap:34px; align-items:center; }
.nav__links a{ font-family:var(--fmono); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--bone-dim); position:relative; padding:6px 0;
transition:color .3s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--bone); }
.nav__links a[aria-current="page"]::after{ content:''; position:absolute; left:0; right:0;
bottom:-2px; height:1px; background:var(--bone); }
.nav__cta{ font-family:var(--fcond); font-weight:600; text-transform:uppercase;
letter-spacing:.16em; font-size:12px; border:1px solid var(--line); padding:9px 18px;
color:var(--bone); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s; }
.nav__cta:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.nav__burger{ display:none; }
@media (max-width:820px){
.nav__links{ position:fixed; inset:0; flex-direction:column; justify-content:center;
gap:30px; background:rgba(4,4,4,.96); backdrop-filter:blur(14px);
transform:translateY(-100%); transition:transform .5s var(--ease); }
.nav__links.open{ transform:translateY(0); }
.nav__links a{ font-size:15px; }
.nav__burger{ display:flex; flex-direction:column; gap:5px; width:30px; z-index:1001;
background:none; border:0; cursor:pointer; }
.nav__burger span{ height:1.5px; background:var(--bone); transition:transform .4s var(--ease), opacity .3s; }
.nav__burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; }
.nav__burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}
/* ---------- BUTTONS — two variants only ------------------- */
.btn{ display:inline-flex; align-items:center; gap:14px; font-family:var(--fcond);
font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:13px;
padding:16px 30px; border:1px solid var(--bone); position:relative; cursor:pointer;
transition:color .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease); }
.btn .arrow{ transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translateX(5px); }
/* SOLID — filled bone, inverts to ink on hover */
.btn--solid{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn--solid:hover{ background:var(--ink); color:var(--bone); border-color:var(--bone); }
/* GHOST — outline, fills to bone on hover */
.btn--ghost{ background:transparent; color:var(--bone); border-color:var(--bone); }
.btn--ghost:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
/* ---------- FOOTER ---------------------------------------- */
.foot{ border-top:1px solid var(--line); padding-block:64px 40px; position:relative; }
.foot__grid{ display:grid; grid-template-columns:2.4fr 1fr 1fr; gap:40px; align-items:start; }
.foot__grid > div{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.foot__big{ font-family:var(--fdisp); font-size:clamp(36px,6vw,84px); line-height:.9;
color:var(--bone); }
.foot__brand{ display:flex; align-items:center; gap:16px; }
.foot__brand img{ width:46px; height:auto; filter:drop-shadow(0 0 1px rgba(0,0,0,.6)); }
.foot__brand .wm{ font-family:var(--fcond); font-weight:600; letter-spacing:.34em;
font-size:22px; text-transform:uppercase; color:var(--bone); padding-left:2px; }
.foot h4{ font-family:var(--fmono); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
color:var(--bone-faint); margin-bottom:18px; }
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.foot a{ color:var(--bone-dim); font-size:14px; transition:color .3s; }
.foot a:hover{ color:var(--bone); }
.foot__bottom{ display:flex; justify-content:space-between; align-items:center;
margin-top:64px; padding-top:24px; border-top:1px solid var(--line-soft);
font-family:var(--fmono); font-size:10px; letter-spacing:.12em; color:var(--bone-faint);
text-transform:uppercase; flex-wrap:wrap; gap:14px; }
@media (max-width:760px){ .foot__grid{ grid-template-columns:1fr; } .foot__big{ grid-column:1/-1; } }
/* ---------- REVEAL (keyframe-driven so it reaches the end state reliably) ---------- */
[data-reveal]{ opacity:0; }
[data-reveal].in{ animation:rev-up .9s var(--ease) forwards; }
[data-reveal-clip]{ clip-path:inset(0 100% 0 0); }
[data-reveal-clip].in{ animation:rev-clip 1.1s var(--ease) forwards; }
[data-stagger]>*{ opacity:0; }
[data-stagger].in>*{ animation:rev-up .9s var(--ease) forwards; }
@keyframes rev-up{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes rev-clip{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
/* safety net: static end-state lock (applied by JS shortly after .in) so content
can never stay stuck on a paused/throttled animation */
[data-reveal].settled, [data-stagger].settled>*{ opacity:1!important; transform:none!important; }
[data-reveal-clip].settled{ clip-path:inset(0 0 0 0)!important; }
@media (prefers-reduced-motion:reduce){
[data-reveal],[data-reveal-clip],[data-stagger]>*{ opacity:1!important; transform:none!important; clip-path:none!important; animation:none!important; }
}
/* ---------- IMG TREATMENT --------------------------------- */
.bw{ filter:grayscale(1) contrast(1.08) brightness(.92); }
.bw--hi{ filter:grayscale(1) contrast(1.18) brightness(.8); }
/* ---------- PLACEHOLDER (for missing flash art) ----------- */
.ph{ position:relative; background:
repeating-linear-gradient(45deg, #0c0c0c 0 10px, #090909 10px 20px);
border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center;
overflow:hidden; }
.ph::after{ content:attr(data-label); font-family:var(--fmono); font-size:10px;
letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); }
/* ---------- FRAME (echoes the framed painting in the photos) ---------- */
.frame{ position:relative; background:#070707; padding:10px;
border:1px solid var(--line);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), 0 30px 60px -30px rgba(0,0,0,.9); }
.frame::after{ content:''; position:absolute; inset:10px; border:1px solid var(--line-soft); pointer-events:none; z-index:2; }
.frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame--tall{ aspect-ratio:3/4.4; }
/* ---------- SECTION HEAD ---------- */
.sec-head{ display:grid; grid-template-columns:auto 1fr auto; align-items:end;
gap:24px 40px; margin-bottom:54px; }
.sec-head .eyebrow{ grid-column:1; }
.sec-head__title{ grid-column:1/2; grid-row:2; font-size:clamp(40px,6vw,84px); line-height:.92; white-space:nowrap; }
.sec-head__link{ grid-column:3; grid-row:2; align-self:end; justify-self:end;
font-size:11px; letter-spacing:.2em; color:var(--bone-dim); padding-bottom:8px;
border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
.sec-head__link:hover{ color:var(--bone); border-color:var(--bone); }
@media (max-width:760px){
.sec-head{ grid-template-columns:1fr; }
.sec-head__title{ white-space:normal; }
.sec-head__link{ grid-column:1; grid-row:auto; justify-self:start; }
}
/* ---------- MARQUEE ---------- */
.marquee{ border-block:1px solid var(--line); overflow:hidden; padding-block:22px;
background:var(--ink-1); }
.marquee__track{ display:inline-flex; align-items:center; gap:30px; white-space:nowrap;
animation:marq 34s linear infinite; will-change:transform; }
.marquee span{ font-family:var(--fdisp); font-size:clamp(26px,3.6vw,48px); color:var(--bone);
line-height:1; }
.marquee i{ color:var(--bone-faint); font-size:18px; font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }
/* utility */
.center{ text-align:center; }
.muted{ color:var(--bone-dim); }
.faint{ color:var(--bone-faint); }
.up{ text-transform:uppercase; }