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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --background: #f7f4ef;
  --foreground: #151515;
  --primary: #7a5c45;
  --primary-dark: #5e4330;

  --muted: #ebe4da;
  --muted-fg: #6b6b6b;

  --border: #ddd4ca;
  --card: rgba(255,255,255,0.72);

  --shadow: 0 10px 30px rgba(0,0,0,0.06);
  --radius: 24px;
}

body {
  background:
    radial-gradient(
      circle at top left,
      rgba(122,92,69,.08),
      transparent 35%
    ),
    #f7f4ef;

  color: var(--foreground);
  font-family: var(--font-body);
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 1rem 3rem;

  backdrop-filter: blur(14px);
  background: rgba(247,244,239,0.82);

  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}

.logo-mark {
  width: 42px;
  height: 42px;

  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);

  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-mark span {
  width: 14px;
  height: 14px;
  background: var(--primary);
}

.logo-text {
  display: block;

  font-size: 11px;
  letter-spacing: .25em;
  font-family: var(--font-mono);

  color: var(--foreground);
}

nav{
    display:flex;
    gap:2rem;
    align-items:center;
}

nav a{
    position:relative;
    text-decoration:none;
    color:var(--muted-fg);
    font-size:11px;
    letter-spacing:.16em;
    font-family:var(--font-mono);
    transition:.3s;
}

nav a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:1px;
    background:var(--foreground);
    transition:.3s;
}

nav a:hover::after{
    width:100%;
}

/* HERO */

.hero{
	
	display:flex;
    justify-content:space-between;
    align-items:center;
    gap:4rem;	
    width:100%;
    min-height:700px;
    overflow:hidden;
    position:relative;
    padding:80px 8%;
}

.hero-content{
    width:55%;
    z-index:2;
}

.hero-badge{
    display:inline-block;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(122,92,69,.08);

    color:var(--primary);

    font-size:11px;
    letter-spacing:.18em;

    font-family:var(--font-mono);

    margin-bottom:25px;
}

.hero-text{
    width:100%;
}

.hero-text h1{
    font-size:clamp(42px,5vw,80px);
    line-height:1;
    font-weight:900;
    max-width:650px;
}

.hero-text span{
    display:block;
    color:var(--primary);
}

.hero-text h1,
.hero-text h1 span{
    font-family: 'Inter', sans-serif !important;
}

.hero-description{
    max-width:520px;

    font-size:18px;
    line-height:1.7;

    margin-top:25px;

    color:#555;
}

.hero-actions{
    display:flex;
    gap:1rem;
    margin-top:30px;
    flex-wrap:wrap;
}

.hero-image{
    width:45%;
    position:relative;
}

.hero-image img{
    width:100%;
    height:650px;

    object-fit:cover;

    border-radius:24px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);
}

/* MOBILE */

@media(max-width:900px){

    .hero{
        flex-direction:column;
        min-height:auto;
        padding:50px 20px;
    }

    .hero-content{
        width:100%;
    }

    .hero-image{
        width:100%;
        margin-top:30px;
    }

    .hero-image img{
        height:400px;
    }

    .hero-text h1{
        font-size:60px;
        max-width:100%;
    }

}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 1rem 1.6rem;

  border-radius: 14px;

  text-decoration: none;

  font-size: .95rem;
  font-weight: 600;

  transition: all .3s ease;
}

.btn-primary {
  background: var(--foreground);
  color: white;
}

.btn-secondary {
  border: 1px solid var(--border);
  color: var(--foreground);
}

.archive {
  max-width: 1200px;
  margin: 0 auto;

  padding: 2rem 3rem 5rem;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 2rem;
}

.section-label {
  font-size: 11px;
  font-family: var(--font-mono);

  letter-spacing: .2em;

  color: var(--primary);

  margin-bottom: .75rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.card {
  display: block;

  text-decoration: none;

  border-radius: var(--radius);
  overflow: hidden;

  background: var(--card);

  box-shadow:
    0 15px 40px rgba(0,0,0,.06);

  transition: transform .4s ease;
}

.card:hover {
  transform:translateY(-10px);
  box-shadow:
    0 25px 60px rgba(0,0,0,.10);
}

.card-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.card-img img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .7s ease;
}

.card:hover img {
  transform: scale(1.08);
}

.card-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);

  display: flex;
  align-items: flex-end;

  padding: 1.5rem;

  opacity: 0;

  transition: opacity .3s ease;
}

.card:hover .card-overlay {
  opacity: 1;
}

.card-overlay span {
  color: white;
  font-weight: 600;
}

.card-meta {
  padding: 1.4rem;

  display: flex;
  justify-content: space-between;
}

.card-name {
  font-size: 1rem;
  font-weight: 600;
}

.card-origin {
  margin-top: .45rem;

  font-size: .85rem;
  color: var(--muted-fg);
}

.card-price {
  font-weight: 700;
  color: var(--primary-dark);
}

.card-cat {
  margin-top: .5rem;

  font-size: 10px;
  letter-spacing: .18em;

  font-family: var(--font-mono);

  color: var(--muted-fg);
}

