/* ==========================================================================
   TIA — THE INTOXICATED ARTIST
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Archivo+Black&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --ink:        #121110;
  --paper:      #f2ece0;
  --paper-dim:  #e7dfcf;
  --paper-line: #d8cdb4;
  --accent:     #3f7d33;      /* demon-stone green */
  --accent-2:   #c9a227;      /* gold, crowns/gold frames */
  --red:        #a8321f;
  --muted:      #6b6357;
  font-size: 16px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4, .marker{
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

.stamp{
  font-family: 'Permanent Marker', cursive;
  text-transform: none;
  letter-spacing: 0;
}

a{ color: inherit; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; cursor: pointer; }

.wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.hairline{
  border: none;
  border-top: 2px solid var(--ink);
  margin: 0;
}

/* ---------- NAV ---------- */
.site-nav{
  position: sticky; top:0; z-index: 500;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 3px solid var(--accent-2);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color: var(--paper);
}
.brand img{ height: 40px; width:auto; }
.brand span{
  font-family:'Archivo Black', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  line-height:1.1;
}
.brand small{
  display:block; font-family:'EB Garamond', serif; text-transform:none;
  letter-spacing: 0.12em; font-size:0.62rem; color:#c9c2b2; font-weight:400;
  margin-top:2px;
}
.nav-links{
  display:flex; align-items:center; gap: 30px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; font-size: 0.82rem; letter-spacing:0.09em;
  text-transform: uppercase; font-family:'Archivo Black', sans-serif;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav-links a:hover{ border-color: var(--accent-2); }
.nav-links .ig{
  background: var(--accent-2); color: var(--ink); padding: 9px 16px;
  border-radius: 3px;
}
.nav-toggle{ display:none; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background: var(--ink);
  color: var(--paper);
  overflow:hidden;
  border-bottom: 3px solid var(--ink);
}
.hero-bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center 30%;
  opacity: 0.34;
  filter: grayscale(35%) contrast(1.05);
}
.hero-bg::after{ content:""; }
.hero-gradient{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,17,16,0.55) 0%, rgba(18,17,16,0.88) 68%, var(--ink) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding: 110px 0 80px;
  text-align:center;
}
.hero-mark{ width: 74px; margin: 0 auto 26px; opacity:0.95; }
.hero h1{
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 0.98;
  margin-bottom: 18px;
}
.hero h1 em{
  font-style: normal; color: var(--accent-2);
}
.hero p.lede{
  max-width: 640px; margin: 0 auto 34px;
  font-family:'EB Garamond', serif; font-style: italic;
  font-size: 1.35rem; color: #ddd6c6; line-height:1.5;
}

