/* Friendsgiving (Essentials) — a single recipe card on kraft paper with plaid edge and falling leaves */
.t-fall { --bg: #E9DCC6; --surface: #FFFBF3; --surface-2: #F3E7D3; --ink: #3B2A1E; --ink-2: #6E5A49; --accent: #C2571A; --accent-hover: #A84A15; --accent-ink: #FFFFFF; --accent-text: #A14713; --tint: #F6E1D2; --line: #E3D2B6; --line-strong: #C9B08C; --display: "Playfair Display", Georgia, serif; --body: "Figtree", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 6px; }
.t-fall h1, .t-fall h2 { font-family: var(--display); color: var(--ink); }
.fg { position: relative; min-height: 100vh; padding: clamp(28px, 6vw, 70px) 16px 30px; background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .45), transparent 40%), var(--bg); overflow: hidden; }
.fg-leaves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.fg-leaves g { transform-box: fill-box; transform-origin: center; animation: leaf 9s var(--ease-inout, ease-in-out) infinite alternate; }
.fg-leaves g:nth-child(2) { animation-delay: -3s; } .fg-leaves g:nth-child(3) { animation-delay: -6s; }
@keyframes leaf { from { transform: rotate(-10deg) translateY(0); } to { transform: rotate(14deg) translateY(16px); } }
.fg-card { position: relative; max-width: 640px; margin: 0 auto; background: var(--surface); border-radius: 6px; padding: 14px; box-shadow: 0 30px 60px -34px rgba(59, 42, 30, .6); transform: rotate(-.8deg); }
.fg-card::before { content: ""; position: absolute; inset: 0; border-radius: 6px; padding: 10px; background: repeating-linear-gradient(0deg, rgba(194, 87, 26, .55) 0 6px, transparent 6px 14px), repeating-linear-gradient(90deg, rgba(107, 122, 58, .5) 0 6px, transparent 6px 14px), #F3E7D3; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.fg-head { padding: 26px 22px 18px; text-align: center; border-bottom: 2px solid var(--ink); margin: 0 10px; }
.fg-kicker { font: 600 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.fg-head h1 { margin-top: 8px; font: 900 italic clamp(48px, 10vw, 84px)/1 var(--display); color: var(--accent); }
.fg-serves { margin-top: 8px; font: 500 15px/1.4 var(--mono); color: var(--ink-2); }
.fg-body { padding: 18px 24px 26px; background-image: repeating-linear-gradient(transparent 0 31px, rgba(201, 176, 140, .55) 31px 32px); }
.fg-facts { margin: 0; display: grid; gap: 4px; }
.fg-facts div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; line-height: 32px; }
.fg-facts dt { font: 700 13px/32px var(--mono); text-transform: uppercase; color: var(--accent-text); }
.fg-facts dd { margin: 0; font-size: 17px; }
.fg-body h2 { margin-top: 20px; font-size: 26px; font-style: italic; line-height: 32px; }
.fg-body h2 span { font: 400 15px var(--body); color: var(--ink-2); font-style: normal; }
.fg-list, .fg-steps { margin: 0; padding-left: 24px; font-size: 16.5px; line-height: 32px; }
.fg-list li::marker { content: "☐  "; color: var(--accent); }
.fg-list b { font-weight: 700; margin-right: 6px; }
.fg-steps li::marker { font: 700 15px var(--mono); color: var(--accent-text); }
.fg-cta { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.t-fall .btn { border-radius: 4px; }
.t-fall .btn.line { color: var(--ink); border-color: var(--ink); background: var(--surface); }
.fg-text { margin-top: 14px; font: 500 14.5px/1.5 var(--mono); color: var(--ink-2); }
.fg-foot { position: relative; text-align: center; margin-top: 26px; }
.fg-foot .made { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
@media (max-width: 480px) { .fg-body { padding: 14px 14px 20px; } .fg-head { padding: 20px 10px 14px; } .fg-facts div { grid-template-columns: 1fr; gap: 0; line-height: 1.5; } }
@media (prefers-reduced-motion: reduce) { .fg-leaves g { animation: none; } }