/* np.lol design system — tokens vendored from the Winos Screens design project.
   Fonts load from Google Fonts, as the design system specifies. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --paper:#F6F1E7; --paper-2:#EDE7D8; --paper-3:#DCD3BD;
  --ink:#14110D; --ink-2:#3A352D; --ink-3:#776E5E; --ink-4:#A99F8B;
  --tomato:#FF4E2E; --acid:#DCFF3F; --leaf:#2F8F5C; --amber:#E6A300; --berry:#B5274D;
  /* winos runs the berry accent */
  --accent:#B5274D; --accent-deep:#8E1B3B;
  --font-sans:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-full:999px;
  --border-w:1.5px; --page-pad:clamp(20px,5vw,56px);
}

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:15px; line-height:1.45;
  font-feature-settings:"ss01","ss02"; -webkit-font-smoothing:antialiased;
  margin:0; padding:0 var(--page-pad) 120px;
}
/* Containers are rules, not boxes: the design dropped every card wrapper, so
   sections are separated by hairlines on the page ground instead. */
.w-shell{max-width:1280px;margin:0 auto}

/* ---- nav ---- */
.w-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:var(--border-w) solid var(--ink);flex-wrap:wrap}
.w-nav-left{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.w-brand{display:flex;align-items:baseline;font-size:22px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.w-brand-dot{width:7px;height:7px;border-radius:var(--radius-full);
  background:var(--accent);display:inline-block;margin-left:3px}
.w-nav-links{display:flex;align-items:center;gap:4px}
.w-nav-link{font-size:15px;color:var(--ink-3);padding:6px 14px;
  border-radius:var(--radius-full);border:var(--border-w) solid transparent;text-decoration:none}
.w-nav-link:hover{color:var(--ink)}
.w-nav-link.is-active{font-weight:600;color:var(--ink);
  background:var(--paper-3);border-color:var(--ink)}
.w-nav-right{display:flex;align-items:center;gap:16px}
.w-crawled{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.w-avatar{width:32px;height:32px;border-radius:var(--radius-full);
  border:var(--border-w) solid var(--ink);background:var(--paper-2);display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:600;
  color:var(--ink);text-decoration:none}
.w-avatar:hover{background:var(--paper-3)}
.w-avatar.is-active{background:var(--acid)}

/* ---- filter bar ---- */
.w-filters{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 0;border-bottom:var(--border-w) solid var(--ink);flex-wrap:wrap}
.w-filter-groups{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.w-filter-group{display:flex;align-items:center;gap:8px}
.w-filter-sep{width:1px;height:24px;background:var(--paper-3)}
.w-micro{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
.w-pill{padding:6px 14px;border-radius:var(--radius-full);
  border:var(--border-w) solid var(--ink);background:var(--paper);
  color:var(--ink-2);font-size:13px;font-weight:500;text-decoration:none;display:inline-block}
.w-pill.is-on{background:var(--ink);color:var(--paper);font-weight:600}
.w-count{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}

/* ---- table ---- */
.w-scroll{overflow-x:auto}
.w-thead,.w-row{display:grid;grid-template-columns:112px 1fr auto 176px 148px;
  align-items:center;gap:20px;min-width:900px}
.w-thead{padding:8px 0;border-bottom:var(--border-w) solid var(--ink)}
.w-row{padding:18px 0;border-bottom:1px solid var(--paper-3)}
.w-row:last-child{border-bottom:0}
.w-row.is-buyable{box-shadow:inset 4px 0 0 var(--acid)}
.w-status{font-size:13px;font-weight:600}
.w-status.s-buyable{color:var(--leaf)}
.w-status.s-sold_out{color:var(--ink-3)}
.w-status.s-discontinued{color:var(--ink-4)}
.w-cuvee{font-size:17px;font-weight:600;color:var(--ink);line-height:1.2;text-decoration:none;display:block}
.w-cuvee:hover{text-decoration:underline;text-underline-offset:3px}
.w-producer{font-size:13px;color:var(--ink-3);margin-top:3px}
.w-vintages{display:flex;gap:6px;flex-wrap:wrap}
.w-price{font-family:var(--font-mono);font-size:15px;color:var(--ink);text-align:right}
.w-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px}

/* ---- vintage chips: the four Vinmonopolet stock states ---- */
.w-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:var(--radius-full);font-family:var(--font-mono);font-size:12px;
  font-weight:500;text-decoration:none;border:var(--border-w) solid var(--ink)}
.w-chip.c-orderable{background:var(--leaf);color:var(--paper)}
.w-chip.c-in_store{background:var(--paper);color:var(--ink)}
.w-chip.c-in_store .w-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--leaf)}
.w-chip.c-sold_out{border-style:dashed;border-color:var(--ink-4);
  background:var(--paper-2);color:var(--ink-4)}
.w-chip.c-discontinued{border-color:var(--paper-3);background:var(--paper-2);
  color:var(--ink-4);text-decoration:line-through}
.w-chip.c-unknown{border-color:var(--paper-3);background:var(--paper-2);color:var(--ink-4)}

/* ---- buttons ---- */
.w-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:7px 14px;border-radius:var(--radius-sm);border:var(--border-w) solid var(--ink);
  background:var(--paper);color:var(--ink);cursor:pointer;font-family:inherit;
  text-decoration:none;line-height:1.2}
