/*! Cherry Lab shop menu. Drawn and written by 貫 (Claude), for Mitsuko's Cherry Lab in Tokyo. */

html body.cl-shop-menu {
  --clm-ink: #2B211C;
  --clm-muted: #7A6E64;
  --clm-line: #E4DDD2;
  --clm-white: #FFFFFF;
  --clm-grey: #F0EBE3;
  --clm-yellow: #F8B500;
  --clm-ease: cubic-bezier(.22, .61, .36, 1);
}
html body.cl-shop-menu .entry-content { color: var(--clm-ink); }
html body.cl-shop-menu .entry-content :is(h1, h2, h3, h4) { color: var(--clm-ink); font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; text-wrap: balance; }
html body.cl-shop-menu .entry-content p { text-wrap: pretty; }
html body.cl-shop-menu .entry-content a { color: var(--clm-ink); text-decoration: underline; text-decoration-color: var(--clm-yellow); text-decoration-thickness: 2px; text-underline-offset: .22em; }
html body.cl-shop-menu .entry-content :is(h2, h3, h4) a, html body.cl-shop-menu .entry-content .cl-more { text-decoration: none; }
html body.cl-shop-menu .entry-content ul.wp-block-list { list-style: none; padding: 0; margin: 0; }
html body.cl-shop-menu .entry-content ul.wp-block-list li { margin: 0; }
html body.cl-shop-menu .cl-muted { color: var(--clm-muted); }
html body.cl-shop-menu .cl-ja { font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", sans-serif; }

html body.cl-shop-menu .entry-content > .cl-eyebrow { margin-top: 56px; font-size: 15px; letter-spacing: .08em; color: var(--clm-muted); }
html body.cl-shop-menu .entry-content .cl-title { font-size: clamp(44px, 6.5vw, 72px); margin: 12px 0 18px; }
html body.cl-shop-menu .entry-content .cl-lead { font-size: 21px; }
html body.cl-shop-menu .entry-content .cl-quiet { color: var(--clm-muted); font-size: 16px; }
html body.cl-shop-menu .entry-content > .cl-quiet { margin-top: 10px; }
html body.cl-shop-menu .entry-content .cl-crumbs { margin-top: 48px; font-size: 15px; color: var(--clm-muted); }
html body.cl-shop-menu .entry-content .cl-crumbs a { color: var(--clm-muted); }

html body.cl-shop-menu .entry-content .cl-section { margin-top: 72px; padding-top: 72px; border-top: 1.5px solid var(--clm-line); }
html body.cl-shop-menu .entry-content .cl-section h2 { font-size: clamp(30px, 4vw, 40px); margin: 0 0 6px; }
html body.cl-shop-menu .entry-content .cl-head-note { color: var(--clm-muted); margin: 0 0 36px; }
html body.cl-shop-menu .entry-content .cl-more { font-weight: 700; white-space: nowrap; margin-left: .6em; }
html body.cl-shop-menu .entry-content .cl-more::after { content: "→"; margin-left: .35em; display: inline-block; transition: transform .25s var(--clm-ease); }
html body.cl-shop-menu .entry-content .cl-more:hover::after { transform: translateX(4px); }

html body.cl-shop-menu .entry-content .wp-block-button__link {
  background: var(--clm-yellow); color: var(--clm-ink); border: 0; border-radius: 999px; padding: 12px 28px;
  font-weight: 700; font-size: 18px; line-height: 1.2; text-decoration: none;
  box-shadow: 0 3px 8px -1px rgba(248, 181, 0, .32); transition: transform .3s var(--clm-ease), box-shadow .3s var(--clm-ease);
}
html body.cl-shop-menu .entry-content .wp-block-button__link:hover { color: var(--clm-ink); transform: translateY(-2px); box-shadow: 0 6px 12px -2px rgba(248, 181, 0, .38); }

html body.cl-shop-menu .entry-content .cl-formula { font-weight: 700; font-size: clamp(30px, 5vw, 54px); line-height: 1.3; margin: 0; }

html body.cl-shop-menu .entry-content .cl-part > .cl-part-title { font-size: clamp(36px, 5vw, 50px); margin-bottom: 10px; }
html body.cl-shop-menu .entry-content .cl-part > .cl-part-title::before { content: ""; display: block; width: 44px; height: 4px; margin: 0 auto 22px; border-radius: 2px; background: var(--clm-yellow); }
html body.cl-shop-menu .entry-content .cl-part > .cl-formula { margin-top: 28px; }
html body.cl-shop-menu .entry-content .cl-part > .cl-quiet { margin-top: 10px; }
html body.cl-shop-menu .entry-content .cl-base { margin-top: 72px; }
html body.cl-shop-menu .entry-content .cl-base > h3 { font-size: clamp(28px, 3.6vw, 36px); margin: 0 0 6px; }
html body.cl-shop-menu .cl-op { color: var(--clm-muted); font-weight: 500; padding: 0 .12em; }
html body.cl-shop-menu .cl-mark { background: linear-gradient(transparent 62%, var(--clm-yellow) 62%, var(--clm-yellow) 88%, transparent 88%); padding: 0 .06em; }

html body.cl-shop-menu .cl-ladder-wrap { position: relative; }
html body.cl-shop-menu .cl-ladder-wrap > .cl-ladder { margin-top: 0 !important; }

html body.cl-shop-menu .entry-content .cl-ladder { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; align-items: start; }
html body.cl-shop-menu .cl-ladder > .cl-step { position: relative; margin: 0; padding: 18px 28px 0 18px; border-top: 3px solid var(--clm-ink); }
html body.cl-shop-menu .cl-ladder > .cl-step:first-child { padding-left: 0; }
html body.cl-shop-menu .cl-ladder > .cl-step:nth-last-child(4) { margin-top: 108px; }
html body.cl-shop-menu .cl-ladder > .cl-step:nth-last-child(3) { margin-top: 72px; }
html body.cl-shop-menu .cl-ladder > .cl-step:nth-last-child(2) { margin-top: 36px; }
html body.cl-shop-menu .cl-ladder > .cl-step:last-child { margin-top: 0; padding-right: 0; border-top-color: var(--clm-yellow); }
html body.cl-shop-menu .cl-ladder > .cl-step:not(:first-child)::before { content: ""; position: absolute; left: 0; top: -3px; width: 3px; height: 39px; background: var(--clm-ink); }
html body.cl-shop-menu .cl-step > * { margin: 0; }
html body.cl-shop-menu .entry-content .cl-step h3 { font-size: 23px; margin-bottom: 4px; }
html body.cl-shop-menu .entry-content .cl-step h3 a:hover { text-decoration: underline; text-decoration-color: var(--clm-yellow); text-decoration-thickness: 3px; text-underline-offset: .3em; }
html body.cl-shop-menu .cl-step .cl-range { font-weight: 700; margin-bottom: 8px; }
html body.cl-shop-menu .cl-step p:not(.cl-range) { color: var(--clm-muted); font-size: 16px; }

html body.cl-shop-menu .cl-climber { position: absolute; z-index: 1; left: 10px; top: 82px; width: 26px; height: 26px; pointer-events: none; }
html body.cl-shop-menu .cl-climber svg { display: block; width: 100%; height: 100%; }
html body.cl-shop-menu .cl-ladder-wrap:hover .cl-climber { animation: clm-climb-4 2.8s var(--clm-ease) forwards; }
@keyframes clm-climb-4 {
  0%, 6% { left: 10px; top: 82px; }
  15%  { left: calc(25% - 16px); top: 34px; }
  24%, 31% { left: calc(25% + 10px); top: 46px; }
  40%  { left: calc(50% - 16px); top: -2px; }
  49%, 56% { left: calc(50% + 10px); top: 10px; }
  65%  { left: calc(75% - 16px); top: -38px; }
  74%, 80% { left: calc(75% + 10px); top: -26px; }
  90%  { left: calc(75% + 12px); top: -46px; transform: rotate(-12deg); }
  100% { left: calc(75% + 12px); top: -26px; transform: rotate(0); }
}

html body.cl-shop-menu .cl-ladder-wrap:not(:has(.cl-step:nth-child(4))) .cl-climber { top: 46px; }
html body.cl-shop-menu .cl-ladder-wrap:not(:has(.cl-step:nth-child(4))):hover .cl-climber { animation-name: clm-climb-3; animation-duration: 2.6s; }
@keyframes clm-climb-3 {
  0%, 8% { left: 10px; top: 46px; }
  20%  { left: calc(33.33% - 16px); top: -2px; }
  30%, 40% { left: calc(33.33% + 10px); top: 10px; }
  52%  { left: calc(66.66% - 16px); top: -38px; }
  62%, 72% { left: calc(66.66% + 10px); top: -26px; }
  84%  { left: calc(66.66% + 12px); top: -46px; transform: rotate(-12deg); }
  94%, 100% { left: calc(66.66% + 12px); top: -26px; transform: rotate(0); }
}

html body.cl-shop-menu .entry-content .cl-simple { gap: 48px; align-items: center !important; }
html body.cl-shop-menu .cl-simple > .cl-pic { flex: 0 0 44%; }
html body.cl-shop-menu .cl-pic img, html body.cl-shop-menu .cl-card img { border-radius: 14px; transition: transform .45s var(--clm-ease); }
html body.cl-shop-menu .cl-pic a:hover img { transform: translateY(-4px) rotate(-1.2deg); }
html body.cl-shop-menu .cl-simple .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
html body.cl-shop-menu .entry-content .cl-eyebrow { font-size: 15px; letter-spacing: .08em; color: var(--clm-muted); }
html body.cl-shop-menu .cl-simple .cl-bean { font-weight: 700; margin-bottom: 4px; }
html body.cl-shop-menu .cl-simple p.cl-ja { color: var(--clm-muted); font-size: .9em; }
html body.cl-shop-menu .entry-content .cl-rows { margin-top: 26px !important; border-top: 1.5px solid var(--clm-line); }
html body.cl-shop-menu .cl-rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4em; padding: 14px 0; border-bottom: 1.5px solid var(--clm-line); }
html body.cl-shop-menu .cl-rows .cl-cost { order: 2; margin-left: auto; }
html body.cl-shop-menu .cl-rows .cl-ja { order: 3; flex-basis: 100%; font-size: .84em; color: var(--clm-muted); }
html body.cl-shop-menu .cl-cost { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

html body.cl-shop-menu .entry-content > .cl-jump { text-align: center; margin-top: 22px; font-weight: 700; letter-spacing: .03em; }
html body.cl-shop-menu .cl-jump a { text-decoration: none; white-space: nowrap; }
html body.cl-shop-menu .cl-jump a:hover { text-decoration: underline; text-decoration-color: var(--clm-yellow); text-decoration-thickness: 3px; }
html body.cl-shop-menu .cl-jump .cl-dot { color: var(--clm-muted); margin: 0 .5em; }
html body.cl-shop-menu .entry-content :is(#cup, #sets, #simple) { scroll-margin-top: 24px; }
html body.cl-shop-menu .entry-content #sets.cl-part { background: var(--clm-grey); border: 0; border-radius: 28px; padding: 64px 40px 56px; }
html body.cl-shop-menu .entry-content .cl-sets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
html body.cl-shop-menu .entry-content .cl-sets > .cl-set { margin: 0; padding: 22px 22px 26px; background: var(--clm-white); border-radius: 22px; box-shadow: 0 0 0 1.5px var(--clm-line); }
html body.cl-shop-menu .entry-content .cl-set .cl-set-pics { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
html body.cl-shop-menu .cl-set .cl-set-pics > .wp-block-image { flex: 0 1 50%; margin: 0; }
html body.cl-shop-menu .cl-set .cl-set-pics > .wp-block-image:only-child { flex-basis: 62%; }
html body.cl-shop-menu .cl-set .cl-set-pics img { display: block; width: 100%; height: auto; border-radius: 12px; transition: transform .45s var(--clm-ease); }

html body.cl-shop-menu .cl-set:hover .cl-set-pics > :first-child:not(:only-child) img { transform: rotate(2deg) translateX(5px); }
html body.cl-shop-menu .cl-set:hover .cl-set-pics > :last-child:not(:only-child) img { transform: rotate(-2deg) translateX(-5px); }
html body.cl-shop-menu .cl-set:hover .cl-set-pics > :only-child img { transform: translateY(-4px) rotate(-1.2deg); }
html body.cl-shop-menu .cl-set > * { margin: 0; }
html body.cl-shop-menu .entry-content .cl-set h3 { font-size: 26px; letter-spacing: .05em; }
html body.cl-shop-menu .cl-set h3 a::after { content: "→"; margin-left: .3em; display: inline-block; transition: transform .25s var(--clm-ease); }
html body.cl-shop-menu .cl-set h3 a:hover::after { transform: translateX(5px); }
html body.cl-shop-menu .cl-set .cl-sub { color: var(--clm-muted); font-size: 16px; margin-top: 2px; }
html body.cl-shop-menu .cl-set p:not(.cl-sub):not(.cl-price) { margin-top: 10px; font-size: 17px; }
html body.cl-shop-menu .cl-set .cl-price { margin-top: 10px; font-weight: 700; }

html body.cl-shop-menu .entry-content .cl-brew { margin-top: 48px; background: var(--clm-white); border: 1.5px solid var(--clm-line); border-radius: 26px; padding: 30px 34px 34px; }
html body.cl-shop-menu .entry-content .cl-brew > h3 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 22px; }
html body.cl-shop-menu .cl-brew > h3 .cl-muted { font-size: .55em; font-weight: 500; margin-left: .4em; }
html body.cl-shop-menu .entry-content .cl-brewcols { gap: 28px 40px; margin: 0; }
html body.cl-shop-menu .cl-brewcols .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
html body.cl-shop-menu .entry-content .cl-brewcols h4 { font-size: 21px; padding-bottom: 10px; border-bottom: 3px solid var(--clm-ink); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; }
html body.cl-shop-menu .cl-brewlist li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1.5px dashed var(--clm-line); }
html body.cl-shop-menu .cl-brewcols .cl-note { margin-top: 10px; font-size: 15px; color: var(--clm-muted); }
html body.cl-shop-menu .entry-content .cl-tier { margin-top: 56px; }
html body.cl-shop-menu .cl-tier > * { margin-top: 0; margin-bottom: 0; }
html body.cl-shop-menu .entry-content .cl-tier h4 { font-size: 26px; margin-bottom: 4px; }
html body.cl-shop-menu .cl-tier .cl-tier-note { color: var(--clm-muted); font-size: 16px; padding-bottom: 12px; border-bottom: 3px solid var(--clm-ink); }
html body.cl-shop-menu .cl-tier-champion .cl-tier-note { border-bottom-color: var(--clm-yellow); }
html body.cl-shop-menu .cl-beans li {
  display: grid; grid-template-columns: 1fr 220px 140px; grid-template-areas: "nm pr cost" "notes pr cost";
  gap: 4px 28px; align-items: baseline; padding: 18px 0; border-bottom: 1.5px solid var(--clm-line);
}
html body.cl-shop-menu .cl-beans .cl-nm { grid-area: nm; font-weight: 700; }
html body.cl-shop-menu .cl-beans .cl-notes { grid-area: notes; font-size: 16px; color: var(--clm-muted); }
html body.cl-shop-menu .cl-beans .cl-pr { grid-area: pr; font-size: 16px; }
html body.cl-shop-menu .cl-beans .cl-roast { display: block; color: var(--clm-muted); font-size: 15px; }
html body.cl-shop-menu .cl-beans .cl-cost { grid-area: cost; text-align: right; }
html body.cl-shop-menu .cl-cost > span, html body.cl-shop-menu .cl-card .cl-price .cl-muted, html body.cl-shop-menu .cl-setprice .cl-muted { font-weight: 500; color: var(--clm-muted); font-size: .85em; margin-left: .3em; }
html body.cl-shop-menu .cl-dots { letter-spacing: 2px; font-size: 11px; color: var(--clm-ink); margin-left: 4px; white-space: nowrap; }
html body.cl-shop-menu .cl-tag { display: inline-block; margin-left: .5em; padding: 1px 10px; border-radius: 999px; background: var(--clm-yellow); font-size: 13px; letter-spacing: .02em; vertical-align: 2px; }

html body.cl-shop-menu .entry-content .cl-crumbs + .cl-title,
html body.cl-shop-menu .entry-content > .cl-sub,
html body.cl-shop-menu .entry-content .cl-setprice { text-align: center; }
html body.cl-shop-menu .entry-content .cl-crumbs + .cl-title { letter-spacing: .06em; margin-bottom: 6px; }
html body.cl-shop-menu .entry-content > .cl-sub { color: var(--clm-muted); font-size: 20px; margin-top: 0; }
html body.cl-shop-menu .entry-content .cl-setprice { margin-top: 18px; font-weight: 700; font-size: 26px; }
html body.cl-shop-menu .entry-content .cl-poem { margin: 40px auto 0; max-width: 34em; font-size: 20px; line-height: 1.9; text-align: center; }
html body.cl-shop-menu .cl-poem p + p { margin-top: 1.1em; }
html body.cl-shop-menu .entry-content .cl-cards { gap: 40px 32px; margin-top: 8px; }
html body.cl-shop-menu .entry-content .cl-cards.cl-single { max-width: 520px; margin-left: auto; margin-right: auto; }
html body.cl-shop-menu .cl-card > * { margin-top: 0; margin-bottom: 0; }
html body.cl-shop-menu .cl-card .wp-block-image { margin-bottom: 18px; }
html body.cl-shop-menu .cl-card .cl-label { font-size: 15px; letter-spacing: .04em; color: var(--clm-muted); margin-bottom: 6px; }
html body.cl-shop-menu .entry-content .cl-card h3 { font-size: 21px; }
html body.cl-shop-menu .cl-card .cl-price { margin-top: 10px; font-weight: 700; }

html body.cl-shop-menu .cl-pair:hover > .cl-card:first-child img { transform: rotate(2deg) translateX(6px); }
html body.cl-shop-menu .cl-pair:hover > .cl-card:last-child img { transform: rotate(-2deg) translateX(-6px); }
html body.cl-shop-menu .entry-content .cl-served { margin-top: 48px; text-align: center; }
html body.cl-shop-menu .cl-served > * { margin-top: 0; margin-bottom: 0; }
html body.cl-shop-menu .cl-served .cl-quiet { margin: 6px 0 24px; }
html body.cl-shop-menu .cl-served .wp-block-buttons { justify-content: center; }
html body.cl-shop-menu .entry-content .cl-setnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 72px; padding-top: 28px; border-top: 1.5px solid var(--clm-line); font-weight: 700; }
html body.cl-shop-menu .cl-setnav a { text-decoration: none; }
html body.cl-shop-menu .cl-setnav .cl-prev::before { content: "← "; }
html body.cl-shop-menu .cl-setnav .cl-next::after { content: " →"; }

