/* Leivontapöytä: maito, lakritsi, mustaherukka, mustikka, sitruuna, salvia */
:root{
  --maito:#F3F6FB;        /* page background */
  --lakritsi:#2A2230;     /* text */
  --mustaherukka:#6A2C70; /* links, accents */
  --mustikka:#34508F;     /* card rules, details */
  --sitruuna:#F2D24B;     /* index-card tab, highlights */
  --salvia:#5E7F59;       /* small details */
  --muted:#5A5162;
  --line:#C9D4EA;
  --head:"Young Serif",Georgia,serif;
  --body:"Figtree",system-ui,sans-serif;
  --rule:1.75rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--maito);color:var(--lakritsi);font:400 1.0625rem/1.7 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--mustaherukka);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--mustikka);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--lakritsi);color:#fff;padding:.6rem 1rem;z-index:20}
.skip:focus{left:1rem;top:1rem}

.top{max-width:70rem;margin:0 auto;padding:1.4rem 1.25rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:3px solid var(--lakritsi)}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--lakritsi);font:400 1.5rem/1 var(--head)}
.brand-mark{width:2rem;height:2rem}
.top ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem}
.top nav a{color:var(--lakritsi);text-decoration:none;font-weight:600;padding:.15rem 0}
.top nav a:hover,.top nav a[aria-current="page"]{box-shadow:inset 0 -.45em 0 var(--sitruuna)}

/* home */
.hero{max-width:70rem;margin:0 auto;padding:3.5rem 1.25rem 2.5rem;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;align-items:center}
.hero h1{font:400 clamp(2.5rem,5.5vw,4.2rem)/1.02 var(--head);margin:0 0 1.25rem;letter-spacing:-.01em}
.lede{font-size:1.14rem;max-width:33rem}
.lede p{margin:0 0 1rem}
.hero-art{margin:0}

.index{max-width:70rem;margin:0 auto;padding:1.5rem 1.25rem 4rem}
.index h2{font:400 2rem/1.2 var(--head);margin:0 0 1.25rem}
.recipe-list{list-style:none;margin:0;padding:0;border-top:3px solid var(--lakritsi)}
.recipe-list li{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:.5rem 2rem;padding:1.4rem 0 1.4rem 1.4rem;border-bottom:1px solid var(--line);position:relative}
.recipe-list li::before{content:"";position:absolute;left:0;top:1.65rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--swatch)}
.recipe-list a{text-decoration:none;color:var(--lakritsi)}
.recipe-list .t{display:block;font:400 1.5rem/1.25 var(--head);color:var(--mustaherukka);margin-bottom:.35rem}
.recipe-list a:hover .t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.recipe-list .d{display:block;color:var(--muted);max-width:40rem}
.facts{margin:0;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.95rem}
.recipe-list .facts{flex-direction:column;gap:.2rem;padding-top:.3rem}
.facts div{display:flex;gap:.45rem}
.facts dt{font-weight:700}
.facts dd{margin:0}

/* recipe page */
.recipe{max-width:70rem;margin:0 auto;padding:3rem 1.25rem 4rem}
.recipe-head{max-width:46rem;margin-bottom:2.5rem}
.recipe-head h1,.page-head h1{font:400 clamp(2.1rem,4.6vw,3.3rem)/1.08 var(--head);margin:0 0 1rem}
.standfirst{font-size:1.2rem;line-height:1.55;margin:0 0 1.2rem}
.recipe-head .facts{padding:.7rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:.8rem}
.meta{margin:0;color:var(--muted);font-size:.92rem}
.recipe-body{display:grid;grid-template-columns:minmax(0,40rem) minmax(0,22rem);gap:3.5rem;align-items:start}
.recipe-body .prose{grid-column:1;grid-row:1}
.card{grid-column:2;grid-row:1;margin-top:1.4rem}
@media (min-width:56.01rem) and (min-height:56rem){.card{position:sticky;top:1.5rem}}