.w-btn:hover{background:var(--paper-2)}
.w-btn.is-following{background:var(--acid)}
.w-btn-icon{padding:7px 9px}
.w-btn-icon.is-on{background:var(--acid)}
.w-btn form{margin:0}
form.button_to{margin:0;display:inline}

/* ---- empty state ---- */
.w-empty{padding:64px 0;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:10px}
.w-empty h2{font-size:22px;font-weight:600;margin:0;color:var(--ink)}
.w-empty p{margin:0;color:var(--ink-3);font-size:15px}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:720px){
  body{padding:0 var(--page-pad) 60px}
  .w-nav,.w-filters{padding:12px 0}
}

/* ---- producers grid ---- */
.w-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 0;flex-wrap:wrap}
.w-btn-primary{background:var(--accent);color:var(--paper);
  box-shadow:2px 2px 0 var(--ink);padding:9px 16px}
.w-btn-primary:hover{background:var(--accent-deep)}
.w-btn-raised{box-shadow:2px 2px 0 var(--ink)}
.w-cards{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;row-gap:0}
.w-card{padding:20px 0;border-top:var(--border-w) solid var(--ink);
  display:flex;flex-direction:column;gap:14px;min-height:170px}
.w-card-name{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  line-height:1.2;text-decoration:none;display:block}
.w-card-name:hover{text-decoration:underline;text-underline-offset:3px}
.w-card-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-top:6px}
.w-card-foot{display:flex;gap:10px;align-items:center;margin-top:auto;flex-wrap:wrap}
.w-ext{font-size:13px;color:var(--ink-3);text-decoration:none}
.w-ext:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.w-card-add{border-top:var(--border-w) dashed var(--ink-4);padding:20px 0;min-height:170px;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:8px}
.w-card-add-title{font-size:17px;font-weight:600;color:var(--ink-2)}
.w-card-add-body{font-size:13px;color:var(--ink-3);line-height:1.5}
@media (max-width:1000px){.w-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.w-cards{grid-template-columns:1fr;padding:0 16px 20px}}

/* ---- producer detail header ---- */
.w-head{padding:28px 0;border-bottom:var(--border-w) solid var(--ink);
  display:flex;justify-content:space-between;
  align-items:flex-start;gap:40px;flex-wrap:wrap}
