/* /coffee.html — MTC */
.c-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, var(--accent-soft), transparent 70%); }
.c-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 7vw, 48px); line-height: 1.4; margin: 0 0 16px; }
.c-hero .lead { color: var(--ink-2); max-width: 40em; margin: 0; }
.c-note { margin: 18px 0 0; font-size: 12px; color: var(--muted); }

.c-stages { list-style: none; margin: 0; padding: 0; position: relative; }
.c-stages::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent), var(--teal)); opacity: .35; }
@media (min-width: 760px) { .c-stages::before { left: 31px; } }
.c-stage { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0 30px; position: relative; }
@media (min-width: 760px) { .c-stage { grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding-bottom: 44px; } }
.c-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--accent); color: var(--accent); font: 700 14px/1 var(--sans); position: relative; z-index: 1; }
@media (min-width: 760px) { .c-num { width: 64px; height: 64px; font-size: 18px; } }
.c-en { margin: 6px 0 0; font-size: 11px; letter-spacing: .22em; color: var(--muted); font-weight: 700; }
.c-body h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 4.6vw, 26px); margin: 2px 0 6px; }
.c-body > p { margin: 0 0 14px; color: var(--ink-2); max-width: 36em; }
.c-media { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 760px; }
@media (min-width: 640px) { .c-media { grid-template-columns: 3fr 2fr; } }
.c-ph { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius); display: grid; place-items: center; align-content: center; gap: 8px; position: relative; overflow: hidden; border: 1px solid var(--rule); }
.c-ph.photo { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--teal) 14%, var(--surface))); }
.c-ph.video { background: var(--surface-2); aspect-ratio: 16 / 10; }
@media (min-width: 640px) { .c-ph.video { aspect-ratio: auto; } }
.c-ph figcaption { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .08em; background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 3px 10px; border-radius: 999px; }
.c-icon { width: 72px; height: 72px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c-play { width: 44px; height: 44px; fill: none; stroke: var(--muted); stroke-width: 2; }
.c-play path { fill: var(--muted); stroke: none; }

/* スクロールで現れる（JS が .ready を付けたときだけ隠す。JS なし・reduced-motion なら常時表示） */
.js-anim .c-stage .c-body { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js-anim .c-stage.in .c-body { opacity: 1; transform: none; }
.c-stage.in[data-anim="grow"] .c-icon { animation: c-grow 1.2s ease-out both; transform-origin: 50% 90%; }
.c-stage.in[data-anim="drop"] .c-icon { animation: c-drop .9s cubic-bezier(.3, 1.4, .5, 1) both; }
.c-stage.in[data-anim="spin"] .c-icon circle { animation: c-spin 8s linear infinite; transform-origin: 24px 16px; transform-box: view-box; }
.c-stage.in[data-anim="sift"] .c-icon { animation: c-sift .5s ease-in-out 3; }
.c-stage.in[data-anim="stamp"] .c-icon { animation: c-stamp .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.c-stage.in[data-anim="slide"] .c-icon { animation: c-slide 1.2s ease-out both; }
.c-stage.in[data-anim="flicker"] .c-icon { animation: c-flicker 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes c-grow { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes c-drop { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes c-spin { to { transform: rotate(360deg); } }
@keyframes c-sift { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes c-stamp { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes c-slide { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes c-flicker { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.08) scaleX(.96); } }

/* lot */
.c-lot-lead { color: var(--ink-2); margin: 0 0 14px; max-width: 40em; }
.c-lot-form { display: flex; gap: 8px; max-width: 460px; }
.c-lot-form .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.c-lot-try { font-size: 13px; color: var(--muted); margin: 8px 0 20px; }
.lot-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.lot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 12px; }
.lot-head h3 { margin: 0; font: 700 22px/1.3 var(--sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lot-sample { margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--muted); border-radius: 8px; font-size: 13px; color: var(--ink-2); }
.lot-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; }
@media (min-width: 760px) { .lot-spec { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lot-spec div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.lot-spec dt { font-size: 11px; color: var(--muted); }
.lot-spec dd { margin: 0; font-size: 13px; font-weight: 700; word-break: break-word; }
.lot-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lot-tl > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 18px; }
.lot-tl > li::before { content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--rule); }
.lot-tl > li:last-child::before { display: none; }
.lot-tl > li.done::before { background: var(--accent); }
.lot-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--rule); background: var(--surface); display: grid; place-items: center; font: 700 11px/1 var(--sans); color: var(--muted); }
.lot-tl li.done .lot-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lot-tl li.current .lot-dot { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }
.lot-tl li.todo { color: var(--muted); }
.lot-stage-name { font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 3px; }
.lot-now { font-size: 11px; background: var(--accent); color: var(--accent-ink); padding: 2px 8px; border-radius: 999px; }
.lot-ev { margin-top: 6px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 14px; }
.lot-ev .meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.lot-ev p { margin: 4px 0 0; }
.lot-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-top: 8px; }
.lot-media img, .lot-media video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--rule); }
.lot-track { margin-top: 8px; }
.lot-err { color: #c0392b; }