/* The Papa - substitution finder.
   Tokens mirrored from theme/the-papa/assets/css/tokens.css. White Lot rules:
   no tints, no gradients, no shadows, no coloured buttons. The only colour is
   the yarn, and this page has no yarn on it, so it has no colour. */
:root{
  --tp-bg:#FFFFFF; --tp-ink:#161616; --tp-ink-2:#4A4A4A; --tp-mute:#767676;
  --tp-hair:#ECECEC; --tp-paper:#FAF8F4;
  --tp-font-ui:"Instrument Sans","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  --tp-font-hand:"Caveat","PingFang SC",cursive;
  --tp-max:1100px; --tp-pad:3.5rem; --tp-section:7rem;
  --tp-lh-body:1.6; --tp-track-tight:-0.01em;
}
@media (max-width:760px){ :root{ --tp-pad:1.25rem; --tp-section:4rem; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tp-bg);color:var(--tp-ink);
  font:400 16px/var(--tp-lh-body) var(--tp-font-ui);
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--tp-max);margin:0 auto;padding:0 var(--tp-pad)}

/* header */
header{padding:2rem 0 0}
.wordmark{font:500 30px/1 var(--tp-font-hand);color:var(--tp-ink);text-decoration:none}
.tagline{color:var(--tp-mute);font-size:13px;margin-top:.35rem}

/* the handwritten note + arrow, one per page */
.note{position:relative;margin:3rem 0 2rem;min-height:56px}
.note p{font:400 24px/1.25 var(--tp-font-hand);margin:0;max-width:34ch}
.note small{display:block;font:400 17px/1.4 var(--tp-font-hand);color:var(--tp-mute);margin-top:.15rem}
.note svg{position:absolute;right:0;top:-6px;width:150px;height:76px;overflow:visible}
.note path{fill:none;stroke:var(--tp-ink);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.1s cubic-bezier(.16,1,.3,1) .2s forwards}
.note .head{animation-delay:1.1s;stroke-dasharray:40;stroke-dashoffset:40}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:760px){.note svg{width:92px;height:52px;top:auto;bottom:-34px}}

h1{font:400 42px/1.15 var(--tp-font-ui);letter-spacing:var(--tp-track-tight);margin:0 0 .5rem}
h2{font:500 15px/1.3 var(--tp-font-ui);margin:0 0 1.25rem;text-transform:lowercase;color:var(--tp-ink)}
p{max-width:65ch;color:var(--tp-ink-2)}
@media (max-width:760px){h1{font-size:30px}}

/* search */
form.search{display:flex;gap:0;border-bottom:1.5px solid var(--tp-ink);max-width:560px;margin:2rem 0 0}
form.search input{flex:1;border:0;outline:0;background:transparent;padding:.6rem 0;
  font:400 18px var(--tp-font-ui);color:var(--tp-ink)}
form.search input::placeholder{color:var(--tp-mute)}
form.search button{border:0;background:transparent;cursor:pointer;padding:.6rem .25rem .6rem 1rem;
  font:500 16px var(--tp-font-ui);color:var(--tp-ink);text-decoration:underline;text-underline-offset:4px}
form.search input:focus-visible,form.search button:focus-visible{outline:2px solid var(--tp-ink);outline-offset:3px}

/* lists */
.lot{border-top:1px solid var(--tp-hair);padding:1.25rem 0}
.lot:last-child{border-bottom:1px solid var(--tp-hair)}
.lot a.name{color:var(--tp-ink);text-decoration:none;font-weight:500;font-size:16px}
.lot a.name:hover{text-decoration:underline;text-underline-offset:3px}
.spec{color:var(--tp-mute);font-size:13px;margin-top:.2rem}
.diffs{margin:.6rem 0 0;padding:0;list-style:none}
.diffs li{color:var(--tp-ink-2);font-size:14px;padding-left:1rem;position:relative;margin:.2rem 0}
.diffs li:before{content:"-";position:absolute;left:0;color:var(--tp-mute)}
.diffs li.caveat{color:var(--tp-mute);font-style:italic}
.diffs li.caveat:before{content:"!";}

.match{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.bar{display:inline-block;width:68px;height:3px;background:var(--tp-hair);position:relative;flex:none}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--tp-ink);display:block}
.pct{font-size:13px;color:var(--tp-mute);font-variant-numeric:tabular-nums;flex:none}

/* target panel */
.target{background:var(--tp-paper);padding:1.5rem;margin:2rem 0 0}
.target dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.25rem;margin:0;font-size:14px}
.target dt{color:var(--tp-mute)}
.target dd{margin:0;color:var(--tp-ink)}

.warn{border-left:2px solid var(--tp-ink);padding:.75rem 0 .75rem 1rem;margin:1.5rem 0;font-size:14px;color:var(--tp-ink-2)}
.pill{display:inline-block;border:1px solid var(--tp-hair);padding:.15rem .5rem;font-size:12px;color:var(--tp-mute);margin-right:.35rem}

section{margin:var(--tp-section) 0}
footer{border-top:1px solid var(--tp-hair);margin-top:var(--tp-section);padding:2rem 0 4rem;
  color:var(--tp-mute);font-size:13px}
footer a{color:var(--tp-mute)}
a{color:var(--tp-ink)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{border:1px solid var(--tp-hair);padding:.4rem .7rem;font-size:14px;text-decoration:none;color:var(--tp-ink)}
.chips a:hover{border-color:var(--tp-ink)}

@media (prefers-reduced-motion:reduce){.note path{animation:none;stroke-dashoffset:0}}