.w-crumb{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.w-crumb a{color:var(--accent);text-decoration:none}
.w-crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.w-title{font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1.05;
  color:var(--ink);margin:0;text-wrap:balance}
.w-head-meta{display:flex;gap:20px;margin-top:14px;align-items:center;flex-wrap:wrap}
.w-head-meta span,.w-head-meta a{font-family:var(--font-mono);font-size:13px}
.w-head-meta .w-strong{color:var(--ink-2)}
.w-panel{width:352px;max-width:100%;padding-left:24px;
  border-left:var(--border-w) solid var(--ink)}
.w-panel-top{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:10px}
.w-panel-title{font-size:15px;font-weight:600;color:var(--ink)}
.w-panel-body{font-size:13px;line-height:1.5;color:var(--ink-2);
  padding-top:10px;border-top:1px solid var(--paper-3)}
.w-subbar{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:18px 0 14px;flex-wrap:wrap}
@media (max-width:720px){.w-title{font-size:32px}.w-head{padding:20px 16px}}

/* ---- find producer ---- */
.w-narrow{max-width:592px}
.w-pad{padding:24px 0 20px}
.w-lead{font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  line-height:1.2;margin:0}
.w-sub{font-size:15px;color:var(--ink-2);line-height:1.6;margin:6px 0 0}
.w-search{display:flex;gap:10px;margin-top:18px}
.w-input-wrap{flex:1;display:flex;align-items:center;gap:10px;
  border:var(--border-w) solid var(--ink);border-radius:4px;background:var(--paper);
  padding:11px 14px}
.w-input-wrap:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.w-input-icon{color:var(--ink-3);font-size:15px}
.w-input{flex:1;border:0;background:transparent;font-family:inherit;font-size:15px;
  color:var(--ink);padding:0;outline:none}
.w-input::placeholder{color:var(--ink-4)}
.w-status-strip{border-top:var(--border-w) solid var(--ink);
  padding:14px 0;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.w-dots{color:var(--accent);letter-spacing:2px;margin-left:3px}
.w-dots span{animation:w-blink 1.2s infinite}
.w-dots span:nth-child(2){animation-delay:.2s}
.w-dots span:nth-child(3){animation-delay:.4s}
@keyframes w-blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.w-dots span{animation:none}}
.w-result{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--paper-3)}
.w-result:last-child{border-bottom:0}
.w-result-name{font-size:17px;font-weight:600;color:var(--ink)}
.w-result-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-top:2px}
.w-btn-quiet{background:var(--paper-2);color:var(--ink-3);white-space:nowrap;cursor:default}
.w-btn-quiet:hover{background:var(--paper-2)}
.w-note{padding:28px 0 32px;display:flex;flex-direction:column;gap:8px}
.w-note h2{font-size:22px;font-weight:600;margin:0;color:var(--ink)}
.w-note p{margin:0;font-size:14px;color:var(--ink-3);line-height:1.55;max-width:46ch}

/* ---- admin ---- */
.w-admin{display:grid;grid-template-columns:360px 1fr;align-items:start}
.w-admin-side{padding:24px 40px 24px 0;border-right:var(--border-w) solid var(--ink)}
.w-admin-main{padding:24px 0 24px 40px}
.w-sec-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px;flex-wrap:wrap}
.w-sec-title{font-size:22px;font-weight:600;color:var(--ink);margin:0}
.w-list{display:flex;flex-direction:column;gap:10px}
.w-user{padding:12px 0;border-bottom:1px solid var(--paper-3);display:flex;
  justify-content:space-between;align-items:center;gap:12px;text-decoration:none}
