:root{
  --bg:#0b0c10;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --hair: rgba(255,255,255,.14);
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --max: 1060px;
  --pad: 22px;
  --r: 18px;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
      background:
        radial-gradient(1200px 700px at 15% 10%, rgba(255,255,255,.10), transparent 55%),
        radial-gradient(900px 600px at 85% 20%, rgba(255,255,255,.07), transparent 60%),
        radial-gradient(1200px 800px at 50% 95%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(180deg, #07080b 0%, #0b0c10 45%, #07080b 100%);
      overflow-x:hidden;
    }
    a{color:inherit}
    a:hover{opacity:.92}
    a:focus-visible{
      outline:2px solid rgba(255,255,255,.35);
      outline-offset:3px;
      border-radius:10px;
    }
    /* Sticky glass header */
    .nav{
      position: sticky;
      top:0;
      z-index: 20;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 16px;
      padding:14px var(--pad);
      border-bottom:1px solid var(--hair);
      background: rgba(7,8,11,.55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .brand{
      text-decoration:none;
      font-weight:650;
      letter-spacing:.6px;
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:0;
    }
    .brand::before{
      content:"";
      width:10px;height:10px;
      border-radius:999px;
      background: rgba(255,255,255,.85);
      box-shadow: 0 0 0 4px rgba(255,255,255,.12);
    }
    .nav nav{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .nav nav a{
      margin-left:0;
      text-decoration:none;
      color: var(--muted);
      padding:8px 12px;
      border-radius:999px;
      transition: background 140ms ease, color 140ms ease, transform 140ms ease;
    }
    .nav nav a:hover{
      background: rgba(255,255,255,.06);
      color: var(--text);
    }
    .container{
      max-width: var(--max);
      margin: 0 auto;
      padding: 44px var(--pad) 70px;
    }
    /* Hero card */
    .hero{
      position:relative;
      border:1px solid var(--hair);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      border-radius: var(--r);
      padding: 64px 54px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .hero::before{
      /* “logo background” placeholder glow */
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(700px 380px at 25% 30%, rgba(255,255,255,.12), transparent 60%),
        radial-gradient(520px 340px at 80% 40%, rgba(255,255,255,.10), transparent 58%);
      opacity:.75;
    }
    .hero > *{ position:relative; z-index:1; }
    .hero h1{
      margin:0 0 16px;
      font-size: clamp(36px, 5vw, 56px);
      line-height:1.03;
      letter-spacing:-.02em;
    }
    .tagline{
      margin:0 0 28px;
      font-size:18px;
      line-height:1.55;
      color: var(--muted);
      max-width:56ch;
    }

    /* --- Home: chic/clean hero --- */
    .hero--clean{
      padding: 68px 58px;
      background: rgba(255,255,255,.045);
      box-shadow: 0 16px 50px rgba(0,0,0,.38);
    }

    /* Tone down the heavy glow on the hero */
    .hero--clean::before{
      opacity: .35;
      filter: blur(2px);
    }

    .kicker{
      margin: 0 0 14px;
      display: inline-block;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid var(--hair);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.72);
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .hero h1{
      /* keep your clamp, just make it feel more editorial */
      letter-spacing: -.015em;
    }

    .hero-actions{
      display: flex;
      gap: 10px;
      margin-top: 18px;
      flex-wrap: wrap;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border-radius: 999px;
      text-decoration: none;
      border: 1px solid transparent;
      font-weight: 600;
    }

    .btn-primary-soft{
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.18);
    }

    .btn-primary-soft:hover{
      background: rgba(255,255,255,.16);
    }

    .btn-ghost{
      background: transparent;
      border-color: rgba(255,255,255,.18);
      color: rgba(255,255,255,.82);
    }

    .btn-ghost:hover{
      background: rgba(255,255,255,.06);
    }

    /* --- Simple 3-tile row under hero --- */
    .home-tiles{
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .tile{
      border: 1px solid var(--hair);
      background: rgba(255,255,255,.035);
      border-radius: 14px;
      padding: 16px 16px 14px;
    }

    .tile h2{
      margin: 0 0 8px;
      font-size: 14px;
      letter-spacing: .02em;
    }

    .tile p{
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
      font-size: 14px;
    }

    @media (max-width: 820px){
      .home-tiles{ grid-template-columns: 1fr; }
    }

    /* Page content cards */
    .contact-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap:16px;
      margin-top:16px;
    }
    .contact-card, .about-card{
      border:1px solid var(--hair);
      background: rgba(255,255,255,.05);
      border-radius: 14px;
      padding: 18px;
    }
    .contact-card h2, .about-card h2{
      margin:0 0 10px;
      font-size:18px;
    }
    .contact-card p, .about-card p{
      margin:0;
      color: var(--muted);
      line-height:1.55;
    }
    .contact-card p + p,
    .about-card + .about-card{
      margin-top:12px;
    }
    .footer{
      padding: 26px var(--pad);
      border-top: 1px solid var(--hair);
      color: rgba(255,255,255,.55);
      text-align:center;
      font-size: 13px;
    }
    @media (max-width:520px){
      .hero{ padding: 44px 18px; }
      .nav{ padding: 12px 14px; }
    }
    /* Keep list/grid images uniform */
    .card-img-top{
      width: 100%;
      height: 260px;
      object-fit: cover;   /* crop nicely */
      display:block;
    }

    /* Shared detail-page image gallery styles (Artwork + Sold Piece) - FROM THE artwork_detail.html */
    .back-button{
      display:inline-block;
      margin-bottom:20px;
      padding:10px 15px;
      font-size:18px;
      font-weight:bold;
      border-radius:8px;
      background-color:#007bff;
      color:white;
      text-decoration:none;
      transition:0.3s ease-in-out;
    }
    .back-button:hover{
      background-color:#0056b3;
      text-decoration:none;
    }

    .main-img{
      width:100%;
      max-height:500px;
      object-fit:contain;
      border:2px solid #ccc;
      border-radius:10px;
      cursor:pointer;
      transition:0.3s ease-in-out;
    }
    .main-img:hover{ transform:scale(1.02); }

    .thumbnails{
      display:flex;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .thumbnail-img{
      width:80px;
      height:80px;
      object-fit:cover;
      cursor:pointer;
      border:2px solid #ddd;
      border-radius:5px;
      transition:border 0.2s ease-in-out;
    }
    .thumbnail-img:hover{ border:2px solid #333; }

    /* Fullscreen overlay */
    .fullscreen-overlay{
      display:none;              /* <-- this is what removes the random X */
      position:fixed;
      top:0; left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.9);
      justify-content:center;
      align-items:center;
      z-index:1000;
    }
    .fullscreen-img{
      max-width:90%;
      max-height:90%;
      border-radius:8px;
      box-shadow:0 0 10px white;
    }
    .close-btn{
      position:absolute;
      top:20px;
      left:20px;
      font-size:24px;
      background:#ff4d4d;
      color:white;
      border:none;
      padding:10px 15px;
      cursor:pointer;
      border-radius:50%;
      transition:0.3s;
    }
    .close-btn:hover{ background:#ff1a1a; }


    /* ---- Fix: Bootstrap cards inherit white text from body, but default to white bg ---- */
    .card {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.92);
    }

    .card .text-muted {
      color: rgba(255,255,255,.68) !important;
    }

    /* Buttons inside dark cards */
    .card .btn-outline-dark {
      color: rgba(255,255,255,.92);
      border-color: rgba(255,255,255,.35);
    }
    .card .btn-outline-dark:hover {
      background: rgba(255,255,255,.10);
    }

    /* Pieces Sold layout helpers */
    .sold-title { margin: 0 0 6px; font-size: 18px; }
    .sold-artist { margin: 0 0 10px; color: rgba(255,255,255,.88); }
    .sold-hammer { margin: 0 0 12px; }

    .sold-meta, .sold-row {
      margin: 6px 0;
      color: rgba(255,255,255,.92);   /* brighter than muted */
      line-height: 1.45;
    }

    .sold-link {
      display: inline-block;
      margin-top: 4px;
      color: rgba(255,255,255,.92);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .sold-link:hover { opacity: .9; }