@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Barlow+Condensed:wght@300;400;500;600&display=swap');

:root { --bg:#211b1b; --panel:#2b2222; --text:#f4eee5; --muted:#b4a69a; --line:#55413c; --red:#a52f2b; --red-dark:#581f1d; --max:1180px; }
* { box-sizing:border-box; border-color:var(--line); }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--bg); font-family:'Barlow Condensed',sans-serif; font-size:18px; background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(150,35,30,.3),transparent 70%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); background-attachment:fixed; }
a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; } h1,h2,h3 { margin:0; font-family:'UnifrakturCook',serif; font-weight:400; line-height:1.05; } p { line-height:1.55; } .wrap { max-width:var(--max); margin:auto; padding-left:20px; padding-right:20px; }
.site-header { position:fixed; z-index:5; inset:0 0 auto; padding:10px 0; transition:.3s; } .site-header.scrolled { padding:4px 0; background:rgba(33,27,27,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-row { display:flex; align-items:center; justify-content:space-between; } .logo { width:138px; height:54px; object-fit:contain; filter:brightness(1.25); } .nav-links { display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0; } .nav-links a,.eyebrow { text-transform:uppercase; letter-spacing:.22em; font-size:.76rem; color:var(--muted); } .nav-links a:hover,.nav-links .active { color:var(--text); } .button { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 28px; border:1px solid transparent; background:linear-gradient(100deg,var(--red-dark),#bf4036,var(--red-dark)); text-transform:uppercase; letter-spacing:.2em; font-size:.78rem; cursor:pointer; } .button:hover { transform:translateY(-2px); box-shadow:0 15px 35px rgba(150,35,30,.3); } .button.outline { background:transparent; border-color:var(--line); } .button.outline:hover { border-color:var(--red); color:#e46b5c; } .menu-button { display:none; border:1px solid var(--line); color:var(--text); background:none; padding:7px 10px; font-size:1.1rem; }
.hero { min-height:100vh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; padding:120px 20px 70px; } .hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; } .hero:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(33,27,27,.5),rgba(33,27,27,.65) 50%,var(--bg)); } .hero-content { position:relative; z-index:1; max-width:850px; } .hero-logo { width:min(100%,720px); margin:auto; filter:brightness(1.4) drop-shadow(0 20px 50px rgba(180,40,30,.5)); animation:float 7s ease-in-out infinite; } .gradient-text { background:linear-gradient(180deg,#df6551,#aa322c,#71302a); color:transparent; background-clip:text; } .hero h1,.page-hero h1 { font-size:clamp(3.4rem,8vw,6.5rem); } .hero-copy { max-width:680px; margin:20px auto 32px; color:var(--muted); font-size:1.2rem; } .actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; } .scroll-cue { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; margin-top:46px; padding:11px 15px 10px; border:1px solid rgba(244,238,229,.22); border-radius:999px; background:linear-gradient(180deg,rgba(50,38,38,.62),rgba(30,24,24,.74)); box-shadow:0 12px 30px rgba(0,0,0,.32); animation:cue-float 2.1s ease-in-out infinite; transition:border-color .25s ease, background .25s ease, box-shadow .25s ease; } .scroll-cue-text { color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-size:.64rem; line-height:1; } .scroll-cue-icon { width:13px; height:13px; border-right:2px solid #e4b9af; border-bottom:2px solid #e4b9af; transform:rotate(45deg); animation:cue-chevron 1.4s ease-in-out infinite; } .scroll-cue:hover { border-color:var(--red); background:linear-gradient(180deg,rgba(76,35,34,.72),rgba(46,22,21,.86)); box-shadow:0 16px 34px rgba(88,31,29,.45); } .scroll-cue:hover .scroll-cue-text { color:#f4eee5; } .scroll-cue:hover .scroll-cue-icon { border-color:#f4d0c8; } .page-hero { padding:180px 20px 80px; text-align:center; } .page-hero p { max-width:680px; margin:24px auto 0; color:var(--muted); font-size:1.15rem; }
.marquee { overflow:hidden; border-block:1px solid var(--line); padding:20px 0; } .marquee-track { display:flex; width:max-content; gap:48px; animation:marquee 28s linear infinite; } .marquee span { text-transform:uppercase; letter-spacing:.25em; color:#8e8178; font-size:1.45rem; white-space:nowrap; } .marquee span:after { content:'◆'; color:var(--red); margin-left:48px; font-size:.55em; vertical-align:middle; }
.section { padding:80px 20px; } .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .eyebrow { color:var(--muted); } .section h2 { margin-top:16px; font-size:clamp(2.6rem,5vw,4.5rem); } .muted { color:var(--muted); } .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; } .stats strong { display:block; font-family:'UnifrakturCook',serif; font-size:2.8rem; color:#c85144; } .stats small { text-transform:uppercase; letter-spacing:.15em; color:var(--muted); } .photo-grid { display:flex; justify-content:center; } .photo-grid img { width:min(100%, 500px); height:auto; object-fit:contain; }
.card { height:100%; padding:30px; border:1px solid var(--line); background:linear-gradient(160deg,#302626,#241c1c); box-shadow:0 25px 55px rgba(0,0,0,.4); } .card:hover { border-color:var(--red); transform:translateY(-5px); transition:.4s; } .card h3 { font-size:2.2rem; margin-top:18px; } .icon { color:#d15547; font-size:2rem; } .art-card { position:relative; overflow:hidden; padding:0; height:430px; } .art-card img { width:100%; height:100%; object-fit:cover; transition:.7s; } .art-card:hover img { transform:scale(1.08); } .caption { position:absolute; inset:auto 0 0; padding:24px; background:linear-gradient(transparent,rgba(20,15,15,.95)); transform:translateY(12px); opacity:0; transition:.4s; } .art-card:hover .caption { transform:none; opacity:1; } .caption h2 { font-size:2rem; }
.reward-card { display:grid; align-content:start; gap:14px; } .reward-card-image { width:100%; aspect-ratio:4 / 5; object-fit:cover; object-position:center; border:1px solid var(--line); } .reward-card .icon,.reward-card p,.reward-card h2,.reward-card h3 { margin:0; }
.tattoo-quinconce img.card,[data-dessins-gallery] img.card { cursor:zoom-in; } .image-lightbox { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:32px; background:rgba(8,6,6,.92); } .image-lightbox.open { display:flex; } .image-lightbox img { max-width:min(94vw,1200px); max-height:90vh; width:auto; height:auto; object-fit:contain; border:1px solid var(--line); box-shadow:0 24px 80px rgba(0,0,0,.65); } .image-lightbox-close { position:absolute; top:20px; right:24px; width:44px; height:44px; border:1px solid var(--line); background:rgba(33,27,27,.8); color:var(--text); font-size:1.7rem; cursor:pointer; } .image-lightbox-close:hover { border-color:var(--red); color:#f4d0c8; }
.filters { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:40px; } .filter { color:var(--muted); background:none; border:1px solid var(--line); padding:10px 18px; text-transform:uppercase; letter-spacing:.18em; cursor:pointer; } .filter.active,.filter:hover { color:var(--text); border-color:var(--red); background:linear-gradient(100deg,var(--red-dark),#a52f2b); } .filter-hidden { display:none; }
.tattoo-quinconce { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; } .tattoo-quinconce .art-card { height:auto; margin:0; } .tattoo-tile { min-height:0; aspect-ratio:4 / 5; } .tattoo-tile-1,.tattoo-tile-2,.tattoo-tile-3,.tattoo-tile-4,.tattoo-tile-5,.tattoo-tile-6 { grid-column:auto; grid-row:auto; } .tattoo-tile:hover { z-index:1; transform:translateY(-6px); }
@media (min-width:801px) { [data-dessins-gallery] { align-items:start; } [data-dessins-gallery] > article > img.card { width:100%; height:clamp(420px,45vw,620px); object-fit:cover; object-position:center; padding:0; } }
.timeline { border-left:1px solid var(--line); padding-left:32px; } .event { position:relative; margin-bottom:24px; } .event:before { content:''; position:absolute; left:-39px; top:28px; width:12px; height:12px; background:var(--red); transform:rotate(45deg); } .event-meta { color:#d15547; text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; } .feature { position:relative; min-height:380px; overflow:hidden; margin-bottom:55px; } .feature img { width:100%; height:380px; object-fit:cover; opacity:.7; } .feature-content { position:absolute; inset:auto 0 0; padding:44px; background:linear-gradient(transparent,rgba(25,18,18,.95)); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } label { display:block; } label span { display:block; margin-bottom:8px; } input,textarea { width:100%; padding:13px 15px; color:var(--text); background:rgba(80,55,50,.28); border:1px solid var(--line); font:inherit; outline:none; } input:focus,textarea:focus { border-color:var(--red); } textarea { resize:vertical; } .form-card { display:grid; gap:20px; } .before-write { border:1px solid var(--line); background:rgba(30,24,24,.5); padding:16px; } .before-write .eyebrow { margin:0 0 10px; color:#d9c8bb; } .before-write-list { list-style:none; padding:0; margin:0; display:grid; gap:8px; } .before-write-list li { display:flex; gap:10px; align-items:flex-start; color:var(--text); line-height:1.45; } .before-write-list span { color:#e46b5c; font-weight:600; letter-spacing:.12em; min-width:28px; } .honeypot-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } .notice { display:none; color:#78d4a5; text-align:center; margin:0; } .notice.error { color:#e46b5c; } .notice.visible { display:block; }
.booking-modal { position:fixed; inset:0; z-index:30; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(10,7,7,.75); backdrop-filter:blur(6px); }
.booking-modal.open { display:flex; }
.booking-modal-panel { width:min(100%,540px); border:1px solid var(--line); background:linear-gradient(160deg,#302626,#241c1c); box-shadow:0 30px 70px rgba(0,0,0,.5); padding:24px; position:relative; }
.booking-modal-close { position:absolute; top:10px; right:10px; width:36px; height:36px; border:1px solid var(--line); background:transparent; color:var(--text); font-size:1.25rem; cursor:pointer; }
.booking-modal-close:hover { border-color:var(--red); color:#f4d0c8; }
.booking-modal h2 { font-size:2rem; margin-bottom:10px; }
.booking-modal p { margin:0 0 20px; color:var(--muted); }
.booking-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.booking-modal-actions .button { width:100%; }
footer { margin-top:70px; border-top:1px solid var(--line); } .footer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:45px; padding:60px 20px; } footer ul { padding:0; margin:15px 0 0; list-style:none; color:var(--muted); line-height:1.9; } .copyright { border-top:1px solid var(--line); padding:22px; text-align:center; color:var(--muted); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; }
.reveal { opacity:0; transform:translateY(24px); transition:.8s ease; } .reveal.visible { opacity:1; transform:none; } @keyframes marquee { to { transform:translateX(-50%); } } @keyframes float { 50% { transform:translateY(-12px) rotate(1deg); } } @keyframes cue-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(7px); } } @keyframes cue-chevron { 0%,100% { opacity:.85; transform:translateY(0) rotate(45deg); } 50% { opacity:1; transform:translateY(4px) rotate(45deg); } }
@media (max-width:800px) { .nav-links { display:none; position:absolute; top:70px; left:0; right:0; padding:12px 20px; background:rgba(33,27,27,.98); border-top:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; } .nav-links.open { display:flex; } .nav-links a { display:block; padding:12px 0; border-bottom:1px solid var(--line); } .nav-links .button { margin-top:12px; } .menu-button { display:block; } .admin-header { position:fixed; } .admin-header .nav-row { align-items:center; } .admin-header .nav-links { top:64px; } .admin-header + .admin-wrap { margin-top:104px !important; } .grid-2,.grid-3,.footer-grid { grid-template-columns:1fr; } .section { padding-top:55px; padding-bottom:55px; } .form-grid { grid-template-columns:1fr; } .tattoo-quinconce { grid-template-columns:1fr; gap:18px; } .tattoo-quinconce .tattoo-tile { grid-column:auto; grid-row:auto; width:100%; aspect-ratio:4 / 5; } .feature-content { padding:25px; } .art-card { height:380px; } .tattoo-quinconce .art-card { height:auto; } .scroll-cue { margin-top:30px; padding:10px 13px 9px; } .scroll-cue-text { font-size:.6rem; letter-spacing:.14em; } .booking-modal-actions { grid-template-columns:1fr; } }
@media (max-width:800px) { .tattoo-quinconce .caption { transform:none; opacity:1; padding:18px; } .tattoo-quinconce .caption h2 { font-size:1.7rem; } .tattoo-quinconce .caption p { margin:8px 0 0; } }

.logo-text { display:block; color:var(--text); font-family:'UnifrakturCook',serif; font-size:1.55rem; line-height:.82; text-align:center; text-shadow:0 3px 15px rgba(180,40,30,.45); }
.hero-logo-text { display:block; margin:0 auto 18px; color:#d25a4d; font-family:'UnifrakturCook',serif; font-size:clamp(4rem,12vw,8rem); line-height:.75; text-shadow:0 20px 55px rgba(180,40,30,.5); animation:float 7s ease-in-out infinite; }
.atelier-title { font-size:3.5rem !important; }