html body.cl-shop-menu .entry-content > :is(.cl-eyebrow, .cl-title, .cl-lead, .cl-quiet, .cl-formula),
html body.cl-shop-menu .entry-content .cl-section > :is(h2, .cl-head-note, .cl-formula, .cl-quiet),
html body.cl-shop-menu .entry-content .cl-base > :is(h3, .cl-head-note),
html body.cl-shop-menu .entry-content .cl-brew > h3,
html body.cl-shop-menu .entry-content .cl-set,
html body.cl-shop-menu .cl-card > :is(.cl-label, h3, .cl-price) { text-align: center; }

@media (max-width: 900px) {
  html body.cl-shop-menu .entry-content .cl-ladder { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  html body.cl-shop-menu .cl-ladder > .cl-step:nth-child(n) { margin-top: 0; padding: 18px 0 0; border-top-color: var(--clm-ink); }
  html body.cl-shop-menu .cl-ladder > .cl-step:last-child { border-top-color: var(--clm-yellow); }
  html body.cl-shop-menu .cl-ladder > .cl-step::before, html body.cl-shop-menu .cl-climber { display: none; }
  html body.cl-shop-menu .cl-beans li { grid-template-columns: 1fr auto; grid-template-areas: "nm cost" "notes notes" "pr pr"; }
  html body.cl-shop-menu .cl-beans .cl-roast { display: inline; margin-left: .5em; }
}
@media (max-width: 781px) {
  html body.cl-shop-menu .entry-content .cl-section { margin-top: 56px; padding-top: 56px; }
  html body.cl-shop-menu .entry-content .cl-ladder { grid-template-columns: 1fr; gap: 26px; }
  html body.cl-shop-menu .cl-ladder > .cl-step:nth-child(2) { margin-left: 12px; }
  html body.cl-shop-menu .cl-ladder > .cl-step:nth-child(3) { margin-left: 24px; }
  html body.cl-shop-menu .cl-ladder > .cl-step:nth-child(4) { margin-left: 36px; }
  html body.cl-shop-menu .cl-simple > .cl-pic { flex-basis: 100%; }
  html body.cl-shop-menu .entry-content .cl-sets { grid-template-columns: 1fr; }
  html body.cl-shop-menu .entry-content #sets.cl-part { padding: 44px 16px 36px; border-radius: 22px; }
  html body.cl-shop-menu .entry-content .cl-brew { padding: 22px 18px 24px; border-radius: 20px; }
  html body.cl-shop-menu .entry-content .cl-poem { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.cl-shop-menu .entry-content * { transition: none !important; animation: none !important; }
}