.w-list{gap:0}
.w-user-name{font-size:15px;font-weight:600;color:var(--ink)}
.w-user-email{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.w-tag{font-size:12px;font-weight:600;padding:3px 9px;border-radius:var(--radius-full);
  border:var(--border-w) solid var(--ink);background:var(--acid);color:var(--ink)}
.w-block{margin-top:28px;padding-top:20px;border-top:1px solid var(--paper-3)}
.w-tag-cold{background:var(--paper-2);color:var(--ink-3);border-color:var(--ink-4)}
.w-invite-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.w-invite-form .l-input{flex:1;min-width:220px;width:auto}
.l-invalid-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.w-stack{display:flex;flex-direction:column;gap:10px}
.w-stack .w-btn{justify-content:center}
.w-hint{font-size:13px;color:var(--ink-3);line-height:1.5}
.w-pill-sm{padding:5px 12px;font-size:13px}
.w-log{border-top:var(--border-w) solid var(--ink)}
.w-log-head,.w-log-row{display:grid;grid-template-columns:104px 1fr 150px 110px;
  gap:16px;padding:11px 0;align-items:center;min-width:640px}
.w-log-head{border-bottom:var(--border-w) solid var(--ink);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
.w-log-row{border-bottom:1px solid var(--paper-3)}
.w-log-row:last-child{border-bottom:0}
.w-state{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  font-weight:600;color:var(--ink)}
.w-state-dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--ink-4)}
.w-state.s-running .w-state-dot{background:var(--amber)}
.w-state.s-done .w-state-dot{background:var(--leaf)}
.w-state.s-failed .w-state-dot{background:var(--berry)}
.w-state.s-done,.w-state.s-queued{color:var(--ink-3);font-weight:500}
.w-log-url{font-family:var(--font-mono);font-size:13px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-log-time{font-family:var(--font-mono);font-size:13px;color:var(--ink-3)}
.w-log-time.is-right{text-align:right;color:var(--ink-4)}
@media (max-width:900px){.w-admin{grid-template-columns:1fr}
  .w-admin-side{border-right:0;border-bottom:var(--border-w) solid var(--ink);padding:24px 0}
  .w-admin-main{padding:24px 0}}

/* ---- flash ---- */
.w-flash{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:14px;
  color:var(--ink-2);border-bottom:1px solid var(--paper-3)}
.w-flash::before{content:"";width:7px;height:7px;border-radius:var(--radius-full);
  background:var(--leaf);flex:none}
.w-flash.is-alert::before{background:var(--berry)}

/* ---- profile ---- */
.w-stats{display:flex;gap:40px;padding-left:40px;
  border-left:var(--border-w) solid var(--ink);flex-wrap:wrap}
.w-stat-num{font-family:var(--font-mono);font-size:44px;font-weight:500;
  letter-spacing:-.02em;color:var(--ink);line-height:1}
.w-stat-num.is-accent{color:var(--accent)}
.w-stat-label{font-size:13px;color:var(--ink-3);margin-top:2px}
.w-profile{display:grid;grid-template-columns:1fr 400px;gap:56px;
  padding-top:32px;align-items:start}
.w-aside{padding-left:56px;border-left:var(--border-w) solid var(--ink)}
.w-h2{font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.w-rule-top{border-top:var(--border-w) solid var(--ink)}
.w-rule-bottom{border-bottom:var(--border-w) solid var(--ink)}

.w-pref{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;
  padding:20px 0;border-top:1px solid var(--paper-3)}
.w-pref.w-rule-top{margin-top:20px}
.w-pref-title{font-size:17px;font-weight:600;color:var(--ink);display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.w-pref-body{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.w-soon{font-family:var(--font-mono);font-size:11px;font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--paper-3);border-radius:var(--radius-full);padding:2px 8px}

/* Radios styled as the design's pill group -- no JS, saves with the form. */
.w-choices{display:flex;gap:6px;flex:none;flex-wrap:wrap}
.w-choice{padding:6px 14px;border-radius:var(--radius-full);
  border:var(--border-w) solid var(--ink);background:var(--paper);color:var(--ink-2);
  font-size:13px;cursor:pointer;white-space:nowrap}
.w-choice input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.w-choice:hover{background:var(--paper-2)}
.w-choice:has(input:checked){background:var(--ink);color:var(--paper);font-weight:600}
.w-choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.w-select{font-family:var(--font-mono);font-size:15px;color:var(--ink);
  background:var(--paper);border:var(--border-w) solid var(--ink);border-radius:4px;
  padding:9px 12px;max-width:200px}
.w-save{display:flex;align-items:center;gap:16px;padding-top:24px;flex-wrap:wrap}
.w-btn-lg{padding:11px 18px;box-shadow:4px 4px 0 var(--ink)}

.w-alert{padding:16px 0;border-top:1px solid var(--paper-3)}
.w-alert-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.w-alert-name{font-size:15px;font-weight:600;color:var(--ink)}
.w-alert-when{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);flex:none}
.w-alert-meta{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:2px}

.w-acct{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-top:1px solid var(--paper-3)}
.w-acct-name{font-size:15px;font-weight:600;color:var(--ink)}
.w-acct-meta{font-family:var(--font-mono);font-size:13px;color:var(--ink-3)}
.w-disclose summary{list-style:none;cursor:pointer}
.w-disclose summary::-webkit-details-marker{display:none}
.w-disclose[open] summary .w-btn{background:var(--paper-3)}
.w-disclose-body{display:flex;flex-direction:column;gap:8px;padding:4px 0 16px}
.w-input-solo{font-family:inherit;font-size:15px;color:var(--ink);background:var(--paper);
  border:var(--border-w) solid var(--ink);border-radius:4px;padding:9px 12px;width:100%}
.w-input-solo::placeholder{color:var(--ink-4)}
.w-disclose-body .w-btn{align-self:flex-start}

.w-danger{font-size:13px;color:var(--ink-3);line-height:1.6;margin-top:16px}
.w-linkish{font:inherit;font-weight:600;color:var(--berry);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---- wine detail ----
   Two columns the whole way down, the rule between them running unbroken from
   the header into the body, which is why the side column is repeated in both
   grids rather than floated alongside one. */
.w-wine-head,.w-wine-body{display:grid;grid-template-columns:1fr 352px}
.w-wine-head{border-bottom:var(--border-w) solid var(--ink)}
.w-wine-body{align-items:start}
.w-wine-main{padding:28px 40px 28px 0}
.w-wine-body .w-wine-main{padding-top:32px;padding-bottom:0}
.w-wine-side{padding:28px 0 28px 24px;border-left:var(--border-w) solid var(--ink);
  display:flex;flex-direction:column;gap:16px}
.w-wine-body .w-wine-side{padding-top:32px;padding-bottom:0;align-self:stretch;gap:0}

.w-wine-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.w-wine-title h1{font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1.05;
  color:var(--ink);margin:0;text-wrap:balance}
.w-wine-estate{font-size:17px;color:var(--ink-2);margin-top:10px}
.w-wine-meta{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:18px;
  font-family:var(--font-mono);font-size:13px;color:var(--ink-3)}

.w-avail{display:flex;align-items:center;gap:8px}
.w-avail-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--ink-4)}
.w-avail-label{font-size:15px;font-weight:600;color:var(--ink-3)}
.w-avail.s-orderable .w-avail-dot,.w-avail.s-in_store .w-avail-dot{background:var(--leaf)}
.w-avail.s-orderable .w-avail-label,.w-avail.s-in_store .w-avail-label{color:var(--leaf)}
.w-bigprice{font-family:var(--font-mono);font-size:30px;color:var(--ink);
  margin-top:10px;letter-spacing:-.01em}
.w-price-delta{font-size:13px;color:var(--ink-3);margin-top:2px}
.w-wine-actions{display:flex;gap:10px;flex-wrap:wrap}
.w-wine-actions form{flex:none}
.w-btn-buy{flex:1;justify-content:center;background:var(--accent);color:var(--paper);
  box-shadow:4px 4px 0 var(--ink);padding:10px 16px;font-size:15px}
.w-btn-buy:hover{background:var(--accent-deep)}

.w-sec-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);margin-top:40px}
.w-wine-side .w-sec-label:first-child,.w-wine-main .w-sec-label:first-child{margin-top:0}
.w-rule{margin-top:12px;border-top:var(--border-w) solid var(--ink)}

