/* Gerd's Cellar - editorial wine merchant. Designed to look right BEFORE there
   are any product photos: a bottle with no image gets a real wine-label panel
   rather than a grey placeholder. */

:root{
  --ink:#17120f; --ink-2:#3b322c; --soft:#6d6058;
  --paper:#f7f3ec; --cream:#fdfbf7; --line:#e6dccc; --line-2:#d6c9b2;
  --wine:#6e1b2b; --wine-lift:#8a2438; --gold:#a9853f; 
  --serif:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(20px,5vw,52px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;font-weight:600}

/* ---------- masthead + hero, one dark block ---------- */
.top{background:var(--ink);color:var(--cream)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:22px;padding-bottom:22px}
.brand{font-size:17px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream);
  text-decoration:none;font-weight:500}
.brand span{color:var(--gold)}
.nav{display:flex;gap:26px}
.nav a{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#b9aa9c;text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--cream);border-bottom-color:var(--gold)}

.hero{background:var(--ink);color:var(--cream);
  background-image:radial-gradient(120% 90% at 78% 0%,rgba(110,27,43,.42),transparent 62%);
  border-bottom:1px solid #2a231e}
.hero .wrap{padding-top:clamp(56px,9vw,104px);padding-bottom:clamp(56px,9vw,104px)}
.hero h1{margin:0 0 22px;font-size:clamp(38px,6.4vw,68px);line-height:1.04;font-weight:400;
  letter-spacing:-.015em;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p{margin:0 0 34px;max-width:46ch;font-size:clamp(17px,1.5vw,19px);color:#cbbdb0}
.actions{display:flex;flex-wrap:wrap;gap:12px}

.btn{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;padding:14px 30px;border:1px solid var(--wine);
  background:var(--wine);color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{background:var(--wine-lift);border-color:var(--wine-lift)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.28);color:var(--cream)}
.btn.ghost:hover{border-color:var(--gold);background:transparent;color:#fff}
.btn.sm{padding:11px 20px}

/* ---------- sections ---------- */
section{padding:clamp(52px,7vw,88px) 0;border-bottom:1px solid var(--line)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:30px;flex-wrap:wrap}
.head h2{margin:0;font-size:clamp(26px,3.4vw,36px);font-weight:400;letter-spacing:-.01em}
.count{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);margin:0}

/* ---------- filters: quiet, underlined, not a form ---------- */
.filters{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  padding:16px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:34px}
.filters .search{flex:1 1 230px;min-width:180px;font-family:var(--sans);font-size:14px;
  padding:9px 2px;border:0;border-bottom:1px solid var(--line-2);background:transparent;
  color:var(--ink)}
.filters .search::placeholder{color:#a89a8c}
.filters .search:focus{outline:0;border-bottom-color:var(--gold)}
.filters select{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:9px 22px 9px 2px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0l4.5 6L9 0z' fill='%23a9853f'/></svg>");
  background-repeat:no-repeat;background-position:right 4px center}
.filters select:focus{outline:0;border-bottom-color:var(--gold)}
.filters .clear{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);background:0;border:0;cursor:pointer;padding:9px 0;text-decoration:underline;
  text-underline-offset:4px}
.filters .clear:hover{color:var(--wine)}

/* ---------- the cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
@media (max-width:1040px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bottle{background:var(--cream);display:flex;flex-direction:column;position:relative;
  transition:transform .18s ease,box-shadow .18s ease}
.bottle::after{content:"";position:absolute;inset:0;border:1px solid var(--line);
  pointer-events:none;transition:border-color .18s}
.bottle:hover{transform:translateY(-3px);box-shadow:0 14px 34px -22px rgba(23,18,15,.55)}
.bottle:hover::after{border-color:var(--gold)}

.shot{aspect-ratio:1/1;overflow:hidden;position:relative;display:flex;
  align-items:flex-end;justify-content:center;
  background:linear-gradient(170deg,#f3ece0 0%,#e9dfcd 62%,#e2d5be 100%)}
.shot.photo{background:#fff;align-items:center;justify-content:center;padding:18px}
.shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bot{height:94%;width:auto;filter:drop-shadow(-6px 10px 12px rgba(23,18,15,.22))}

/* the paper label, drawn onto the bottle */
.label{position:absolute;left:50%;top:53%;transform:translateX(-50%);width:60%;
  background:var(--cream);border:1px solid rgba(23,18,15,.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12px 10px;gap:6px;
  box-shadow:0 2px 6px rgba(23,18,15,.16)}
.label::before{content:"";position:absolute;inset:3px;border:1px solid rgba(169,133,63,.32);
  pointer-events:none}
.label .lp{font-family:var(--sans);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);line-height:1.3}
.label .ln{font-size:14px;line-height:1.2;color:var(--ink);max-width:15ch}
.label .lr{width:20px;height:1px;background:var(--line-2)}
.label .lb{font-family:var(--sans);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);line-height:1.3}

.tag{position:absolute;left:0;top:16px;z-index:2;background:var(--wine);color:#fff;
  font-family:var(--sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  padding:5px 12px}

.body{padding:18px 18px 18px;display:flex;flex-direction:column;flex:1}
.producer{margin:0 0 5px;font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-height:14px}
.bottle h3{margin:0 0 6px;font-size:18px;font-weight:400;line-height:1.25;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.25 * 18px)}
.meta{margin:0 0 10px;font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.note{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(3 * 1.5 * 14px)}
.foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding-top:13px}
.price{font-size:20px;color:var(--wine);line-height:1}
.price:not(:empty)::before{content:"$"}
.add{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--ink);border:1px solid var(--line-2);padding:8px 14px;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.add:hover{background:var(--wine);border-color:var(--wine);color:#fff}
.stock{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft)}
.bottle.out{opacity:.62}

/* ---------- visiting + reserve ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px 56px}
dl{margin:0}
dt{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);margin-top:16px}
dd{margin:3px 0 0;font-size:18px}
.lede{max-width:50ch;color:var(--ink-2);margin:0 0 26px}
.muted{color:var(--soft)}

footer{padding:38px 0 46px;font-family:var(--sans);font-size:13px;color:var(--soft)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.stamp{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

@media (max-width:560px){
  .cards{gap:12px}
  .body{padding:14px 14px 16px}
  .bottle h3{font-size:16px}
  .note{display:none}
  .label{width:66%;padding:9px 7px}
  .label .ln{font-size:11px}
  .label .lp{font-size:7px}
  .nav{gap:16px}
}