/* picky.forgebyte.app — cozy cookbook: gingham, serif, recipe index cards, category plates. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-latin-wght.woff2) format("woff2")}
:root{
 --linen:#fbf5ea;--card:#fffdf8;--tomato:#b3261e;--tomato-2:#8e1d1d;--rule-blue:#c9dbef;--rule-red:#e9a9a4;--crust:#6b4a2f;--ink:#33231a;--ink-2:#5c4636;--butter:#f6e3b4;--sage:#dfe8d2;
 --fb-bg:var(--linen);--fb-surface:var(--card);--fb-ink:var(--ink);--fb-muted:var(--ink-2);--fb-line:rgba(107,74,47,.18);
 --fb-accent:var(--tomato);--fb-accent-ink:var(--tomato-2);--fb-focus:var(--tomato);
 --fb-bar-bg:rgba(251,245,234,.94);--fb-bar-ink:var(--ink);--fb-bar-muted:var(--ink-2);--fb-bar-line:rgba(107,74,47,.14);
 --fb-cta-bg:var(--tomato);--fb-cta-ink:#fff;
 --fb-foot-bg:#3a2619;--fb-foot-ink:#efe1cf;--fb-foot-head:#fff;--fb-foot-muted:#cdb8a2;--fb-foot-line:rgba(239,225,207,.18);
 --fb-body:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
 --fb-display:"Fraunces",Georgia,serif;
 --fb-radius:6px;--fb-w:1040px;
}
body{background:radial-gradient(rgba(107,74,47,.06) 1px,transparent 1.5px) 0 0/18px 18px,var(--linen);font-size:18px}
a{color:var(--tomato-2);text-underline-offset:3px;text-decoration-thickness:1px}
.gingham{height:clamp(54px,8vw,84px);background:
 repeating-linear-gradient(90deg,rgba(179,38,30,.55) 0 14px,transparent 14px 28px),
 repeating-linear-gradient(0deg,rgba(179,38,30,.55) 0 14px,rgba(255,255,255,.9) 14px 28px);
 border-bottom:4px solid #fff;box-shadow:0 6px 0 rgba(179,38,30,.12)}
main{max-width:var(--fb-w);margin:0 auto;padding:clamp(36px,6vw,64px) 16px clamp(56px,8vw,96px)}
h1,h2,h3{font-family:var(--fb-display);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.3rem,6vw,4rem);line-height:1.04;font-variation-settings:"SOFT" 100,"WONK" 1;margin-bottom:.35em}
h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:1.6em 0 .5em}
h2::before{content:"\2766\00a0";color:var(--tomato);font-weight:400}
.lead{font-size:clamp(1.12rem,2vw,1.3rem);color:var(--ink-2);max-width:48ch;font-style:italic}
.note{position:relative;padding:16px 20px 16px 22px;background:var(--butter);border-radius:4px;box-shadow:0 10px 22px -18px rgba(80,40,10,.8);max-width:62ch;transform:rotate(-.4deg)}
.note::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(255,255,255,.6);border:1px solid rgba(107,74,47,.12);transform:rotate(-3deg)}

/* home hero */
.pt-hero{text-align:center;padding:10px 0 20px}
.pt-hero h1{max-width:18ch;margin-inline:auto}
.pt-hero .lead{margin-inline:auto}
main>.pt-hero+.note{margin:34px auto 0}

