/* Valentine palette */
:root {
  --primary: #e72650;      /* Primary Valentine */
  --red: #c8102e;          /* Classic Red: links */
  --wine: #9b233b;         /* Deep Valentine Red: headings */
  --pink: #f9c2d1;         /* Affection Pink */
  --hot: #ff4f8b;
  --purple: #7a3daf;
  --gold: #d4af37;
  --ink: #1a1a1a;          /* High-Contrast Black */
  --gray: #6e6e73;
  --gray-2: #86868b;
  --text-2: #424245;
  --line: #d2d2d7;
  --bg: #f5f5f7;
  --white: #ffffff;

  /* Feature card colors, from the palette */
  --f1: #f9c2d1;
  --f2: #dfcff2;
  --f3: #f5e6b5;
  --f4: #ffd3dd;
  --f5: #f4cfe6;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: 22px;
  --content: 1024px;
  --edge: max(var(--gutter), calc((100vw - var(--content)) / 2 + var(--gutter)));
  --shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 2px 4px 16px rgba(0, 0, 0, 0.16);
  --ease: cubic-bezier(0, 0, .5, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.47 var(--font);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; letter-spacing: inherit; }
.wrap { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }

/* Global nav */
.gnav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.gnav .wrap { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gnav .logo { display: flex; align-items: center; gap: 6px; color: var(--ink); font: 600 15px/1 var(--display); letter-spacing: -0.01em; }
.gnav .logo:hover { text-decoration: none; }
.gnav .logo svg { width: 17px; height: 17px; color: var(--primary); }
.gnav .logo b { color: var(--primary); font-weight: 600; }
.gnav nav { display: flex; gap: 26px; }
.gnav nav a { color: var(--ink); opacity: 0.8; font-size: 12px; letter-spacing: -0.01em; }
.gnav nav a:hover { opacity: 1; text-decoration: none; color: var(--primary); }
.gnav nav a[aria-current="page"] { opacity: 1; color: var(--primary); }

/* Ribbon */
.ribbon { background: var(--white); text-align: center; padding: 16px var(--gutter); margin: 0; font-size: 14px; line-height: 1.43; color: var(--ink); }
.ribbon a { white-space: nowrap; }

/* Hero */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 80px 0 56px; }
.hero h1 { margin: 0; color: var(--wine); font: 600 80px/1.05 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.hero.sub h1 { font-size: 56px; line-height: 1.07; max-width: 13ch; }
.hero .lede { margin: 14px 0 0; color: var(--gray); font: 600 28px/1.14 var(--display); letter-spacing: 0.007em; max-width: 30ch; }
.hero-art { flex: none; width: 220px; }
.hero.sub .hero-art { width: 150px; }
.hero-art svg { display: block; width: 100%; height: auto; }

/* Chapter nav (who it's for) */
.chapters { overflow-x: auto; scrollbar-width: none; padding: 0 0 72px; }
.chapters::-webkit-scrollbar { display: none; }
.chapters ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0 var(--edge); width: max-content; }
.chapters a { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 104px; padding: 4px 4px 0; color: var(--ink); font-size: 14px; font-weight: 500; text-align: center; line-height: 1.2; }
.chapters a:hover { text-decoration: none; color: var(--primary); }
.chapters .e { font-size: 54px; line-height: 64px; height: 64px; transition: transform .25s ease; }
.chapters a:hover .e { transform: translateY(-3px); }
.chapters a[aria-current="page"] { color: var(--primary); }

/* Shelves */
.shelf { padding: 0 0 72px; position: relative; }
.shelf-head { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter) 8px; }
.shelf-head h2 { margin: 0; font: 600 28px/1.14 var(--display); letter-spacing: 0.007em; }
.shelf-head h2 .a { color: var(--wine); }
.shelf-head h2 .b { color: var(--gray); }