.listing-page {
  max-width: 1200px;
  margin: 0 auto;

  padding: 5rem 3rem;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.listing-image img {
  border-radius: 24px;
}

.listing-badge {
  display: inline-block;

  margin-bottom: 1rem;

  font-size: 11px;
  letter-spacing: .15em;

  color: var(--primary);

  font-family: var(--font-mono);
}

.listing-info h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.listing-price {
  font-size: 2rem;
  font-weight: 700;

  margin-bottom: 2rem;
}

.listing-meta p {
  margin-bottom: .75rem;
}

.listing-description {
  margin-top: 2rem;

  line-height: 1.8;
  color: var(--muted-fg);
}

footer {
  margin-top: 5rem;

  display: flex;
  justify-content: space-between;

  padding: 1.5rem 3rem;

  background: #151515;
}

footer span {
  font-size: 11px;
  letter-spacing: .14em;

  color: rgba(255,255,255,0.55);

  font-family: var(--font-mono);
}

@media (max-width: 900px) {

  .site-header {
    flex-direction: column;
    gap: 1rem;
  }

  .listing-page {
    grid-template-columns: 1fr;
  }

  .hero,
  .archive,
  .listing-page {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
	
  footer{
    flex-direction:column;
    gap:.75rem;
    text-align:center;
}

}

/* PROFILE DROPDOWN */

.dropdown{
    position:relative;
}

.dropdown-toggle{
    text-decoration:none;
    cursor:pointer;
    color:var(--foreground);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.16em;
}

.dropdown-menu{

    position:absolute;

    top:100%;
    right:0;

    min-width:220px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);

    padding:.5rem 0;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:.25s ease;

    z-index:9999;
}

.dropdown:hover .dropdown-menu{

    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

.dropdown-menu a{

    display:block;

    padding:.85rem 1.2rem;

    text-decoration:none;

    color:var(--foreground);

    font-family:var(--font-body);

    font-size:.9rem;

    letter-spacing:normal;
}

.dropdown-menu a:hover{

    background:var(--muted);
}

.profile-page{
    max-width:900px;
    margin:60px auto;
    padding:0 20px;
}

.profile-page h1{
    margin-bottom:30px;
}

.profile-card
{
    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:2rem;

    margin-bottom:1.5rem;

    text-align:center;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);

    transition:.2s;
}

.profile-card:hover
{
    transform:translateY(-2px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);
}

.profile-form{

    background:#fff;

    padding:40px;

    border-radius:24px;

    box-shadow:
      0 10px 30px rgba(0,0,0,.06);
}

.profile-form label{
    display:block;
    margin-bottom:6px;
    font-weight:600;
}

.profile-form input{
    width:100%;

    padding:12px;

    margin-bottom:20px;

    border:1px solid var(--border);

    border-radius:10px;
}

.error-message{

    background:#ffe5e5;

    color:#b00020;

    border:1px solid #ffcccc;

    border-radius:12px;

    padding:15px;

    margin-bottom:20px;
}

.success-message{

    background:#e8f7ea;

    color:#1b5e20;

    border:1px solid #c8e6c9;

    border-radius:12px;

    padding:15px;

    margin-bottom:20px;
}

.profile-form input,
.profile-form textarea,
.profile-form select
{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    font-family:var(--font-body);
}

.profile-form select:focus{

    outline:none;

    border-color:#000;
}

.profile-form textarea{

    width:100%;

    padding:12px;

    border:1px solid var(--border);

    border-radius:10px;

    margin-bottom:20px;

    resize:vertical;

    font-family:var(--font-body);
}

.success-message{
    background:#e8f7ea;
    border:1px solid #7cc48a;
    color:#1f6b2d;
    padding:1rem;
    border-radius:12px;
    margin-bottom:1.5rem;
    font-weight:600;
}

.offer-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:1.5rem;

    margin-bottom:1.5rem;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
	margin-bottom:2rem;
}

.offer-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:1rem;

    margin-bottom:1rem;
}

.offer-header h3{

    margin:0;

    font-size:1.25rem;
}

.offer-date{

    margin-top:.5rem;

    color:var(--muted-fg);

    font-size:.9rem;
}

.offer-price{

    font-size:1.3rem;

    font-weight:700;

    color:var(--primary);
}

.offer-status{

    display:inline-block;

    padding:.45rem .9rem;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;
}

.offer-divider{
    border:0;
    border-top:1px solid #e5e7eb;
    margin:2rem 0;
}

.status-submitted{

    background:#fff3cd;

    color:#856404;
}

.status-accepted{

    background:#d4edda;

    color:#155724;
}

.status-rejected{

    background:#f8d7da;

    color:#721c24;
}

.offer-email{

    margin-top:.25rem;

    font-size:.9rem;

    color:var(--primary);

    word-break:break-word;
}

.token-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:1.5rem;

    margin-bottom:1.5rem;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
}

.token-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:1rem;
}

.token-header h3{

    margin:0;

    font-size:1.15rem;
}

.token-date{

    margin-top:.5rem;

    color:var(--muted-fg);

    font-size:.9rem;
}

.token-plus{

    color:#198754;

    font-size:1.5rem;

    font-weight:700;
}

.token-minus{

    color:#dc3545;

    font-size:1.5rem;

    font-weight:700;
}

.token-notes{

    margin-top:1rem;

    color:var(--muted-fg);
}

.status-sold{
    background:#e0e7ff;
    color:#3730a3;
}

.category-filter{
	
	display:flex;
    flex-wrap:wrap;
    gap:10px;

    width:100%;
    box-sizing:border-box;
   
}

.category-filter a{

    padding:10px 16px;

    border:1px solid var(--border);

    border-radius:999px;

    text-decoration:none;

    color:var(--foreground);

    background:#fff;
}

.category-filter a.active{

    background:#000;

    color:#fff;
}

.price-filter{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;
}

.price-filter input{

    min-width:140px;

    padding:10px 12px;

    border:1px solid var(--border);

    border-radius:10px;
}

.offer-status { ... }
.status-submitted { ... }
.status-accepted { ... }
.status-rejected { ... }