/* Keys Tattoos — Kyrie Weir, Knoxville TN
   Forest + brass, Bodoni Moda display / Jost body, fine-line botanical signature */

:root{
  --forest:#16241B;
  --forest-2:#1E3026;
  --forest-deep:#0F1A13;
  --brass:#C2A36B;
  --brass-bright:#D9BE86;
  --bone:#ECE6D8;
  --bone-dim:#C7C3B4;
  --sage:#9DAE97;
  --rose:#D79B95;
  --line:rgba(194,163,107,.28);
  --line-soft:rgba(236,230,216,.12);

  --display:"Bodoni Moda",Georgia,serif;
  --body:"Jost",-apple-system,system-ui,sans-serif;

  --wrap:1240px;
  --pad:clamp(20px,5vw,72px);
  --z-nav:50;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--forest);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* subtle material grain so the green reads velvety, not flat */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
main,header,footer{position:relative;z-index:2}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

::selection{background:var(--brass);color:var(--forest)}

:focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1.04;letter-spacing:.005em}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);display:inline-block}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--body);font-weight:500;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;display:inline-flex;align-items:center;gap:.6em;cursor:pointer;border:1px solid var(--brass);
  background:var(--brass);color:var(--forest);transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--brass-bright);border-color:var(--brass-bright)}
.btn--ghost{background:transparent;color:var(--brass)}
.btn--ghost:hover{background:var(--brass);color:var(--forest)}
.btn--onlight{} /* same primary works on dark only; not used on light */

/* ---------- header ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);transition:background .3s ease,padding .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-head::before{ /* scrim for legibility over bright hero */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(15,26,19,.55),rgba(15,26,19,0));
  opacity:1;transition:opacity .3s ease;
}
.site-head.solid{background:rgba(15,26,19,.94);border-bottom-color:var(--line);padding-top:13px;padding-bottom:13px;backdrop-filter:blur(6px)}
.site-head.solid::before{opacity:0}

.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:26px;height:26px;flex:none}
.brand .wm{font-family:var(--display);font-weight:600;letter-spacing:.34em;font-size:1.05rem;color:var(--bone);text-indent:.34em}
.brand .wm small{display:block;font-family:var(--body);font-weight:400;letter-spacing:.42em;font-size:.5rem;color:var(--brass);text-indent:.42em;margin-top:1px}

.nav{display:flex;align-items:center;gap:34px}
.nav a.navlink{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bone);position:relative;padding:4px 0}
.nav a.navlink::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--brass);transition:width .28s ease}
.nav a.navlink:hover{color:var(--brass-bright)}
.nav a.navlink:hover::after{width:100%}
.nav .btn{padding:11px 20px}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;align-items:center;justify-content:center;color:var(--bone)}
.nav-toggle svg{width:24px;height:24px}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.hero__text{display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 80px;position:relative}
.hero__sprig{position:absolute;top:clamp(96px,14vh,150px);right:0;width:120px;opacity:.85}
.hero__sprig path{fill:none;stroke:var(--brass);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hero h1{font-size:clamp(3rem,7.4vw,6.4rem);margin:26px 0 0;color:var(--bone)}
.hero h1 em{font-style:italic;color:var(--brass);font-weight:500}
.hero__sub{max-width:42ch;margin:28px 0 0;color:var(--bone-dim);font-size:1.08rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__meta{margin-top:auto;padding-top:48px;display:flex;gap:34px;flex-wrap:wrap;font-size:.82rem;letter-spacing:.04em;color:var(--sage)}
.hero__meta b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--bone);font-weight:500;letter-spacing:0}
.hero__media{position:relative;overflow:hidden;background:var(--forest-2)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--forest) 0%,rgba(22,36,27,.12) 26%,transparent 48%)}

/* ---------- section frame ---------- */
.section{padding:clamp(72px,10vw,140px) 0;position:relative}
.section--panel{background:var(--forest-2)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.6rem);color:var(--bone);max-width:16ch}
.sec-head h2 em{font-style:italic;color:var(--brass)}
.sec-head p{max-width:34ch;color:var(--bone-dim);margin:14px 0 0}