/* categories as plates */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,2.4vw,26px);margin:30px 0 10px}
.chips a{display:grid;place-items:center;text-align:center;width:clamp(124px,17vw,150px);aspect-ratio:1;padding:22px;border-radius:50%;text-decoration:none;color:var(--ink);font-family:var(--fb-display);font-weight:600;font-size:1rem;line-height:1.15;
 background:radial-gradient(circle,#fff 0 52%,#f3ece0 53% 56%,#fff 57% 66%,var(--rule-blue) 67% 69%,#fff 70%);
 box-shadow:0 2px 0 rgba(107,74,47,.08),0 14px 26px -16px rgba(80,40,10,.7);transition:transform .25s}
.chips a:nth-child(2){background:radial-gradient(circle,#fff 0 52%,#f3ece0 53% 56%,#fff 57% 66%,var(--rule-red) 67% 69%,#fff 70%)}
.chips a:nth-child(4){background:radial-gradient(circle,#fff 0 52%,#f3ece0 53% 56%,#fff 57% 66%,#cfe0bf 67% 69%,#fff 70%)}
.chips a:hover{transform:translateY(-4px) rotate(-4deg)}
main>h1+.chips{justify-content:flex-start}
@media(max-width:520px){.chips a{width:calc(50% - 10px);max-width:132px;padding:16px;font-size:.9rem}}

/* listings as recipe index cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:26px;margin:24px 0 34px}
.card{position:relative;padding:44px 22px 20px;background:var(--card);border-radius:3px;box-shadow:0 1px 0 rgba(107,74,47,.12),0 16px 30px -22px rgba(80,40,10,.8);
 background-image:linear-gradient(var(--rule-red),var(--rule-red)),repeating-linear-gradient(180deg,transparent 0 27px,var(--rule-blue) 27px 28px);
 background-size:100% 2px,100% 100%;background-position:0 34px,0 36px;background-repeat:no-repeat;transform:rotate(var(--tilt,0deg));transition:transform .25s}
.cards .card:nth-child(3n+1){--tilt:-.7deg}.cards .card:nth-child(3n+2){--tilt:.5deg}.cards .card:nth-child(3n){--tilt:-.2deg}
.card:hover{transform:rotate(0) translateY(-3px)}
.card::before{content:"";position:absolute;top:-8px;right:24px;width:54px;height:18px;background:rgba(246,227,180,.85);transform:rotate(4deg)}
.card h3{font-size:1.35rem;margin:0 0 .35em;line-height:1.15}
.card h3 a{color:var(--ink);text-decoration:none;background:linear-gradient(var(--butter),var(--butter)) 0 92%/0 40% no-repeat;transition:background-size .3s}
.card h3 a:hover{background-size:100% 40%}
.card h3 a::after{content:" \2197";font-size:.8em;color:var(--tomato)}
.card p{margin:0 0 14px;color:var(--ink-2);line-height:28px}
.tag{display:inline-block;margin:0 6px 6px 0;padding:2px 10px;border:1.5px solid var(--crust);border-radius:999px;font-family:var(--fb-umbrella);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--crust)}
.card.maker{background-color:#fff7e8;outline:2px dashed var(--tomato);outline-offset:-8px}
.card.maker .tag:last-of-type{border-color:var(--tomato);background:var(--tomato);color:#fff}

/* directory search */
#q{display:block;width:100%;max-width:520px;margin:22px 0 8px;padding:14px 18px 14px 46px;font:inherit;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4a2f' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 16px 50%/20px no-repeat;border:2px solid var(--crust);border-radius:999px}
#q:focus-visible{outline-offset:2px}

/* forms (newsletter placeholder), lists, printable */
form input,form button{font:inherit;padding:12px 16px;border-radius:999px;border:2px solid var(--fb-line);max-width:100%}
form button{background:var(--tomato);color:#fff;border-color:var(--tomato);opacity:.6}
main ul{padding-left:1.2em}main li{margin:.3em 0}
.printable{width:100%;max-width:640px;border:10px solid #fff;border-radius:4px;box-shadow:0 22px 40px -26px rgba(80,40,10,.9);transform:rotate(-1deg)}
a[download]{display:inline-block;padding:10px 20px;border-radius:999px;background:var(--tomato);color:#fff;text-decoration:none;font-family:var(--fb-umbrella);font-weight:700}

/* footer: keep the disclaimer readable */
footer.fb .disclaimer{max-width:52ch}
footer.fb .fbline a{display:inline;padding:0;text-decoration:underline}
footer.fb{border-top:8px solid transparent;border-image:repeating-linear-gradient(90deg,var(--tomato) 0 14px,#fff 14px 28px) 8}

@media (prefers-reduced-motion:reduce){.chips a,.card,.card h3 a{transition:none}.chips a:hover,.card:hover{transform:none}}

/* compact plates on phones */
@media(max-width:520px){.chips{gap:10px;margin:18px 0 6px}.chips a{width:calc(33.33% - 7px);max-width:112px;padding:10px;font-size:.76rem;line-height:1.1}}