/* steve-kitchen.css - "Steve's Kitchen": the separate look for Steve's recipe pages (/steve/recipes/, /steve/spicy/, /steve/your-recipes/).
   Loads after steve.css, only on pages whose <body> has class sk-body (added by design/steve-look/steve_look.py).
   Idea: a kitchen notebook (ruled legal-pad paper, red margin, marker headings, masking tape) in pop-art inks - deliberately unlike
   the cream Cook Book recipe pages (Chicken Marengo layout). Square corners throughout. Fonts are the site's own (cookery-header.css). */
.sk-body{--sk-pad:#fdf3c4;--sk-rule:#a9c8ec;--sk-margin:#f08c8c;--sk-teal:#0f8b8d;--sk-pink:#ff3b6b;--sk-yellow:#ffe14d;--sk-ink:#16141f;
  --sk-marker:"CO Marker","Permanent Marker","CO Kalam","Comic Sans MS",cursive;
  background-color:var(--sk-pad);
  background-image:linear-gradient(90deg,transparent 0 38px,var(--sk-margin) 38px 40px,transparent 40px 44px,var(--sk-margin) 44px 45px,transparent 45px),
                   repeating-linear-gradient(180deg,transparent 0 31px,var(--sk-rule) 31px 32px);
  background-size:auto,auto;background-attachment:local}
/* masthead: teal halftone instead of the coral logo band, so Steve's Kitchen reads differently from the first glance */
.sk-body .sv-mast{background-color:var(--sk-teal);background-image:radial-gradient(rgba(255,59,107,.55) 1.6px,transparent 1.9px);background-size:10px 10px}
.sk-body .sv-mast::after{display:none}
/* headings: marker pen, not the Cook Book display face */
.sk-body .sv-h1{font:400 clamp(2rem,5.6vw,3.3rem)/1.1 var(--sk-marker);letter-spacing:.01em;color:var(--sk-ink);text-shadow:3px 3px 0 var(--sk-yellow);transform:rotate(-1deg);transform-origin:left}
.sk-body .sv-prose h2,.sk-body .sv-notepad h2{font:400 1.45rem/1.2 var(--sk-marker);letter-spacing:0;color:var(--sk-teal)}
.sk-body .sv-standfirst{font:700 1.15rem/1.5 var(--sv-hand,"CO Kalam",cursive)}
.sk-body .sv-kicker{color:var(--sk-teal)}
.sk-body .sv-prose>p:first-child::first-letter{font-family:var(--sk-marker);color:var(--sk-teal);text-shadow:2px 2px 0 var(--sk-yellow)}
/* the article sheet: a page torn from the notebook, taped on */
.sk-body .sv-layout>div:first-child{position:relative;background:#fffdf3;border:3px solid var(--sk-ink);box-shadow:7px 7px 0 var(--sk-ink);padding:22px 20px 8px;
  background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(169,200,236,.55) 29px 30px)}
.sk-body .sv-layout>div:first-child::before,.sk-body .sv-layout>div:first-child::after{content:"";position:absolute;top:-13px;width:96px;height:24px;
  background:rgba(255,225,77,.82);border:1px solid rgba(22,20,31,.25);box-shadow:1px 2px 0 rgba(22,20,31,.18)}