/* divider sprig */
.divider{display:flex;align-items:center;gap:18px;color:var(--line)}
.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}
.divider svg{width:22px;height:22px;flex:none}
.divider svg path{fill:none;stroke:var(--brass);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- work gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px)}
.tile{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--forest-deep)}
.tile img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s ease;filter:saturate(.96)}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(to top,rgba(15,26,19,.82),transparent);
  opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;
}
.tile::before{content:"";position:absolute;inset:0;z-index:1;border:1px solid transparent;transition:border-color .35s ease;pointer-events:none}
.tile:hover img{transform:scale(1.06);filter:saturate(1.04)}
.tile:hover figcaption{opacity:1;transform:none}
.tile:hover::before{border-color:var(--line)}
.work__foot{margin-top:38px;display:flex;justify-content:center}

/* ---------- services ---------- */
.svc-intro{max-width:52ch;color:var(--bone-dim);margin:0 0 8px}
.svc-list{margin-top:8px;border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:24px;
  padding:26px 8px;border-bottom:1px solid var(--line);position:relative;transition:background .3s ease;
}
.svc-row::before{ /* sliding tick */
  content:"";position:absolute;left:-14px;top:50%;width:0;height:1px;background:var(--brass);transition:width .3s ease;transform:translateY(-50%)
}
.svc-row:hover{background:rgba(194,163,107,.05)}
.svc-row:hover::before{width:10px}
.svc-row:hover .svc-name{color:var(--brass-bright)}
.svc-name{font-family:var(--display);font-size:1.7rem;font-weight:500;color:var(--bone);transition:color .3s ease;white-space:nowrap}
.svc-desc{color:var(--bone-dim);font-size:.98rem}
.svc-time{color:var(--sage);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.svc-dep{font-family:var(--display);font-size:1.25rem;color:var(--brass);white-space:nowrap}
.svc-note{margin-top:26px;font-size:.92rem;color:var(--sage);display:flex;align-items:center;gap:10px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.about__media{position:relative;aspect-ratio:4/5}
.about__inner{position:absolute;inset:0;overflow:hidden}
.about__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.about__media:hover img{transform:scale(1.05)}
.about__media::after{content:"";position:absolute;inset:0;border:1px solid var(--line);transform:translate(16px,16px);z-index:-1}
.about__media{isolation:isolate}
.about h2{font-size:clamp(2.1rem,4.4vw,3.4rem);color:var(--bone)}
.about h2 em{font-style:italic;color:var(--brass)}
.about p{color:var(--bone-dim);margin:20px 0 0;max-width:46ch}
.about .sign{margin-top:26px;font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--brass)}

/* ---------- booking ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:8px}
.step{padding-top:22px;border-top:1px solid var(--line);position:relative}
.step::after{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--brass);transition:width .4s ease}
.step:hover::after{width:46px}
.step .n{font-family:var(--display);font-size:1.1rem;color:var(--brass);letter-spacing:.1em}
.step h3{font-size:1.2rem;color:var(--bone);font-weight:500;margin:12px 0 8px}
.step p{color:var(--bone-dim);font-size:.95rem;margin:0}
.book__cta{margin-top:48px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.book__note{margin-top:22px;color:var(--sage);font-size:.92rem}

/* ---------- visit ---------- */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.visit__map{
  min-height:360px;position:relative;overflow:hidden;border:1px solid var(--line);
  background:var(--forest-2);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:40px;transition:border-color .35s ease,background .35s ease;
}
.visit__map::before{ /* faint contour texture */
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%,transparent 78px,rgba(194,163,107,.10) 79px,transparent 81px),
    radial-gradient(circle at 50% 46%,transparent 128px,rgba(194,163,107,.08) 129px,transparent 131px),
    radial-gradient(circle at 50% 46%,transparent 188px,rgba(194,163,107,.06) 189px,transparent 191px),
    radial-gradient(circle at 50% 46%,transparent 258px,rgba(194,163,107,.05) 259px,transparent 261px);
}
.visit__map:hover{border-color:var(--brass);background:#22382b}
.map__pin{width:60px;height:60px;position:relative}
.map__pin svg{width:100%;height:100%;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.visit__map:hover .map__pin svg{transform:translateY(-4px)}
.map__place{font-family:var(--display);font-size:1.7rem;color:var(--bone);position:relative;margin-top:4px}
.map__hood{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);position:relative}
.map__open{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);position:relative;transition:color .25s}
.map__open svg{width:15px;height:15px}
.visit__map:hover .map__open{color:var(--brass-bright)}
.visit__info{display:flex;flex-direction:column;justify-content:center}
.visit__info h2{font-size:clamp(2rem,4vw,3rem);color:var(--bone)}
.addr{margin:22px 0 0;font-size:1.05rem;color:var(--bone);font-style:normal;line-height:1.7}
.addr a{color:var(--brass);border-bottom:1px solid transparent;transition:border-color .25s}
.addr a:hover{border-color:var(--brass)}
.hours{margin-top:30px;border-top:1px solid var(--line)}
.hours div{display:flex;justify-content:space-between;padding:11px 4px;border-bottom:1px solid var(--line-soft);font-size:.95rem;transition:background .3s ease}
.hours div:hover{background:rgba(194,163,107,.05)}
.hours .d{color:var(--bone-dim);letter-spacing:.06em}
.hours .t{color:var(--bone)}
.hours .closed .t{color:var(--sage)}