/* chart */
.w-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:var(--border-w) solid var(--ink)}
.w-chart{display:flex;gap:16px;padding-top:20px}
.w-axis{display:flex;flex-direction:column;justify-content:space-between;height:148px;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-4);text-align:right;width:52px}
.w-plot{flex:1;min-width:0}
.w-bars{display:flex;align-items:flex-end;gap:8px;height:148px;
  border-bottom:var(--border-w) solid var(--ink);border-top:1px solid var(--paper-3);
  box-sizing:border-box}
/* Scoped to .w-bars on purpose: the producers filter bar is .w-bar too, and
   this block comes later in the file, so an unscoped rule paints it black. */
.w-bars .w-bar{flex:1;background:var(--ink);min-height:1px}
.w-bars .w-bar.is-soldout{background:var(--paper-3)}
.w-bars .w-bar.is-now{background:var(--accent)}
.w-bars .w-bar.is-unknown{background:transparent}
.w-xaxis{display:flex;gap:8px;margin-top:8px;font-family:var(--font-mono);
  font-size:12px;color:var(--ink-4)}
.w-xaxis span{flex:1;min-width:0}
.w-xaxis .is-now{color:var(--ink-2)}

/* stats */
.w-wine-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;
  border-top:1px solid var(--paper-3)}