.btn{
  display:inline-block; text-decoration:none;
  font-family:'Archivo Black', sans-serif; text-transform:uppercase;
  font-size: 0.85rem; letter-spacing: 0.07em;
  padding: 15px 30px; border-radius: 3px; border: 2px solid transparent;
  transition: transform .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-solid{ background: var(--accent-2); color: var(--ink); }
.btn-outline{ background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-dark{ background: var(--ink); color: var(--paper); }
.btn-solid-red{ background: var(--red); color: var(--paper); }

/* ---------- GUARANTEE STRIP ---------- */
.guarantee{
  background: var(--paper-dim);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 56px 0;
  text-align:center;
}
.guarantee .tag{
  font-family:'Archivo Black', sans-serif; font-size:0.78rem;
  letter-spacing:0.18em; color: var(--accent); margin-bottom: 16px;
  display:block;
}
.guarantee .materials-note{
  max-width: 620px; margin: 0 auto 32px; color: var(--muted); font-size:1.05rem;
}
.guarantee blockquote{
  margin: 0 auto; max-width: 760px;
  font-family:'EB Garamond', serif; font-style: italic;
  font-size: 1.4rem; line-height:1.6; color:#2a2721;
}
.guarantee .sig{
  display:block; margin-top:22px;
  font-family:'Permanent Marker', cursive; font-size:1.5rem; color: var(--ink);
}

/* ---------- SECTION HEADERS ---------- */
.section-head{
  padding: 64px 0 30px;
  text-align:center;
}
.section-head .kicker{
  font-family:'Archivo Black', sans-serif; font-size:0.78rem;
  letter-spacing:0.2em; color: var(--accent); display:block; margin-bottom:10px;
}
.section-head h2{
  font-size: clamp(2rem, 4.5vw, 3.1rem);
}
.section-head p{
  max-width: 620px; margin: 16px auto 0; color: var(--muted); font-size:1.05rem;
}

/* ---------- FILTER BAR ---------- */
.filter-bar{
  position: sticky; top: 76px; z-index: 300;
  background: var(--paper); border-bottom: 2px solid var(--ink);
  padding: 28px 0 16px;
}
.filter-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
}
.filter-row .flabel{
  font-family:'Archivo Black', sans-serif; font-size:0.72rem; letter-spacing:0.1em;
  color: var(--muted); margin-right:6px;
}
.filter-note{
  text-align:center; color: var(--muted); font-size:0.85rem;
  max-width: 560px; margin: 14px auto 0;
}
.chip{
  font-family:'Archivo Black', sans-serif; font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; background: transparent; border: 2px solid var(--ink);
  color: var(--ink); padding: 8px 14px; border-radius: 20px;
}
.chip.active{ background: var(--ink); color: var(--paper); }
.chip:hover{ background: var(--ink); color: var(--paper); }

/* ---------- THE TESTIMONIALS (per-volume artist statement, standalone section) ---------- */
.testimonials{
  background: var(--paper-dim);
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  padding: 84px 0 90px;
  scroll-margin-top: 90px; /* clears the sticky nav */
}
.tt-nav{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin: 8px 0 36px;
}
.tt-arrow{
  width:40px; height:40px; border-radius:50%;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font-size:1.1rem; line-height:1; flex:0 0 auto;
}
.tt-arrow:hover{ background: var(--ink); color: var(--paper); }
.tt-tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tt-tab{
  font-family:'Archivo Black', sans-serif; font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; background: transparent; border: 2px solid var(--ink);
  color: var(--ink); padding: 8px 14px; border-radius: 20px;
}
.tt-tab.active{ background: var(--ink); color: var(--paper); }
.tt-tab:hover{ background: var(--ink); color: var(--paper); }

.tt-card{
  position:relative; overflow:hidden;
  border: 2px solid var(--ink); border-radius: 4px;
  padding: 50px 52px 44px;
  max-width: 900px; margin: 0 auto;
  animation: tt-fade-in .35s ease;
}
.tt-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: var(--vol-tint, var(--paper)); opacity:0.55;
}
.tt-card > *{ position:relative; z-index:1; }
.tt-head{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px; }
.tt-vol-badge{
  font-family:'Archivo Black', sans-serif; font-size:0.7rem; letter-spacing:0.08em;
  background: var(--ink); color: var(--paper); padding:5px 10px; border-radius:2px;
}
.tt-kicker{
  font-family:'Archivo Black', sans-serif; font-size:0.78rem;
  letter-spacing:0.2em; color: var(--accent);
}
.tt-tagline{
  font-family:'EB Garamond', serif; font-style: italic; font-weight:500;
  text-align:center; max-width: 680px; margin: 0 auto 22px;
  font-size:1.18rem; color:#2a2721; line-height:1.5;
}
.tt-body p{
  max-width: 720px; margin: 0 auto 16px; text-align:center;
  color:#2a2721; font-size:1.05rem;
}
.tt-punch{
  font-family:'Archivo Black', sans-serif; text-transform:uppercase;
  text-align:center; max-width: 700px; margin: 26px auto 4px;
  font-size:0.95rem; letter-spacing:0.02em; line-height:1.5;
}
.tt-welcome{
  text-align:center; font-style:italic; color: var(--muted);
  margin-top: 6px; font-family:'EB Garamond', serif;
}
.tt-sig{
  text-align:center; margin-top:16px;
  font-family:'Permanent Marker', cursive; font-size:1.6rem; color: var(--ink);
}
.tt-tint-I{   --vol-tint: #d3cdc0; }
.tt-tint-II{  --vol-tint: #ecd7a0; }
.tt-tint-III{ --vol-tint: #d6d2ef; }
.tt-tint-IV{  --vol-tint: #f0c2b8; }
.tt-tint-V{   --vol-tint: #bfe6d2; }

@keyframes tt-fade-in{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- GALLERY GRID ---------- */
.gallery{ padding: 40px 0 90px; }
.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 34px;
}
.card{
  background:#fff; border: 2px solid var(--ink);
  display:flex; flex-direction:column;
  cursor:pointer; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-5px); box-shadow: 8px 8px 0 var(--ink); }
.card .thumb{
  /* Matches the source image canvas (1100x836) exactly, so object-fit: cover
     never has to crop any part of the artwork to fill the frame. */
  aspect-ratio: 1100/836; overflow:hidden; background:#e9e2d2;
  border-bottom: 2px solid var(--ink); position:relative;
}
.card .thumb img{ width:100%; height:100%; object-fit: contain; }
.card .vol-tag{
  position:absolute; top:10px; left:10px;
  background: var(--ink); color: var(--paper);
  font-family:'Archivo Black', sans-serif; font-size:0.65rem;
  letter-spacing:0.08em; padding:5px 9px; border-radius:2px;
}
.card .sold-tag{
  position:absolute; top:10px; right:10px;
  background: var(--red); color:#fff;
  font-family:'Archivo Black', sans-serif; font-size:0.65rem;
  letter-spacing:0.08em; padding:5px 9px; border-radius:2px;
}
.card .rot-note{
  background: var(--ink); color: var(--paper);
  font-family:'Archivo Black', sans-serif; font-size:0.62rem;
  letter-spacing:0.06em; padding:7px 8px; border-bottom: 2px solid var(--ink);
  text-align:center;
}
.card .info{ padding: 18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.card h3{
  font-family:'Archivo Black', sans-serif; font-size:1.05rem;
  margin-bottom: 6px; line-height:1.2;
}
.card .meta{ font-size:0.86rem; color: var(--muted); margin-bottom:14px; }
.card .price-row{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; border-top: 1px dashed var(--paper-line);
}
.card .price{ font-family:'Archivo Black', sans-serif; font-size:0.92rem; }
.card .price.inquire{ color: var(--accent); }
.card .view-link{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em;
  font-family:'Archivo Black', sans-serif; color: var(--ink);
}
.no-results{
  text-align:center; padding: 60px 20px; color: var(--muted); font-style:italic;
  display:none;
}

/* ---------- ABOUT ---------- */
.about{
  background: var(--ink); color: var(--paper); padding: 90px 0;
  border-top: 3px solid var(--accent-2); border-bottom: 3px solid var(--accent-2);
}
.about .wrap{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
}
.about .kicker{
  font-family:'Archivo Black', sans-serif; font-size:0.78rem;
  letter-spacing:0.2em; color: var(--accent-2); display:block; margin-bottom:16px;
}
.about h2{ font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 22px; }
.about p{ color:#d8d1c1; margin-bottom:16px; font-size:1.08rem; }
.about .mark-big{ width:100%; max-width:340px; margin:0 auto; opacity:0.92; }
.stat-row{ display:flex; gap:34px; margin-top:30px; flex-wrap:wrap; }
.stat{ }
.stat .n{ font-family:'Archivo Black', sans-serif; font-size:2.1rem; color: var(--accent-2); }
.stat .l{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:#a9a190; }

/* ---------- CONTACT ---------- */
.contact{
  background: var(--paper-dim); padding: 90px 0; border-top: 3px solid var(--ink);
}
.contact .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact h2{ font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom:16px; }
.contact p{ color: var(--muted); margin-bottom: 24px; }

.form-field{ margin-bottom: 18px; }
.form-field label{
  display:block; font-family:'Archivo Black', sans-serif; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px;
}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 12px 14px; border: 2px solid var(--ink);
  background:#fff; font-family:'EB Garamond', serif; font-size:1rem; border-radius:2px;
}
.form-field textarea{ resize: vertical; min-height:100px; }
.form-note{ font-size:0.8rem; color: var(--muted); margin-top:10px; }

/* ---------- FOOTER ---------- */
footer{
  background: var(--ink); color:#a9a190; padding: 36px 0;
  text-align:center; font-size:0.85rem;
}
footer .wrap{ display:flex; flex-direction:column; gap:10px; align-items:center; }
footer .fmark{ width:34px; opacity:0.8; margin-bottom:6px; }
footer a{ color: var(--paper); text-decoration:none; border-bottom: 1px solid var(--accent-2); }
footer .legal-links{ font-size:0.78rem; opacity:0.85; }
footer .legal-links a{ border-bottom: 1px solid #6b6357; }
footer .legal-links a:hover{ border-color: var(--accent-2); }

/* ---------- MODAL ---------- */
.modal-overlay{
  position: fixed; inset:0; background: rgba(18,17,16,0.86);
  z-index: 1000; display:none; align-items:center; justify-content:center;
  padding: 24px; overflow-y:auto;
}
.modal-overlay.open{ display:flex; }
.modal{
  background: #fff; max-width: 980px; width:100%; margin: auto;
  border: 3px solid var(--ink);
  display:grid; grid-template-columns: 1.1fr 1fr;
  max-height: 92vh;
}
.modal-img{ background:#e9e2d2; overflow:hidden; max-height:92vh; position:relative; }
.modal-img img{ width:100%; height:100%; object-fit: contain; transition: transform .35s ease; }
.modal-img.square{ aspect-ratio: 1/1; max-height:none; height:auto; }
.rotate-controls{
  display:none; flex-direction:column; align-items:center; gap:8px;
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px 12px; background: linear-gradient(to top, rgba(18,17,16,0.72), rgba(18,17,16,0));
}
.rotate-label{
  color: var(--paper); font-family:'Archivo Black', sans-serif;
  font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase;
}
.rot-btn-row{ display:flex; gap:8px; }
.rot-btn{
  font-family:'Archivo Black', sans-serif; font-size:0.7rem;
  background: rgba(255,255,255,0.9); border: 2px solid var(--ink);
  color: var(--ink); padding: 5px 11px; border-radius: 20px;
}
.rot-btn.active{ background: var(--accent-2); border-color: var(--accent-2); }
.rot-btn:hover{ background: var(--accent-2); border-color: var(--accent-2); }
.modal-body{ padding: 34px; overflow-y:auto; }
.modal-close{
  position: sticky; top:0; float:right;
  background: var(--ink); color:#fff; border:none;
  width:34px; height:34px; font-size:1.3rem; line-height:1;
  border-radius: 50%;
}
.modal-vol{
  font-family:'Archivo Black', sans-serif; font-size:0.7rem; letter-spacing:0.12em;
  color: var(--accent); margin-bottom: 10px; display:block;
}
.modal-body h3{ font-size:1.7rem; margin-bottom: 4px; }
.modal-collection{ font-style: italic; font-family:'EB Garamond', serif; color:var(--muted); margin-bottom:20px; display:block;}
.modal-specs{ list-style:none; padding:0; margin: 0 0 20px; border-top:1px dashed var(--paper-line); }
.modal-specs li{
  display:flex; justify-content:space-between; gap: 16px;
  padding: 10px 0; border-bottom:1px dashed var(--paper-line); font-size:0.94rem;
}
.modal-specs li span:first-child{ color: var(--muted); font-family:'Archivo Black', sans-serif; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; }
.modal-specs li span:last-child{ text-align:right; max-width:60%; }
.modal-note{
  font-style:italic; color: var(--accent); font-family:'EB Garamond', serif;
  margin-bottom: 20px; font-size:1rem;
}
.modal-price{ font-family:'Archivo Black', sans-serif; font-size:1.4rem; margin-bottom:18px; }
.modal-price.inquire{ color: var(--accent); font-size:1.05rem; }
.modal-sold{
  display:inline-block; background: var(--red); color:#fff; font-family:'Archivo Black', sans-serif;
  font-size:0.75rem; letter-spacing:0.08em; padding:8px 14px; border-radius:2px; margin-bottom:16px;
}

/* ---------- LEGAL (PRIVACY / TERMS) ---------- */
.legal-overlay{
  position: fixed; inset:0; background: rgba(18,17,16,0.86);
  z-index: 1000; display:none; align-items:center; justify-content:center;
  padding: 24px; overflow-y:auto;
}
.legal-overlay.open{ display:flex; }
.legal-modal{
  position:relative;
  background: #fff; max-width: 760px; width:100%; margin: auto;
  border: 3px solid var(--ink);
  max-height: 88vh; overflow-y:auto;
  padding: 44px 40px 40px;
}
.legal-close{
  position: sticky; top:0; float:right;
  background: var(--ink); color:#fff; border:none;
  width:34px; height:34px; font-size:1.3rem; line-height:1;
  border-radius: 50%; margin-bottom: 10px;
}
.legal-tabs{
  display:flex; flex-wrap:wrap; gap:10px; margin: 0 0 26px; clear:both;
}
.legal-tab{
  font-family:'Archivo Black', sans-serif; font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; background: transparent; border: 2px solid var(--ink);
  color: var(--ink); padding: 9px 16px; border-radius: 20px;
}
.legal-tab.active{ background: var(--ink); color: var(--paper); }
.legal-tab:hover{ background: var(--ink); color: var(--paper); }
.legal-body h3{ font-size:1.5rem; margin-bottom:6px; }
.legal-body .legal-updated{
  display:block; font-style: italic; font-family:'EB Garamond', serif;
  color: var(--muted); font-size:0.92rem; margin-bottom: 22px;
}
.legal-body p{ margin: 0 0 16px; font-size:1rem; color:#2a2721; }
.legal-body p:last-child{ margin-bottom:0; }
.legal-body a{ border-bottom: 1px solid var(--accent-2); text-decoration:none; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .about .wrap, .contact .wrap, .modal{ grid-template-columns: 1fr; }
  .modal-img{ max-height: 340px; }
  .modal{ max-height: 94vh; overflow-y:auto; }
  .filter-bar{ top:76px; }
  .tt-card{ padding: 34px 22px 30px; }
  .legal-modal{ padding: 34px 22px 30px; }
}