.sk-body .sv-layout>div:first-child::before{left:18px;transform:rotate(-4deg)}
.sk-body .sv-layout>div:first-child::after{right:18px;transform:rotate(5deg)}
/* hero photo: polaroid-ish with a 'Steve's way' rubber stamp */
.sk-body .sv-hero-photo{position:relative;display:inline-block;max-width:100%;transform:rotate(-1.2deg)}
.sk-body .sv-hero-photo img{border:8px solid #fff;outline:3px solid var(--sk-ink);box-shadow:8px 8px 0 var(--sk-ink)}
.sk-body .sv-hero-photo picture{position:relative;display:inline-block;max-width:100%}
.sk-body .sv-hero-photo picture::after{content:"Steve\2019s way!";position:absolute;top:-10px;right:-14px;z-index:2;white-space:nowrap;font:400 1.15rem/1 var(--sk-marker);color:var(--sk-pink);
  background:rgba(255,255,255,.88);border:3px solid var(--sk-pink);padding:6px 10px 4px;transform:rotate(8deg);box-shadow:3px 3px 0 var(--sk-ink);letter-spacing:.02em}
.sk-body .sv-hero-photo figcaption{transform:rotate(1.2deg)}
.sk-body .sv-notepad{background:#fff;box-shadow:6px 6px 0 var(--sk-teal)}
.sk-body .sv-prose blockquote{border-left-color:var(--sk-teal);background:#fffbe0}
.sk-body .sv-box,.sk-body .sv-pager a,.sk-body .sv-author,.sk-body .sv-facts li{box-shadow:5px 5px 0 var(--sk-teal)}
/* ---- the Steve's Kitchen banner ---- */
.sk-banner{position:relative;display:flex;max-width:900px;gap:16px;align-items:center;margin:8px 0 18px;padding:14px 18px 14px 14px;color:var(--sk-ink);
  background-color:var(--sk-yellow);background-image:radial-gradient(rgba(255,59,107,.28) 1.5px,transparent 1.8px);background-size:9px 9px;
  border:4px solid var(--sk-ink);border-radius:0;box-shadow:8px 8px 0 var(--sk-ink)}
.sk-head{flex:0 0 auto;display:block}
.sk-head img{display:block;width:92px;height:auto;transform:rotate(-7deg);filter:drop-shadow(4px 5px 0 rgba(22,20,31,.6))}
.sk-banner-text{flex:1 1 auto;min-width:0;background:#fff;border:3px solid var(--sk-ink);padding:10px 14px 12px;position:relative;box-shadow:4px 4px 0 var(--sk-ink)}
.sk-banner-text::before{content:"";position:absolute;left:-15px;top:28px;border:12px solid transparent;border-right:14px solid var(--sk-ink);border-left:0}
.sk-banner-text::after{content:"";position:absolute;left:-9px;top:31px;border:9px solid transparent;border-right:10px solid #fff;border-left:0}
.sk-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 4px}
.sk-title span{font:400 clamp(1.5rem,4vw,2.1rem)/1 var(--sv-display,"CO Luckiest",Impact,sans-serif);letter-spacing:.03em;color:#fff;
  -webkit-text-stroke:1.5px var(--sk-ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--sk-pink)}
.sk-stamp{display:inline-block;font:600 .74rem/1 var(--sv-label,"CO Oswald",sans-serif);text-transform:uppercase;letter-spacing:.12em;color:var(--sk-pink);
  border:2px solid var(--sk-pink);padding:4px 7px;transform:rotate(-3deg);background:#fff}
.sk-note{margin:.2em 0 .5em;font:1rem/1.45 "Segoe UI",Roboto,Arial,sans-serif}
.sk-quip{display:block;font:700 1rem/1.35 var(--sv-hand,"CO Kalam",cursive);font-style:normal;color:var(--sk-teal);margin-top:2px}
.sk-proper{margin:0;font:600 .95rem/1.5 "Segoe UI",Roboto,Arial,sans-serif}
.sk-btn{display:inline-block;margin:4px 0 0;padding:6px 12px;font:600 .88rem/1.25 var(--sv-label,"CO Oswald",sans-serif);text-transform:uppercase;letter-spacing:.05em;
  color:#fff!important;background:var(--sk-teal);border:2px solid var(--sk-ink);border-radius:0;box-shadow:3px 3px 0 var(--sk-ink);text-decoration:none;transition:transform .12s,box-shadow .12s}
.sk-btn:hover,.sk-btn:focus-visible{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--sk-ink);background:var(--sk-pink)}
/* end note: a sticky note at the bottom of the method */
.sk-endnote{position:relative;margin:26px 4px 10px;padding:14px 16px 12px;background:#fff7a8;border:2px solid var(--sk-ink);box-shadow:5px 5px 0 var(--sk-ink);
  font:700 1.02rem/1.5 var(--sv-hand,"CO Kalam",cursive);transform:rotate(-.8deg);max-width:42em}
.sk-endnote a{color:var(--sk-teal);font-weight:700}
.sk-sig{display:block;text-align:right;font-family:var(--sk-marker);color:var(--sk-pink)}
/* index pages: every card gets a small 'Steve's take' sticker */
.sk-index .sv-card::after{content:"Steve\2019s take";position:absolute;right:-6px;top:-10px;z-index:2;font:400 .82rem/1 var(--sk-marker);color:#fff;background:var(--sk-pink);
  border:2px solid var(--sk-ink);padding:5px 8px 3px;transform:rotate(6deg);box-shadow:2px 2px 0 var(--sk-ink)}
.sk-index .sv-card{box-shadow:5px 5px 0 var(--sk-teal)}
@media (max-width:620px){
  .sk-body{background-image:linear-gradient(90deg,transparent 0 14px,var(--sk-margin) 14px 15px,transparent 15px),repeating-linear-gradient(180deg,transparent 0 31px,var(--sk-rule) 31px 32px)}
  .sk-banner{gap:10px;padding:10px;align-items:flex-start;box-shadow:5px 5px 0 var(--sk-ink)}
  .sk-head img{width:58px}
  .sk-banner-text{padding:8px 10px 10px}
  .sk-banner-text::before{top:18px}.sk-banner-text::after{top:21px}
  .sk-layout,.sk-body .sv-layout>div:first-child{padding:18px 12px 6px;box-shadow:5px 5px 0 var(--sk-ink)}
  .sk-body .sv-hero-photo picture::after{font-size:.95rem;right:4px;top:6px}
}
@media (prefers-reduced-motion:reduce){.sk-btn{transition:none}}
@media print{.sk-body{background:#fff}.sk-banner{box-shadow:none;background:#fff}.sk-head,.sk-body .sv-hero-photo picture::after,.sk-body .sv-layout>div:first-child::before,.sk-body .sv-layout>div:first-child::after{display:none}}