.w-wine-stat{padding:16px 20px 0 0}
.w-wine-stat + .w-wine-stat{padding-left:20px}
.w-wine-stat-v{font-family:var(--font-mono);font-size:17px;color:var(--ink);margin-top:6px}

/* what we noticed */
.w-tl-row{display:grid;grid-template-columns:96px 1fr auto;align-items:baseline;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--paper-3)}
.w-tl-row:last-child{border-bottom:var(--border-w) solid var(--ink)}
.w-tl-row.is-marked{box-shadow:inset 4px 0 0 var(--accent)}
.w-tl-when{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);padding-left:14px}
.w-tl-what{font-size:15px;color:var(--ink)}
.w-tl-row.is-quiet .w-tl-what{color:var(--ink-2)}
.w-tl-amount{font-family:var(--font-mono);font-size:13px;color:var(--ink)}
.w-tl-row.is-quiet .w-tl-amount{color:var(--ink-3)}

/* other vintages */
.w-vin-row{display:grid;grid-template-columns:96px 1fr auto 140px;align-items:center;
  gap:20px;padding:14px 0;border-bottom:1px solid var(--paper-3)}
.w-vin-row:last-child{border-bottom:var(--border-w) solid var(--ink)}
.w-vin-row .w-chip{justify-self:start}
.w-vin-what{font-size:15px;color:var(--ink)}
.w-vin-row.is-quiet .w-vin-what{color:var(--ink-2)}
.w-vin-price{font-family:var(--font-mono);font-size:15px;color:var(--ink)}
.w-vin-row.is-quiet .w-vin-price{color:var(--ink-3)}
.w-vin-note{font-size:13px;color:var(--ink-3);text-align:right}
.w-vin-row.is-gone .w-vin-price,.w-vin-row.is-gone .w-vin-note{color:var(--ink-4)}

/* where it is today */
.w-store-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--paper-3)}
.w-store-name{font-size:15px;color:var(--ink)}
.w-store-count{font-family:var(--font-mono);font-size:13px;color:var(--ink-2)}
.w-store-note{padding:12px 0;border-bottom:var(--border-w) solid var(--ink);
  font-size:13px;color:var(--ink-3);line-height:1.5}

/* what you'll hear about */
.w-follow-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--paper-3)}
.w-follow-row:last-child{border-bottom:var(--border-w) solid var(--ink)}
.w-follow-name{font-size:15px;font-weight:600;color:var(--ink)}
.w-follow-sub{font-size:13px;color:var(--ink-3)}
.w-follow-row .w-actions{flex:none}

/* source */
.w-source{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);
  line-height:1.6;word-break:break-all}
.w-source-note{font-size:13px;color:var(--ink-3);margin-top:10px}
.w-rule-pad{margin-top:12px;padding-top:12px;border-top:var(--border-w) solid var(--ink)}

@media (max-width:1000px){
  .w-wine-head,.w-wine-body{grid-template-columns:1fr}
  .w-wine-main,.w-wine-body .w-wine-main{padding-right:0}
  .w-wine-side,.w-wine-body .w-wine-side{padding-left:0;border-left:0;
    border-top:var(--border-w) solid var(--ink);padding-top:28px;margin-top:8px}
}
@media (max-width:680px){
  .w-wine-title h1{font-size:32px}
  .w-wine-stats{grid-template-columns:repeat(2,1fr)}
  .w-wine-stat + .w-wine-stat{padding-left:0}
  .w-wine-stat:nth-child(even){padding-left:20px}
  .w-vin-row{grid-template-columns:80px 1fr auto;gap:8px 12px}
  .w-vin-note{grid-column:2 / -1;text-align:left}
  .w-tl-row{grid-template-columns:72px 1fr;gap:4px 12px}
  .w-tl-amount{grid-column:2}
}

