/* Suppertime, in its own press.
   Colours from Editorial.swift, faces from Typeface.swift. */
:root {
  --stock: #FAFAFA; --ink: #1A1C24; --dim: #676971;
  --rule: #E3E4E8; --act: #333E63; --note: #76663E; --block: #ECEDF0;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--stock); color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.6;
}
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
header { padding: 3.5rem 0 0; }
.mark { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.mark svg { display: block; border-radius: 22%; }
.mark span { font-family: Fraunces, Georgia, serif; font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; }
h1 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2.1rem, 6vw, 3.2rem); line-height: 1.08;
  letter-spacing: -.02em; margin: 2.5rem 0 1rem; font-weight: 600;
}
h2 { font-family: Fraunces, Georgia, serif; font-size: 1.45rem; font-weight: 600; margin: 3rem 0 .75rem; }
.lede { font-size: 1.18rem; color: var(--dim); margin: 0 0 1.5rem; }
p { margin: 0 0 1rem; }
a { color: var(--act); }
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 2rem 0; }
ol.steps li { counter-increment: s; position: relative; padding: 0 0 1.4rem 3.25rem; }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--block); color: var(--act);
  display: grid; place-items: center; font-size: .9rem; font-weight: 600;
}
ol.steps strong { display: block; font-size: 1.05rem; }
ol.steps span { color: var(--dim); }
.note { border-left: 3px solid var(--note); padding: .1rem 0 .1rem 1rem; margin: 2rem 0; color: var(--dim); }
.note b { display: block; color: var(--note); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .25rem; }
.cols { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; margin: 1.5rem 0; }
@media (max-width: 34rem) { .cols { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--rule); border-radius: 14px; padding: 1.1rem 1.2rem; }
.card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.card ul { margin: 0; padding-left: 1.1rem; color: var(--dim); }
footer { border-top: 1px solid var(--rule); margin-top: 4rem; padding: 2rem 0 4rem; color: var(--dim); font-size: .92rem; }
footer a { margin-right: 1.25rem; }
.legal p { color: #3a3c45; }
.updated { color: var(--dim); font-size: .9rem; }