@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root{--green:#87d77b;--muted:#b8c0b9;--edge:#293b2c;--bg:#060a07}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030503;color:#f4f6f3;font:16px/1.7 Inter,Arial,sans-serif}a{color:var(--green)}a:hover{color:white}img{max-width:100%}.site-header{background:rgba(0,0,0,.96);border-bottom:1px solid #233428}.header-inner{max-width:1160px;margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand img{width:120px;display:block}.nav{display:flex;flex-wrap:wrap;gap:4px}.nav a{display:block;text-decoration:none;color:#e8f0e8;padding:10px 13px;border-radius:3px;font-size:14px}.nav a:hover,.nav a[aria-current=page]{background:#244c2a;color:#fff}.hero{background:#030503 url('assets/top_bg.jpg') center top/auto 800px no-repeat;min-height:680px;position:relative}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 10%,rgba(0,0,0,.2) 42%,#030503 96%);pointer-events:none}.hero-inner{max-width:1160px;margin:auto;padding:95px 24px 150px;position:relative;z-index:1}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--green);font-size:12px;font-weight:600}h1,h2,h3{font-family:'Barlow Condensed',Impact,sans-serif;line-height:1.1;letter-spacing:.015em}h1{font-size:clamp(56px,9vw,110px);margin:12px 0 16px;max-width:800px;text-transform:uppercase}h2{font-size:clamp(36px,5vw,56px);margin:0 0 20px;text-transform:uppercase}h3{font-size:26px;margin:0 0 8px}p{color:var(--muted);max-width:720px}.lead{font-size:clamp(17px,2.2vw,21px);max-width:650px;color:#e5eee5}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.button{display:inline-block;padding:13px 22px;background:#4b9854;color:#061007;text-decoration:none;font-weight:700;border:1px solid #6ebd73;border-radius:3px}.button.secondary{background:rgba(0,0,0,.6);color:white;border-color:#708a73}.button:hover{background:#8fe39a;color:#061007}.container{max-width:1160px;margin:auto;padding:68px 24px}.container.compact{padding-top:35px}.section-dark{background:#0b100c}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.panel{background:#111a13;border:1px solid var(--edge);padding:25px;border-radius:4px}.panel p{margin-bottom:0}.intro{max-width:770px}.split{display:grid;grid-template-columns:1.25fr .75fr;gap:45px;align-items:center}.logo-showcase{max-width:300px;margin:auto;filter:drop-shadow(0 8px 30px #000)}.page-hero{background:#040704 url('assets/top_bg.jpg') center top/cover no-repeat;border-bottom:1px solid #213322}.page-hero .container{padding-top:78px;padding-bottom:85px;background:linear-gradient(90deg,rgba(0,0,0,.72),transparent)}.page-hero h1{font-size:clamp(50px,7vw,78px)}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gallery-item{border:1px solid #2d4532;background:#101710;padding:0;cursor:pointer;text-align:left;color:white;overflow:hidden}.gallery-item img{width:100%;height:260px;object-fit:cover;display:block;transition:transform .25s}.gallery-item:hover img{transform:scale(1.035)}.gallery-item span{display:block;padding:12px 15px;font-size:14px}.empty{border:1px dashed #426249;background:#0d150f;padding:40px;border-radius:4px}.footer{border-top:1px solid #233428;padding:32px 24px;text-align:center;background:#020402}.footer p{margin:auto;font-size:13px}.footer a{color:#b6d9b8}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:50;display:none;align-items:center;justify-content:center;padding:60px 60px 85px}.lightbox.open{display:flex}.lightbox img{max-height:80vh;max-width:100%;object-fit:contain}.lightbox button{position:absolute;border:1px solid #5b775d;background:#121b14;color:white;cursor:pointer;padding:8px 14px;font-size:24px}.lightbox .close{top:16px;right:20px}.lightbox .prev{left:12px}.lightbox .next{right:12px}.lightbox .caption{position:absolute;bottom:20px;color:#d9e4d9;text-align:center}.notice{font-size:13px;color:#b7c5b7}.contact-link{font-size:20px}.footer-brand{width:125px;opacity:.85;display:block;margin:0 auto 15px}@media(max-width:760px){.header-inner{flex-direction:column}.brand img{width:92px}.nav{justify-content:center}.nav a{font-size:12px;padding:8px}.hero{min-height:600px;background-size:auto 650px}.hero-inner{padding-top:85px}.grid,.gallery,.split{grid-template-columns:1fr}.gallery-item img{height:auto;max-height:440px}.container{padding:50px 20px}.lightbox{padding:60px 35px 85px}}

.resource-content{max-width:940px}.resource-nav{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:42px}.resource-nav a{border:1px solid #375b3d;border-radius:3px;padding:9px 15px;text-decoration:none;background:#122016}.resource-section{border-top:1px solid #2c4732;padding:35px 0}.resource-section p{max-width:850px}.resource-section h2{font-size:clamp(32px,4vw,46px)}.faq-item{border-bottom:1px solid #2c4732;padding:16px 0}.faq-item summary{font-weight:600;cursor:pointer;color:#e8f4e9}.faq-item summary:hover{color:#87d77b}.faq-item p{margin:12px 0 0}

/* Original tattoo education illustrations */
.resource-figure{margin:1.5rem 0 2rem;text-align:center}.resource-figure img{display:block;max-width:100%;height:auto;max-height:460px;margin:auto;object-fit:contain}.resource-figure figcaption{margin-top:.65rem;color:#aeb7ae;font-size:.9rem}

/* Portfolio gallery */
.portfolio-section {padding-top: 3rem; padding-bottom: 4rem;}
.gallery-help {padding: 1.5rem; border: 1px solid #55705d; border-radius: 12px; margin: 1.5rem 0; background: rgba(15,34,23,.75);}
.gallery-help h3 {margin-top: 0;}
.gallery-help label {display: inline-block; cursor: pointer;}
.gallery-note {font-size: .9rem; opacity: .85; margin-top: 1.2rem;}
.gallery-note code {overflow-wrap: anywhere;}
.gallery-status {margin-top: 1rem; opacity: .8;}
.gallery {display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 18px; margin: 1.5rem 0;}
.gallery-item {padding: 0; border: 1px solid #40584a; border-radius: 9px; overflow: hidden; background: #15261b; color: #f4f4f4; cursor: pointer; text-align: left;}
.gallery-item img {width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .2s;}
.gallery-item:hover img {transform: scale(1.04);}
.gallery-item span {display: block; padding: .6rem .75rem; font-size: .86rem;}
.gallery-item:focus-visible {outline: 3px solid #d8c580; outline-offset: 3px;}

/* Shared Gotham city canyon parallax across all site pages. */
.home-page { background:#030503; isolation:isolate; }
.home-parallax-art {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url('assets/Gotham_Muted_Green_Gargoyles_Moon_2048x3072.png');
  background-color:#030503;
  background-repeat:no-repeat;
  background-size:max(100vw, 780px) auto;
  background-position:center top;
}
.home-page .hero {
  background:transparent;
  min-height:min(95vh, 900px);
}
.home-page .hero::after {
  background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.35) 65%,rgba(0,0,0,.12)),
             linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28) 72%,rgba(0,0,0,.64));
}
.home-page .section-dark {background:rgba(4,9,5,.84);}
.home-page main > .container {background:rgba(4,9,5,.72);}
.home-page .footer {background:rgba(2,4,2,.94);}
.home-page .site-header {background:rgba(0,0,0,.94);}
@media(max-width:760px){
  .home-page .hero{min-height:660px;}
  .home-page .hero::after{background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.35)),linear-gradient(180deg,transparent,rgba(0,0,0,.7));}
}
@media(prefers-reduced-motion:reduce){
  .home-parallax-art{background-position:center top !important;}
}

/* Interior pages use the same artwork and scroll depth as the homepage. */
.parallax-page {background:#030503;isolation:isolate;}
.parallax-page .page-hero {background:transparent;position:relative;}
.parallax-page .page-hero .container {background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.35) 75%,rgba(0,0,0,.22));}
.parallax-page main {background:rgba(3,7,4,.48);}
.parallax-page main > .container {background:rgba(4,9,5,.72);}
.parallax-page .section-dark {background:rgba(4,9,5,.84);}
.parallax-page .site-header {background:rgba(0,0,0,.94);}
.parallax-page .footer {background:rgba(2,4,2,.94);}