/* ---- landing (screen 10) ---- */
.l-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0 14px;border-bottom:var(--border-w) solid var(--ink);flex-wrap:wrap}
.l-nav-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.l-nav-link{font-size:15px;color:var(--ink-2);text-decoration:none}
.l-nav-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.l-hero{display:grid;grid-template-columns:1fr 400px;gap:56px;
  padding:56px 0 40px;border-bottom:var(--border-w) solid var(--ink);align-items:start}
.l-display{font-size:96px;font-weight:600;letter-spacing:-.03em;line-height:.98;
  color:var(--ink);margin:0;text-wrap:balance}
.l-lead{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:52ch;margin:24px 0 0}
.l-stat{display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:20px;
  border-top:1px solid var(--paper-3);flex-wrap:wrap}
.l-stat-label{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap}
.l-stat-dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--leaf)}
.l-stat-text{font-size:15px;color:var(--ink-2)}
.l-num{font-family:var(--font-mono);font-weight:400;color:var(--ink)}

.l-panel{padding-left:56px;border-left:var(--border-w) solid var(--ink)}
.l-panel-title{font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.l-panel-title-lg{margin-top:12px;line-height:1.15}
.l-panel-sub{font-size:13px;color:var(--ink-3);margin:4px 0 0}
.l-panel-sub-lg{font-size:15px;line-height:1.6;color:var(--ink-2);margin-top:8px}
.l-form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.l-field-label{display:block;margin-bottom:6px}
.l-input{width:100%;border:var(--border-w) solid var(--ink);border-radius:var(--radius-xs,4px);
  background:var(--paper);padding:11px 14px;font-family:inherit;font-size:15px;
  color:var(--ink);box-sizing:border-box}
.l-input::placeholder{color:var(--ink-4)}
.l-textarea{resize:vertical;min-height:56px;line-height:1.5}
.l-submit{justify-content:center;padding:12px 18px;box-shadow:4px 4px 0 var(--ink);
  font-size:13px;cursor:pointer}
.l-submit-quiet{background:var(--paper);color:var(--ink)}
.l-submit-quiet:hover{background:var(--paper-2)}
.l-panel-foot{margin:32px 0 0;padding-top:16px;border-top:1px solid var(--paper-3);
  font-size:13px;line-height:1.5;color:var(--ink-2)}
.l-panel-foot-plain{margin-top:12px;padding-top:0;border-top:0}
.l-strong-link{color:var(--accent);font-weight:600;text-decoration:none}
.l-strong-link:hover{text-decoration:underline;text-underline-offset:3px}
.l-error{margin:0;font-size:13px;color:var(--berry);font-weight:600}
.l-thanks{margin:20px 0 0;padding:14px 16px;border:var(--border-w) solid var(--ink);
  border-radius:var(--radius-xs,4px);background:var(--acid);font-size:15px;
  font-weight:600;color:var(--ink)}

.l-sec{padding:56px 0 0}
.l-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:32px;
  flex-wrap:wrap}
.l-h2{font-size:44px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  line-height:1.1;margin:0;text-wrap:balance}
.l-sec-note{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:44ch;margin:0}
.l-sec-note.l-wide{max-width:60ch;margin-top:6px}

/* Static illustration of the real table. Its own grid rather than .w-row so
   it can stack on a phone, which the app's scrolling table does not. */
.l-demo{margin-top:32px}
.l-demo-head,.l-demo-row{display:grid;grid-template-columns:112px 1fr auto 176px 128px;
  align-items:center;gap:20px}
.l-demo-head{padding:8px 0;border-top:var(--border-w) solid var(--ink);
  border-bottom:var(--border-w) solid var(--ink)}
