/* A Cup Of, the concept storefront at maximilianrupp.com/projects/a-cup-of. Static, no script. */
:root{
  --bg:#ffffff; --ink:#111111; --muted:#5f5f5f; --line:#e6e6e6; --soft:#f6f6f4;
  --maxw:1080px;
  --calm:#b7b1d8; --joy:#f6c932; --hope-a:#e9805a; --hope-b:#f6d38c; --courage:#9a3322;
  --focus:#a6cdb0; --comfort:#c99b6b; --nostalgia:#86c06f;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.sans{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; }
a{ color:var(--ink); }

.top{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.brand{ font-size:1.35rem; letter-spacing:.02em; text-decoration:none; }
.brand em{ font-style:italic; }
.topnav{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.9rem; display:flex; gap:18px; align-items:center; }
.topnav a{ text-decoration:none; color:var(--muted); }
.topnav a[aria-current]{ color:var(--ink); font-weight:650; }
.concept{ border:1px solid var(--ink); border-radius:999px; padding:3px 10px; font-size:.8rem; color:var(--ink); }

.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:56px 0 44px; }
.hero h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.05; margin:0 0 18px; font-weight:500; }
.hero h1 em{ font-style:italic; }
.hero p{ color:var(--muted); font-size:1.12rem; margin:0 0 22px; max-width:30em; }
.btn{ display:inline-block; padding:13px 22px; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.95rem; }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.trio{ display:flex; justify-content:center; align-items:flex-end; gap:22px; min-height:260px; }
.trio .vial{ transform-origin:bottom center; }
.trio .vial:nth-child(2){ transform:scale(1.25); margin:0 10px; }

/* The vial, drawn in CSS: a cork, a neck, a round shouldered body with the liquid inside. */
.vial{ position:relative; width:78px; height:190px; flex:none; }
.vial .cork{ position:absolute; left:28px; top:0; width:22px; height:16px; border-radius:4px 4px 2px 2px; background:#2b2b2b; }
.vial .neck{ position:absolute; left:26px; top:14px; width:26px; height:34px; border:2px solid var(--ink); border-bottom:none; border-radius:4px 4px 0 0; background:#fff; }
.vial .body{ position:absolute; left:0; top:46px; width:78px; height:144px; border:2px solid var(--ink); border-radius:26px 26px 14px 14px; overflow:hidden; background:#fff; }
.vial .liquid{ position:absolute; left:0; right:0; bottom:0; height:72%; background:var(--c); transition:height .8s ease; }
.vial .liquid::before{ content:""; position:absolute; left:-20%; right:-20%; top:-6px; height:12px; border-radius:50%; background:var(--c); filter:brightness(1.08); }
.vial .label{ position:absolute; left:8px; right:8px; top:46%; background:#fff; border:1px solid var(--ink); padding:5px 0 4px; text-align:center;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.56rem; letter-spacing:.18em; font-weight:700; }
.calm{ --c:var(--calm); } .joy{ --c:var(--joy); } .courage{ --c:var(--courage); } .focus{ --c:var(--focus); }
.comfort{ --c:var(--comfort); } .nostalgia{ --c:var(--nostalgia); }
.hope{ --c:var(--hope-b); }
.hope .liquid{ background:linear-gradient(to top, var(--hope-a), var(--hope-b)); }
.joy .liquid::after{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 20% 70%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 40% 20%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px);
  animation:fizz 3.5s linear infinite; }
@keyframes fizz{ from{ background-position:0 0 } to{ background-position:0 -60px } }
.card:hover .liquid{ height:84%; }
@media (prefers-reduced-motion: reduce){ .joy .liquid::after{ animation:none; } .vial .liquid{ transition:none; } }

section{ padding:44px 0; border-top:1px solid var(--line); }
.head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
h2{ font-size:1.9rem; font-weight:500; margin:0; }
.head p{ margin:0; color:var(--muted); max-width:34em; }

.shelf{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px; }
.card{ border:1px solid var(--line); border-radius:18px; padding:22px 20px 20px; display:flex; flex-direction:column; background:#fff; }
.card .stage{ background:var(--soft); border-radius:12px; display:flex; justify-content:center; padding:22px 0 18px; margin-bottom:16px; }
.card h3{ font-size:1.35rem; font-weight:500; margin:0; }
.card .shape{ font-style:italic; color:var(--muted); margin:2px 0 10px; }
.card .meta{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.85rem; color:var(--muted); margin:0 0 10px; }
.card .meta b{ color:var(--ink); font-weight:600; }
.card .ritual{ font-size:.95rem; border-left:2px solid var(--c); padding-left:10px; margin:0 0 16px; }
.card .buy{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.card .price{ font-size:.85rem; color:var(--muted); }
.card .price small{ display:block; color:var(--muted); font-size:.72rem; }
.card .soon{ white-space:nowrap; font-size:.82rem; padding:9px 14px; border-radius:999px; border:1px solid var(--ink); text-decoration:none; }

.boxes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.box{ background:var(--soft); border-radius:18px; padding:24px; }
.box h3{ font-size:1.3rem; font-weight:500; margin:0 0 6px; }
.box p{ margin:0 0 12px; color:var(--muted); }
.box .price{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); }
.week{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin:14px 0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.62rem; text-align:center; color:var(--muted); }
.week span::before{ content:""; display:block; height:30px; border-radius:6px 6px 3px 3px; margin-bottom:4px; background:var(--c); border:1px solid var(--ink); }

.bar{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.menu{ border:1px solid var(--ink); border-radius:4px; padding:28px 26px; text-align:center; }
.menu .t{ font-size:1.5rem; margin:0 0 16px; font-style:italic; }
.menu ul{ list-style:none; padding:0; margin:0; }
.menu li{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dotted #bbb; }
.menu li:last-child{ border-bottom:none; }
.menu li span:last-child{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--muted); font-size:.9rem; }

.quote{ text-align:center; padding:64px 0; }
.quote p{ font-size:clamp(1.6rem, 3.6vw, 2.4rem); font-style:italic; margin:0 auto; max-width:22em; line-height:1.25; }

.fine{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.85rem; color:var(--muted); }
footer{ padding:28px 16px 48px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); }

@media (max-width: 800px){
  .hero, .bar{ grid-template-columns:1fr; gap:28px; }
  .hero{ padding-top:36px; }
  .trio{ min-height:220px; }
  .boxes{ grid-template-columns:1fr; }
  .topnav .hide-s{ display:none; }
}