/* ===========================================================
   Liz — Tattoo Artist
   Fine line + neo-traditional: bold but elegant.
   Hand-written, no framework. Edit freely.
   Palette: warm bone, near-black ink, one oxblood accent.
   =========================================================== */

:root{
  --bone:    #f4f0e9;   /* background */
  --bone-2:  #ebe5da;   /* panels / placeholder tiles */
  --ink:     #1a1714;   /* text */
  --ink-soft:#5b544c;   /* secondary text */
  --oxblood: #7c2f2f;   /* the one accent — neo-trad red */
  --oxblood-d:#5e2222;
  --line:    #d8d0c4;   /* hairlines */
  --maxw:    1080px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.01em;
}

a{ color:var(--oxblood); text-decoration:none; }
a:hover{ color:var(--oxblood-d); text-decoration:underline; }

/* ---------- HERO ---------- */
.hero{
  min-height:88vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% 0%, #fbf8f2 0%, var(--bone) 60%);
  border-bottom:1px solid var(--line);
}

.topnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem clamp(1.2rem, 5vw, 3rem);
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
}
.topnav .mark{
  font-family:'Fraunces', serif;
  font-size:1.5rem;
  font-weight:600;
}
.topnav .links{ display:flex; gap:1.6rem; }
.topnav .links a{
  color:var(--ink-soft);
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.topnav .links a:hover{ color:var(--oxblood); text-decoration:none; }

.hero-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem 1.2rem 4rem;
}
.hero-inner h1{
  font-size:clamp(4.5rem, 18vw, 11rem);
  font-weight:400;
  margin:0;
}
.wordmark-sub{
  margin:.2rem 0 0;
  font-size:clamp(.9rem,2.5vw,1.1rem);
  letter-spacing:.5em;
  text-transform:uppercase;
  padding-left:.5em; /* optical balance for the tracking */
  color:var(--ink);
}
.tagline{
  margin:1.4rem 0 0;
  color:var(--ink-soft);
  font-size:clamp(.95rem,2.5vw,1.1rem);
}
.cta{
  margin-top:2.4rem;
  display:inline-block;
  border:1.5px solid var(--ink);
  color:var(--ink);
  padding:.85rem 1.8rem;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:all .18s ease;
}
.cta:hover{
  background:var(--ink);
  color:var(--bone);
  text-decoration:none;
}

/* ---------- SECTIONS ---------- */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(3.5rem,9vw,6.5rem) clamp(1.2rem,5vw,3rem);
}
.section h2{
  font-size:clamp(1.8rem,5vw,2.7rem);
  margin:0 0 .6rem;
}
.section-lead{
  color:var(--ink-soft);
  margin:0 0 2.2rem;
  max-width:46ch;
}
.section-lead.center{ margin:2.4rem auto 0; text-align:center; max-width:none; }

/* ---------- WORK GRID ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(.6rem,1.5vw,1rem);
}
.tile{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bone-2);
  border-radius:2px;
}
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--line);
}
.tile.placeholder span{
  color:var(--ink-soft);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.textlink{
  letter-spacing:.08em;
  font-size:.92rem;
}

/* ---------- ABOUT / WINTER ---------- */
.about p, .winter p, .book p{ max-width:60ch; }
.about p + p{ margin-top:1.1rem; }
.about-cta{ margin-top:1.6rem; font-size:1.05rem; }

.winter{
  background:var(--ink);
  color:var(--bone);
  max-width:none;
  padding-left:0; padding-right:0;
}
.winter h2{ color:var(--bone); }
.winter > *{
  max-width:var(--maxw);
  margin-left:auto; margin-right:auto;
  padding-left:clamp(1.2rem,5vw,3rem);
  padding-right:clamp(1.2rem,5vw,3rem);
}
.winter p{ color:#e7e0d4; }

/* ---------- BOOK ---------- */
.book-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin:1.8rem 0 1.4rem;
}
.btn{
  display:inline-block;
  background:var(--oxblood);
  color:#fff;
  padding:.85rem 1.6rem;
  border:1.5px solid var(--oxblood);
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:all .18s ease;
}
.btn:hover{ background:var(--oxblood-d); border-color:var(--oxblood-d); color:#fff; text-decoration:none; }
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn.ghost:hover{ background:var(--ink); color:var(--bone); }
.fineprint{ color:var(--ink-soft); font-size:.9rem; }

/* ---------- AFTERCARE ---------- */
.care{ max-width:62ch; padding-left:1.2rem; }
.care li{ margin:.55rem 0; }

/* ---------- FAQ ---------- */
.faq dl{ max-width:62ch; }
.faq dt{ font-weight:600; margin-top:1.4rem; }
.faq dd{ margin:.3rem 0 0; color:var(--ink-soft); }

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--line);
  text-align:center;
  padding:3rem 1.2rem;
  color:var(--ink-soft);
}
.foot-name{ font-family:'Fraunces',serif; font-size:1.25rem; color:var(--ink); margin:0; }
.foot-where{ margin:.2rem 0 1rem; }
.foot-social a{ margin:0 .7rem; letter-spacing:.1em; font-size:.85rem; text-transform:uppercase; }
.foot-fine{ margin-top:1.4rem; font-size:.78rem; }

/* ---------- AVAILABLE FLASH ---------- */
.flash-card{ margin:0; }
.flash-card .tile{ aspect-ratio:3/4; background:#efe9df; }
.flash-card .tile img{ object-fit:contain; padding:8px; } /* show the whole design, never crop line art */
.flash-card figcaption{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:.55rem;
  font-size:.8rem;
}
.status{
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.7rem;
  padding:.18rem .6rem;
  border-radius:999px;
}
.status.avail{ background:var(--oxblood); color:#fff; }
.status.claimed{ background:var(--bone-2); color:var(--ink-soft); text-decoration:line-through; }
.flash-price{ color:var(--ink-soft); font-weight:500; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:680px){
  body{ font-size:17px; }
  .topnav .links{ display:none; }          /* keep the phone hero clean */
  .grid{ grid-template-columns:repeat(2, 1fr); }
}