/* ---------- footer ---------- */
.site-foot{background:var(--forest-deep);padding:clamp(56px,8vw,96px) 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.foot-brand svg{width:58px;height:58px}
.foot-brand .wm{font-family:var(--display);font-weight:600;letter-spacing:.3em;font-size:1.5rem;color:var(--bone);margin-top:16px;text-indent:.3em}
.foot-brand p{color:var(--sage);margin:14px 0 0;max-width:34ch;font-size:.92rem}
.foot-col h4{font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin:0 0 16px}
.foot-col a,.foot-col p{display:block;color:var(--bone-dim);font-size:.95rem;margin:0 0 10px}
.foot-col a{transition:color .25s}
.foot-col a:hover{color:var(--brass-bright)}
.foot-bot{margin-top:clamp(40px,6vw,72px);padding-top:24px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--sage);font-size:.78rem;letter-spacing:.06em}
.foot-bot a:hover{color:var(--brass)}

/* ---------- mobile nav panel ---------- */
.m-panel{position:fixed;inset:0;z-index:60;background:var(--forest-deep);display:flex;flex-direction:column;
  padding:24px var(--pad);transform:translateY(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);visibility:hidden}
.m-panel.open{transform:none;visibility:visible}
.m-panel .m-top{display:flex;justify-content:space-between;align-items:center}
.m-panel .m-top button{background:none;border:0;color:var(--bone);cursor:pointer;width:40px;height:40px}
.m-panel .m-top svg{width:26px;height:26px}
.m-links{display:flex;flex-direction:column;gap:6px;margin-top:8vh}
.m-links a{font-family:var(--display);font-size:2.4rem;color:var(--bone);padding:10px 0;border-bottom:1px solid var(--line-soft)}
.m-links a:last-child{border:0}
.m-panel .btn{margin-top:auto;justify-content:center}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.is-in .reveal,.reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.no-js .reveal{opacity:1;transform:none}

/* hero load orchestration */
.hero .load{opacity:0;transform:translateY(18px)}
.js-ready .hero .load{animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.js-ready .hero .l1{animation-delay:.1s}.js-ready .hero .l2{animation-delay:.24s}.js-ready .hero .l3{animation-delay:.38s}.js-ready .hero .l4{animation-delay:.52s}.js-ready .hero .l5{animation-delay:.66s}
.no-js .hero .load{opacity:1;transform:none}
@keyframes rise{to{opacity:1;transform:none}}

/* hero sprig draws itself */
.hero__sprig path{stroke-dasharray:1100;stroke-dashoffset:1100}
.js-ready .hero__sprig path{animation:draw 2.6s ease forwards .7s}
@keyframes draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero .load{opacity:1;transform:none;animation:none}
  .hero__sprig path{stroke-dashoffset:0;animation:none}
  .tile img{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav .navlink,.nav>.btn{display:none}
  .nav-toggle{display:inline-flex}
  .hero{grid-template-columns:1fr}
  .hero__media{min-height:62vh;order:-1}
  .hero__media::after{background:linear-gradient(to top,var(--forest) 2%,transparent 40%)}
  .hero__text{padding-top:90px}
  .hero__sprig{display:none}
  .about{grid-template-columns:1fr}
  .about__media{max-width:420px;margin-inline:auto}
  .visit{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:24px 20px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:680px){
  body{font-size:16px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .tile figcaption{opacity:1;transform:none;font-size:.62rem;padding:30px 12px 12px}
  .sec-head{flex-direction:column;align-items:flex-start}
  .svc-row{display:block;padding:22px 6px}
  .svc-name{display:block;font-size:1.55rem}
  .svc-desc{display:block;margin-top:6px}
  .svc-time{display:inline-block;margin-top:12px}
  .svc-dep{display:inline-block;margin-left:16px;font-size:1.05rem}
  .svc-row::before{display:none}
  .hero__meta{gap:24px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bot{flex-direction:column}
}