.scroller {
  display: flex; align-items: stretch; gap: 20px; list-style: none; margin: 0;
  padding: 16px var(--edge) 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > li { flex: none; scroll-snap-align: start; }

.paddles { max-width: var(--content); margin: -24px auto 0; padding: 0 var(--gutter); display: flex; justify-content: flex-end; gap: 14px; }
.paddle {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: rgba(210, 210, 215, 0.64); color: rgba(0, 0, 0, 0.56);
  display: grid; place-items: center; transition: background .2s, color .2s, opacity .2s;
}
.paddle:hover { background: rgba(223, 223, 227, 0.7); color: rgba(0, 0, 0, 0.64); }
.paddle:disabled { opacity: 0.42; cursor: default; }
.paddle svg { width: 36px; height: 36px; }

/* Cards: shared */
.card {
  position: relative; overflow: hidden;
  background: var(--white); border-radius: 18px; box-shadow: var(--shadow);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover { box-shadow: var(--shadow-hover); transform: scale(1.0086); }
.card > a { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card > a:hover { text-decoration: none; }
.eyebrow { margin: 0 0 8px; font-size: 12px; line-height: 1.33; font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; }

/* Round arrow button */
.circ {
  position: absolute; right: 22px; bottom: 22px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(210, 210, 215, 0.64); color: rgba(0, 0, 0, 0.56);
  transition: background .2s, color .2s;
}
.circ svg { width: 36px; height: 36px; }
.card:hover .circ { background: rgba(223, 223, 227, 0.8); color: rgba(0, 0, 0, 0.72); }

/* Product tile: white, picture on top, name, small text, arrow */
.tile { width: 313px; height: 500px; }
.tile > a { padding: 0 28px 28px; }
.tile .img { height: 236px; flex: none; display: grid; place-items: center; margin: 0 -28px 12px; }
.tile .img .e { font-size: 112px; line-height: 1; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .14)); transition: transform .4s var(--ease); }
.tile .img img { max-width: 78%; max-height: 196px; object-fit: contain; transition: transform .4s var(--ease); }
.tile:hover .img .e, .tile:hover .img img { transform: scale(1.05); }
.tile .new { margin: 0 0 4px; min-height: 16px; font-size: 12px; line-height: 1.33; font-weight: 600; color: var(--primary); letter-spacing: -0.01em; }
.tile h3 { margin: 0; font: 600 17px/1.24 var(--display); letter-spacing: -0.022em; color: var(--ink); }
.tile .pick { margin: 4px 0 0; font-size: 12px; line-height: 1.33; color: var(--gray); letter-spacing: -0.01em; }
.tile .desc { margin: 10px 0 0; font-size: 14px; line-height: 1.43; color: var(--text-2); letter-spacing: -0.016em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile .row { margin-top: auto; min-height: 36px; display: flex; align-items: center; padding-right: 48px; font-size: 12px; line-height: 1.33; color: var(--ink); }
.tile .circ { right: 22px; bottom: 26px; }

/* Feature card: full color, text on top, big picture at the bottom */
.feature { width: 400px; height: 500px; border-radius: 28px; }
.feature .txt { position: relative; z-index: 1; padding: 28px 28px 0; }
.feature .eyebrow { color: var(--ink); opacity: .78; }
.feature h3 { margin: 0; font: 600 28px/1.14 var(--display); letter-spacing: 0.007em; color: var(--ink); }
.feature .txt p:not(.eyebrow) { margin: 10px 0 0; max-width: 300px; font-size: 14px; line-height: 1.43; color: var(--ink); letter-spacing: -0.016em; }
.feature .art { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.feature .art .e { font-size: 230px; line-height: .86; transform: translateY(14%); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .18)); transition: transform .5s var(--ease); }
.feature:hover .art .e { transform: translateY(10%) scale(1.03); }
.feature .art img { max-width: 82%; max-height: 92%; object-fit: contain; mix-blend-mode: multiply; margin-bottom: 24px; }
.feature .circ { background: rgba(255, 255, 255, 0.82); color: rgba(0, 0, 0, 0.7); z-index: 2; }
.feature:hover .circ { background: var(--white); color: var(--ink); }
.f1 { background: var(--f1); } .f2 { background: var(--f2); } .f3 { background: var(--f3); } .f4 { background: var(--f4); } .f5 { background: var(--f5); }

/* Intro card: first card on a gift shelf */
.intro { width: 313px; height: 500px; background: var(--primary); color: var(--white); }
.intro:hover { transform: none; box-shadow: var(--shadow); }
.intro .txt { position: relative; z-index: 1; padding: 28px 28px 0; }
.intro .eyebrow { color: var(--white); opacity: .9; }
.intro h3 { margin: 0; font: 600 28px/1.14 var(--display); letter-spacing: 0.007em; max-width: 9em; }
.intro .dots { position: absolute; left: -34px; bottom: -36px; width: 420px; display: grid; grid-template-columns: repeat(4, 96px); gap: 12px; transform: rotate(-8deg); }
.intro .dots span { width: 96px; height: 96px; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-size: 46px; box-shadow: inset 0 -4px 10px rgba(0, 0, 0, .08), 0 6px 14px rgba(0, 0, 0, .12); }

/* Category intro colors on the Top 100 page */
.intro.k1 { background: var(--primary); }
.intro.k2 { background: var(--wine); }
.intro.k3 { background: var(--hot); }
.intro.k4 { background: var(--ink); }
.intro.k5 { background: var(--purple); }
.intro.k6 { background: var(--gold); color: var(--ink); }
.intro.k6 .eyebrow { color: var(--ink); }
.intro.k7 { background: var(--red); }
.shelf[id] { scroll-margin-top: 52px; }

/* Audience tiles on the home page */
.aud .img { background: linear-gradient(180deg, #fff 0%, #fdf1f4 100%); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--red); color: var(--white);
  font-size: 14px; line-height: 1.29; font-weight: 400; letter-spacing: -0.016em;
  padding: 8px 16px; border-radius: 980px; border: 0; cursor: pointer;
  transition: background .2s;
}
.btn:hover { background: var(--wine); text-decoration: none; }

/* Message card */
.msg { width: 300px; height: 320px; padding: 28px; border-radius: 28px; display: flex; flex-direction: column; }
.msg .eyebrow { color: var(--text-2); }
.msg.dark { background: var(--ink); color: var(--white); }
.msg.dark .eyebrow { color: var(--gray-2); }
.msg.pink { background: var(--pink); color: var(--wine); }
.msg.pink .eyebrow { color: var(--wine); opacity: .75; }
.msg p.q { margin: 0; font: 600 24px/1.2 var(--display); letter-spacing: 0.009em; flex: 1; }
.msg .btn { align-self: flex-start; }
.msg.dark .btn { background: var(--white); color: var(--ink); }
.msg.dark .btn:hover { background: var(--pink); }
.msg.pink .btn { background: var(--wine); }
.msg .btn.done { background: var(--primary); color: var(--white); }

/* Long messages and poems */
.msg.long { width: 420px; height: auto; min-height: 320px; }
.msg.long p.q { font: 400 18px/1.5 var(--font); letter-spacing: -0.01em; white-space: pre-line; margin-bottom: 20px; }
.msg p.q { white-space: pre-line; }
.more-link { max-width: var(--content); margin: -40px auto 56px; padding: 0 var(--gutter); font-size: 17px; }
.more-link a::after { content: ""; }

/* Printables */
.print-grid { list-style: none; margin: 0 auto; padding: 16px var(--gutter) 0; max-width: var(--content); display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.card.print { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.card.print:hover { transform: none; }
.print .sheet { background: var(--bg); border-radius: 12px; padding: 14px; display: grid; place-items: center; }
.print .sheet img { width: 100%; height: auto; aspect-ratio: 8.5 / 11; object-fit: contain; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.print h3 { margin: 0; font: 600 17px/1.24 var(--display); }
.print .acts { display: flex; gap: 10px; }
.btn.light { background: var(--bg); color: var(--ink); }
.btn.light:hover { background: var(--pink); color: var(--ink); }

/* FAQ */
.faq { max-width: var(--content); margin: 0 auto; padding: 8px var(--gutter) 0; }
.faq-list { border-top: 1px solid var(--line); margin-top: 16px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font: 600 21px/1.24 var(--display); letter-spacing: 0.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--gray); border-bottom: 2px solid var(--gray); transform: translateY(-75%) rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { margin: 0 0 24px; color: var(--ink); font-size: 17px; max-width: 70ch; }

/* Footer */
.foot { background: var(--bg); color: var(--gray); font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; padding: 0 0 22px; }
.foot .wrap > * { border-top: 1px solid var(--line); }
.foot .notes { padding: 17px 0 11px; }
.foot .notes p { margin: 0 0 8px; }
.foot .cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; padding: 20px 0 24px; }
.foot h4 { margin: 0 0 8px; color: var(--ink); font-size: 12px; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 8px; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--ink); }
.foot .legal { padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* Text pages */
.prose { max-width: 692px; margin: 0 auto; padding: 72px var(--gutter) 80px; }
.prose h1 { color: var(--wine); font: 600 48px/1.08 var(--display); margin: 0 0 20px; }
.prose h2 { font: 600 24px/1.17 var(--display); margin: 36px 0 8px; }
.prose p { margin: 0 0 14px; }

/* Smaller screens */
@media (max-width: 1068px) {
  .hero h1 { font-size: 64px; }
  .hero.sub h1 { font-size: 48px; }
}
@media (max-width: 734px) {
  :root { --gutter: 16px; }
  .gnav nav a:not(.keep) { display: none; }
  .gnav nav { gap: 20px; }
  .hero { padding: 48px 0 40px; align-items: flex-start; }
  .hero h1 { font-size: 48px; line-height: 1.08; }
  .hero.sub h1 { font-size: 36px; line-height: 1.1; }
  .hero .lede { font-size: 21px; line-height: 1.19; }
  .hero-art { width: 96px; }
  .hero.sub .hero-art { width: 72px; }
  .chapters { padding-bottom: 48px; }
  .chapters a { width: 84px; font-size: 12px; }
  .chapters .e { font-size: 44px; line-height: 52px; height: 52px; }
  .shelf { padding-bottom: 48px; }
  .shelf-head h2 { font-size: 24px; line-height: 1.17; }
  .scroller { gap: 14px; }
  .tile, .intro { width: min(72vw, 280px); height: 460px; }
  .tile .img { height: 210px; }
  .tile .img .e { font-size: 96px; }
  .feature { width: min(84vw, 340px); height: 460px; }
  .feature h3 { font-size: 24px; line-height: 1.17; }
  .feature .art .e { font-size: 190px; }
  .intro h3 { font-size: 24px; }
  .msg { width: min(74vw, 280px); height: 280px; }
  .msg.long { width: min(84vw, 340px); height: auto; }
  .more-link { margin-top: -24px; margin-bottom: 40px; }
  .msg p.q { font-size: 21px; }
  .paddles { display: none; }
  .faq summary { font-size: 19px; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
}