.l-demo-row{padding:18px 0;border-bottom:1px solid var(--paper-3)}
.l-demo-row:last-child{border-bottom:var(--border-w) solid var(--ink)}
.l-demo-row.is-buyable{box-shadow:inset 4px 0 0 var(--acid)}
.l-demo-price{text-align:right;font-family:var(--font-mono);font-size:15px;color:var(--ink)}
.l-demo-row:not(.is-buyable) .l-demo-price{color:var(--ink-3)}
.l-demo-action{display:flex;justify-content:flex-end}
.l-demo-action .w-btn{cursor:default}
.l-right{text-align:right}
.l-legend{display:flex;gap:32px;padding-top:16px;flex-wrap:wrap}

.l-steps{display:grid;grid-template-columns:repeat(3,1fr);column-gap:56px;margin-top:32px}
.l-step{padding:20px 0;border-top:var(--border-w) solid var(--ink)}
.l-step-title{font-size:22px;font-weight:600;color:var(--ink);margin:10px 0 0}
.l-step-body{font-size:15px;line-height:1.6;color:var(--ink-2);margin:4px 0 0}

.l-split{display:grid;grid-template-columns:1fr 400px;gap:56px;padding:56px 0 0;
  align-items:start}
.l-nots{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;margin-top:24px}
.l-not{padding:16px 0;border-top:1px solid var(--paper-3)}
.l-not.l-rule-strong{border-top:var(--border-w) solid var(--ink)}
.l-not-title{font-size:17px;font-weight:600;color:var(--ink);margin:0}
.l-not-body{font-size:15px;line-height:1.6;color:var(--ink-2);margin:2px 0 0}

.l-foot{display:flex;align-items:baseline;justify-content:space-between;gap:32px;
  padding:32px 0 0;margin-top:56px;border-top:var(--border-w) solid var(--ink);flex-wrap:wrap}
.l-foot-note{font-size:15px;color:var(--ink-2);max-width:44ch;text-align:right;margin:0}
.l-foot-dim{color:var(--ink-3)}

@media (max-width:1000px){
  .l-hero,.l-split{grid-template-columns:1fr;gap:40px}
  .l-panel{padding-left:0;border-left:0;border-top:var(--border-w) solid var(--ink);
    padding-top:32px}
  .l-display{font-size:64px}
  .l-steps{grid-template-columns:1fr;column-gap:0}
  .l-step{padding:16px 0}
  .l-step + .l-step{border-top-width:1px;border-top-color:var(--paper-3)}
}
@media (max-width:720px){
  .l-display{font-size:44px;line-height:1.02}
  .l-h2{font-size:30px}
  .l-nots{grid-template-columns:1fr}
  .l-not.l-rule-strong + .l-not.l-rule-strong{border-top-width:1px;border-top-color:var(--paper-3)}
  .l-legend{gap:8px;flex-direction:column}
  .l-foot{flex-direction:column;gap:12px}
  .l-foot-note{text-align:left}
  /* The price leaves the grid and sits with the status, so a row reads as a
     block instead of scrolling sideways. */
  .l-demo-head{display:none}
  .l-demo-row{grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0 14px 12px;
    align-items:baseline}
  .l-demo-row .w-status{order:1}
  .l-demo-price{order:2;font-size:13px}
  .l-demo-row > div:nth-of-type(1){order:3;grid-column:1 / -1}
  .l-demo-row .w-vintages{order:4;grid-column:1 / -1;margin-top:6px}
  .l-demo-action{order:5;grid-column:1 / -1;justify-content:flex-start;margin-top:10px}
}

@media (max-width:1000px){
  .w-profile{grid-template-columns:1fr;gap:0}
  .w-aside{padding-left:0;border-left:0;border-top:var(--border-w) solid var(--ink);
    padding-top:32px;margin-top:40px}
  .w-stats{padding-left:0;border-left:0}
}
@media (max-width:680px){
  .w-pref{flex-direction:column;gap:12px}
  .w-stat-num{font-size:32px}
}