/* the memorable element: a ruled index card for ingredients */
.card-tab{display:inline-block;margin:0;background:var(--sitruuna);color:var(--lakritsi);font:400 1.15rem/1 var(--head);padding:.65rem 1.1rem .55rem;border-radius:.5rem .5rem 0 0;position:relative;top:1px}
.card-lines{
  background-color:#fff;
  background-image:
    linear-gradient(90deg,transparent 2.1rem,#E09AAE 2.1rem,#E09AAE calc(2.1rem + 2px),transparent calc(2.1rem + 2px)),
    repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--rule) - 1px),var(--line) calc(var(--rule) - 1px),var(--line) var(--rule));
  background-attachment:local;
  border-top:4px solid var(--sitruuna);
  padding:var(--rule) 1rem var(--rule) 2.8rem;
  line-height:var(--rule);
  box-shadow:0 1px 0 var(--line),6px 6px 0 var(--mustikka);
}
.card-lines h3{font:700 .95rem/var(--rule) var(--body);margin:0;color:var(--mustikka)}
.card-lines h3:not(:first-child){margin-top:var(--rule)}
.card-lines ul{list-style:none;margin:0;padding:0}
.card-lines li{margin:0;font-size:.98rem}

.prose h2{font:400 1.65rem/1.25 var(--head);margin:2.4rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose h3{font:700 1.15rem/1.35 var(--body);margin:1.8rem 0 .5rem}
.prose p,.prose ul,.prose ol{margin:0 0 1.1rem}
.prose ul,.prose ol{padding-left:1.35rem}
.prose li{margin:.35rem 0}
.prose ol li::marker{font-weight:700;color:var(--mustaherukka)}
.prose ul li::marker{color:var(--swatch,var(--mustaherukka))}
.prose strong{font-weight:700}
.prose table{width:100%;border-collapse:collapse;margin:1.4rem 0 1.8rem;font-size:.97rem;line-height:1.5}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--line)}
.prose th{border-bottom:2px solid var(--lakritsi)}
.prose blockquote{margin:1.4rem 0;padding:.9rem 1.1rem;background:#fff;border-left:5px solid var(--sitruuna)}
.prose blockquote p:last-child{margin:0}

.more{max-width:40rem;margin-top:3.5rem;padding-top:1.4rem;border-top:3px solid var(--lakritsi)}
.more h2{font:400 1.35rem/1.2 var(--head);margin:0 0 .6rem}
.more ul{margin:0;padding-left:1.2rem}
.more li{margin:.35rem 0}

.page{max-width:44rem;margin:0 auto;padding:3rem 1.25rem 4rem}
.page-head{margin-bottom:2rem}

.foot{max-width:70rem;margin:0 auto;padding:1.8rem 1.25rem 2.5rem;border-top:3px solid var(--lakritsi);font-size:.95rem}
.foot p{margin:0 0 .5rem}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;color:var(--muted)}

@media (max-width:56rem){
  .hero{grid-template-columns:1fr;gap:2rem;padding-top:2.5rem}
  .recipe-body{grid-template-columns:1fr;gap:2.5rem}
  .card{grid-column:1;grid-row:1;position:static;margin-top:0}
  .recipe-body .prose{grid-row:2}
  .recipe-list li{grid-template-columns:1fr}
  .recipe-list .facts{flex-direction:row;gap:.3rem 1.2rem}
}
@media (max-width:30rem){
  body{font-size:1rem}
  .top{padding:1.1rem 1rem .9rem}
  .brand{font-size:1.3rem}
  .top ul{gap:1rem}
  .hero,.index,.recipe,.page,.foot{padding-left:1rem;padding-right:1rem}
  .card-lines{padding-left:2.4rem;padding-right:.75rem}
  .card-lines{background-image:linear-gradient(90deg,transparent 1.8rem,#E09AAE 1.8rem,#E09AAE calc(1.8rem + 2px),transparent calc(1.8rem + 2px)),repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--rule) - 1px),var(--line) calc(var(--rule) - 1px),var(--line) var(--rule))}
  .prose table{display:block;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}