/* Components for recipe pages built with tools/kit.py: step spacing, tips, signs, finale, folding scheme, photo pairs. */
.instr p{margin:0}
.instr p+p{margin-top:.7em}
.sbody.one{grid-template-columns:1fr}
.kbnote{text-align:center;font-size:.85rem;margin-top:10px}
.tip.warn{background:var(--sheet)}
.tip.warn .tag{background:#b3261e;color:#fff}
.signs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.signs li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.signs li::before{content:"";width:22px;height:22px;margin-top:1px;border:2px solid var(--ink);border-radius:7px;
  background:var(--butter) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23141210' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.signs li>span{min-width:0}
.subs{margin:8px 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px}
.store .vh{font-size:clamp(1.7rem,4.6vw,2.7rem)}

.photo i,.say i,.sub i,.center i{font-style:italic}
/* folding scheme */
.foldbox .label{display:block}
.fold{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr;align-items:stretch;gap:6px;margin-top:16px}
.fold-arrow{width:30px;height:auto;align-self:center}
.fstep{position:relative;background:var(--tile);border:2.5px solid var(--ink);border-radius:16px;padding:10px 10px 12px;min-width:0}
.fstep .n{position:absolute;top:-13px;left:-11px;width:34px;height:34px;border-radius:50%;background:var(--butter);border:2.5px solid var(--ink);
  font-family:var(--display);font-size:1.05rem;display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);z-index:1}
.fold-svg{display:block;width:100%;height:auto}
.fstep b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1rem;letter-spacing:.02em;margin:2px 0 4px}
.fstep p{font-size:.93rem;line-height:1.35}
/* finale photos */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.duo .photo{aspect-ratio:3/4}
.duo .photo:first-child{rotate:-1.5deg}
.duo .photo:last-child{rotate:1.5deg}
.duo .photo img{animation-duration:20s}
@media (max-width:440px){.brand{font-size:.72rem;letter-spacing:.02em;padding:5px 9px}}
@media (max-width:620px){
  .fold{grid-template-columns:1fr;gap:8px}
  .fold-arrow{rotate:90deg;justify-self:center;width:26px}
  .fstep{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center}
  .duo{gap:12px}
  .duo .photo .tag{font-size:.62rem;left:8px;bottom:8px;padding:3px 7px}
}