/* ZenLoaf components. Every value is a token from tokens.json. */
body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); }

.zl-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border: 0; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--on-ink); font: 500 18px/1 var(--font-sans); text-decoration: none; cursor: pointer; }
.zl-btn:hover { background: var(--ink-muted); }
.zl-link { display: inline-block; align-self: flex-start; text-align: left; font: 400 18px/1.4 var(--font-sans); color: var(--sienna); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.zl-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.zl-btn:focus-visible, .zl-link:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

.zl-stop { display: inline-block; vertical-align: baseline; margin-left: 4px; overflow: visible; }
.zl-wash, .zl-mark { display: block; overflow: visible; }

.zl-label { display: flex; flex-direction: column; gap: var(--space-1); }
.zl-label-rule { width: 28px; height: var(--stroke-tag); background: var(--ink); margin-bottom: var(--space-2); }
.zl-label-title { font: 600 16px/1.3 var(--font-sans); color: var(--ink); }
.zl-label-line { font: 400 13px/1.55 var(--font-mono); color: var(--ink-muted); }
.zl-label-dusk .zl-label-rule { background: var(--lantern); }
.zl-label-dusk .zl-label-title { color: var(--dusk-ink); }
.zl-label-dusk .zl-label-line { color: var(--dusk-muted); }

.zl-tag { border-top: var(--stroke-tag) solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.zl-tag-head { display: flex; align-items: center; gap: 10px; }
.zl-tag-name { font: 600 20px/1.2 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }
.zl-tag-kind { font: 400 17px/1.4 var(--font-sans); }
.zl-tag-desc { font: 400 15px/1.5 var(--font-sans); color: var(--ink-muted); }
.zl-tag-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.zl-tag-time { font: 600 32px/1 var(--font-sans); letter-spacing: -0.02em; }
.zl-tag-price { font: 400 13px/1.55 var(--font-mono); color: var(--ink-muted); }

.zl-step { display: flex; flex-direction: column; gap: 18px; }
.zl-step-box { position: relative; height: 250px; border: var(--stroke-panel) solid var(--sheet-ink); border-radius: var(--radius-panel); background: var(--sheet); display: flex; align-items: center; justify-content: center; }
.zl-step-num { position: absolute; left: var(--space-4); top: 12px; font: 500 40px/1 var(--font-sans); color: var(--sheet-ink); }
.zl-step-art { width: 100%; max-width: 290px; height: auto; display: block; }
.zl-step-text { display: flex; flex-direction: column; gap: 6px; }
.zl-step-title { font: 600 22px/1.3 var(--font-sans); }
.zl-step-body { font: 400 16px/1.5 var(--font-sans); color: var(--ink-muted); }

.zl-portrait { position: relative; flex: none; }
.zl-portrait-wash { position: absolute; left: -4px; top: -2px; overflow: visible; }
.zl-portrait-ring { position: absolute; inset: 0; border-radius: var(--radius-pill); overflow: hidden; border: var(--stroke-tag) solid var(--ink); box-sizing: border-box; background: var(--paper-raised); display: flex; align-items: center; justify-content: center; }
.zl-portrait-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zl-portrait-empty { font: 400 13px/1.4 var(--font-mono); color: var(--ink-muted); }

.zl-host { border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--space-7); display: flex; gap: 36px; align-items: center; background: var(--paper-raised); box-shadow: var(--shadow-card); }
.zl-host-text { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.zl-host-names { display: flex; flex-direction: column; gap: 4px; }
.zl-host-name { font: 600 32px/1.1 var(--font-sans); letter-spacing: -0.02em; }
.zl-host-role { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.zl-host-bio { font: 400 17px/1.5 var(--font-sans); color: var(--ink-muted); }
.zl-host-stats { display: flex; gap: 30px; margin-top: 6px; }
.zl-host-stat { display: flex; flex-direction: column; }
.zl-host-stat b { font: 600 26px/1.2 var(--font-sans); }
.zl-host-stat span { font: 400 13px/1.5 var(--font-mono); color: var(--ink-muted); }

.zl-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-7); }
.zl-section-title { margin: 0; font: 600 56px/1 var(--font-sans); letter-spacing: -0.035em; }
.zl-section-note { font: 400 18px/1.5 var(--font-sans); color: var(--ink-muted); text-align: right; max-width: 620px; }

.zl-dusk { position: relative; color: var(--dusk-ink); }
.zl-dusk-ground { position: absolute; inset: 0; overflow: visible; }
.zl-dusk-inner { position: relative; padding: 84px 96px; }
.zl-dusk .zl-link { color: var(--lantern); }