/* Layout: one site, two views — home (opening + illustration, colour-keyed search, recipe grid, newsletter) and a recipe page (ingredients beside method, macros, reader notes).
   Single light theme on purpose: the brand is drawn on white. Each recipe type owns one brand pastel. */
:root{
  color-scheme:light;
  --white:#ffffff;
  --charcoal:#171717;
  --muted:#5b5961;
  --rule:#e8e6ef;
  --teal:#347d74;  --teal-ink:#2a655e;
  /* recipe-type colours: fill / soft fill / ink */
  --dinner:#b9ddd4;    --dinner-soft:#eaf5f2;    --dinner-ink:#24584f;
  --baking:#b7b5d9;    --baking-soft:#efeef8;    --baking-ink:#4a4775;
  --breakfast:#f3cf83; --breakfast-soft:#fdf4de; --breakfast-ink:#6f5210;
  --snacks:#f1b8be;    --snacks-soft:#fcecee;    --snacks-ink:#8a3a45;
  --coral:#c96f79;
  --font-display:"Crimson Pro", Georgia, "Times New Roman", serif;
  --font-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
body{background:var(--white);color:var(--charcoal);font-family:var(--font-body);font-size:16px;line-height:1.55}
a{color:var(--teal)}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.1;text-wrap:balance;margin:0}
.wrap{max-width:1100px;margin:0 auto;padding-inline:20px}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.num{font-family:var(--font-body);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Category theming: any element with data-cat picks up its colours */
[data-cat="Dinner"]{--c:var(--dinner);--c-soft:var(--dinner-soft);--c-ink:var(--dinner-ink)}
[data-cat="Baking"]{--c:var(--baking);--c-soft:var(--baking-soft);--c-ink:var(--baking-ink)}
[data-cat="Breakfast"]{--c:var(--breakfast);--c-soft:var(--breakfast-soft);--c-ink:var(--breakfast-ink)}
[data-cat="Snacks"]{--c:var(--snacks);--c-soft:var(--snacks-soft);--c-ink:var(--snacks-ink)}
[data-cat="Sides"]{--c:#dda0a7;--c-soft:#f9ecee;--c-ink:#843a44}
[data-cat="General"]{--c:#d6d4de;--c-soft:#f4f3f7;--c-ink:#3f3d46}


/* Header */
.site-head{border-bottom:1px solid var(--rule);position:sticky;top:env(safe-area-inset-top,0px);background:var(--white);z-index:5}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:10px;flex-wrap:wrap}
/* The bowl's visual middle sits low (spoon above), and the wordmark's sits high (descender below), so offset the wordmark to line their middles up */
.brand{display:flex;align-items:flex-start;gap:10px;text-decoration:none}
.brand .bowl{height:42px;width:auto}
.brand .wm{height:34px;width:auto;margin-top:16px}
@media (max-width:560px){.brand .bowl{display:none}.brand .wm{height:28px;margin-top:0}}
nav.main{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
nav.main a{color:var(--charcoal);text-decoration:none;font-weight:500;font-size:15px}
nav.main a:hover{color:var(--teal)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:var(--white);border:0;border-radius:999px;padding:10px 18px;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--teal-ink)}
nav.main a.btn{color:var(--white);padding:8px 15px;font-size:14px}

/* Opening */
.home{overflow-x:clip}
.intro{padding-block:40px 34px}
.intro h1{font-size:clamp(2.2rem,5.2vw,3.8rem);font-weight:500;max-width:none}
/* Illustration always on the right. The divider line runs in from the left page edge (clipped) and meets the bowl's rim,
   the way the wordmark's script joins the bowl in the banner. Source is 479×538; the rim's left point is at (27, 414),
   i.e. 0.0564 and 0.8643 × the displayed width. */
.intro-row{--art:290px;display:grid;grid-template-columns:minmax(0,1fr) var(--art);gap:48px;align-items:start;margin-top:26px}
.intro .art{position:relative;width:var(--art);grid-column:2;grid-row:1}
.intro-text{grid-column:1;grid-row:1}
.intro .art img{position:relative;z-index:1;width:var(--art);height:auto;display:block}
/* Drawn at 1:1 so the loop never stretches; the loop sits a set distance before the bowl, chosen per layout so it stays on screen */
.connector{position:absolute;right:calc(100% - var(--art) * .0564);top:calc(var(--art) * .8643 - 40px);width:2400px;max-width:none;height:60px;overflow:visible}
.connector .lp-mid,.connector .lp-narrow{display:none}
@media (max-width:900px){.connector .lp-wide{display:none}.connector .lp-mid{display:inline}}
@media (max-width:480px){.connector .lp-mid{display:none}.connector .lp-narrow{display:inline}}
.intro-text{padding-top:6px}
.intro p{color:var(--muted);max-width:62ch;margin:14px 0 0;font-size:1.08rem}
.intro p:first-child{margin-top:0}
.intro .sign{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--charcoal);margin-top:12px}
/* Narrower screens: text moves above, illustration stays left with its line running across */
@media (max-width:900px){
  .intro{padding-block:26px 24px}
  .intro-row{--art:220px;grid-template-columns:minmax(0,1fr);gap:22px}
  .intro .art{grid-column:1;grid-row:2;justify-self:end}
}
@media (max-width:480px){.intro-row{--art:170px}}

/* Line divider with a loop, after the illustration's flourish */

/* Finder */
.finder h2{font-size:1.9rem;margin:18px 0 14px}
.searchbar{display:flex;gap:10px;align-items:center;border:1.5px solid var(--charcoal);border-radius:999px;padding:6px 18px;max-width:620px}
.searchbar input{border:0;outline:0;flex:1;min-width:0;background:transparent;font-size:16px;padding-block:6px}
.searchbar:focus-within{box-shadow:0 0 0 3px var(--dinner)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--white);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:500;cursor:pointer}
.chip .dot{width:11px;height:11px;border-radius:50%;background:var(--c);border:1px solid var(--c-ink)}
.chip[data-cat][aria-pressed="true"]{background:var(--c);border-color:var(--c-ink);color:var(--charcoal)}
.chip:not([data-cat])[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:var(--white)}
.chip-sep{width:1px;align-self:stretch;background:var(--rule);margin-inline:4px}
.count{font-size:14px;color:var(--muted);margin-top:14px}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;padding-block:16px 52px}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:16px;border:1px solid var(--rule);overflow:hidden;background:var(--white);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,23,23,.08)}
.thumb{aspect-ratio:4/3;max-width:100%;position:relative;background:var(--c-soft);border-bottom:4px solid var(--c);display:grid;place-items:center}
.thumb .stat{text-align:center}
.thumb .stat .num{display:block;font-size:2.6rem;line-height:1;color:var(--charcoal)}
.thumb .stat span{display:block;font-size:13px;color:var(--c-ink);font-weight:600;margin-top:6px}
.pct{position:absolute;top:12px;right:12px;background:var(--white);color:var(--charcoal);border:1px solid var(--c);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.thumb .ph{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--muted)}
.cat-pill{display:inline-block;justify-self:start;align-self:flex-start;line-height:1.4;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--c-soft);color:var(--c-ink);border:1px solid var(--c)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:1.45rem}
.card p{margin:0;font-size:14.5px;color:var(--muted)}
.macro-line{font-size:13.5px;font-variant-numeric:tabular-nums}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.tag{font-size:12px;color:var(--muted);border:1px solid var(--rule);padding:2px 9px;border-radius:999px}
.soon{font-size:12.5px;color:var(--muted);margin:0}
.empty{grid-column:1/-1;padding:28px;border:1.5px dashed var(--rule);border-radius:16px;color:var(--muted);text-align:center}

/* On my plate */
.week{padding-block:0 56px}
.week-intro{padding-block:16px 26px;max-width:62ch}
.week-intro h1{font-size:clamp(2.3rem,6vw,3.6rem)}
.week-intro p{margin:12px 0 0;color:var(--muted);font-size:1.08rem}
.week-log{margin-top:40px}
.week-log h2{font-size:1.6rem;border-bottom:1px solid var(--rule);padding-bottom:10px}
.week-empty{color:var(--muted);font-size:14.5px;margin:12px 0 0}
.week-head{border-bottom:1.5px solid var(--charcoal);padding-bottom:12px}
.week-head h2{font-size:1.9rem}
.week-head p{margin:4px 0 0;color:var(--muted);font-size:15px}
.week-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.week-grid li{border:1px solid var(--rule);border-radius:14px;padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;background:var(--white)}
.week-grid .day{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dinner-ink);background:var(--dinner-soft);border-radius:999px;padding:2px 10px;align-self:flex-start}
.week-grid h3{font-size:1.25rem;line-height:1.15}
.week-grid p{margin:0;font-size:14px;color:var(--muted)}
.w-link{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600}
.w-link.soon,.w-link.left{color:var(--muted);font-weight:500}
.week-past{font-size:13px;color:var(--muted);margin:14px 0 0}

/* Tips list */
.tips{padding-block:8px 52px}
.tips-head{border-bottom:1.5px solid var(--charcoal);padding-bottom:12px}
.tips-head h1{font-size:clamp(2.3rem,6vw,3.6rem);margin-top:16px}
.tips-head p{margin:4px 0 0;color:var(--muted);font-size:15px}
.topic{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:6px}
.tip-list li.soon-row .tip-row{opacity:.55}
.soon-tag{font-size:12px;font-weight:600;color:var(--muted);border:1px dashed var(--rule);border-radius:999px;padding:2px 9px;white-space:nowrap}
.tip-list{list-style:none;margin:0;padding:0}
.tip-list li{border-bottom:1px solid var(--rule)}
.tip-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:6px 22px;align-items:baseline;padding:16px 0;text-decoration:none;color:inherit}
@media (max-width:620px){.tip-row{grid-template-columns:minmax(0,1fr)}}
.tip-row .cat-pill{justify-self:start}
.tip-row h3{font-size:1.35rem}
.tip-row p{margin:4px 0 0;color:var(--muted);font-size:14.5px}
.tip-row .read{font-size:13px;color:var(--muted);white-space:nowrap}
a.tip-row:hover h3{color:var(--teal)}

/* Tip post */
.post{max-width:760px}
.post-head{display:grid;gap:12px;padding-block:16px 22px;border-bottom:1px solid var(--rule)}
.post-head h1{font-size:clamp(2rem,5vw,3rem)}
.post-meta{margin:0;font-size:14px;color:var(--muted)}
.post-body{padding-block:22px;font-size:1.06rem;max-width:66ch}
.post-body h2{font-size:1.6rem;margin:26px 0 8px}
.post-body ol,.post-body ul{padding-left:22px;display:grid;gap:8px}
.post-body li::marker{color:var(--c-ink);font-weight:700}
.callout{background:var(--c-soft);border-radius:12px;padding:14px 16px}
.post-related{font-size:14px;color:var(--muted);padding-bottom:48px;margin:0}

/* Newsletter */
.news{background:var(--snacks-soft);border-block:1px solid var(--snacks)}
.news .wrap{padding-block:36px;display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr);gap:24px 28px;align-items:start}
@media (max-width:820px){.news .wrap{grid-template-columns:minmax(0,1fr)}.news .wrap img{display:none}}
.news img{width:120px;height:auto;margin-top:5px}
.news .act{padding-top:6px}
.news h2{font-size:2rem}
.news p{margin:8px 0 0;color:var(--muted);max-width:52ch}
.news .act{display:grid;gap:8px;justify-items:start}
.news .act small{color:var(--muted);font-size:13px}

footer{padding-block:28px 40px;font-size:13.5px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}

/* Recipe view */
.back{display:inline-flex;gap:6px;align-items:center;margin-top:22px;font-weight:600;text-decoration:none}
.r-head{padding-block:16px 26px;display:grid;gap:12px;border-bottom:1px solid var(--rule)}
.r-head h1{font-size:clamp(2.3rem,6vw,3.8rem)}
.r-head .lede{max-width:64ch;color:var(--muted);margin:0;font-size:1.06rem}
.facts{display:flex;flex-wrap:wrap;gap:12px 32px}
.fact{display:grid}
.fact .num{font-size:1.3rem}
.fact span{font-size:13px;color:var(--muted)}
.photo-slot{aspect-ratio:16/7;max-width:100%;border-radius:16px;background:var(--c-soft);border:1.5px dashed var(--c);display:grid;place-items:center;color:var(--c-ink);font-size:14px;font-weight:500;margin-top:6px}

.cols{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:48px;padding-block:32px;align-items:start}
@media (max-width:860px){.cols{grid-template-columns:minmax(0,1fr);gap:32px}}
.cols aside{position:sticky;top:84px}
@media (max-width:860px){.cols aside{position:static}}
.cols h2{font-size:1.8rem;margin-bottom:8px}
.units{font-size:13px;color:var(--muted);margin:0 0 6px}
.grp{margin-top:18px}
.grp h3{font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink);margin-bottom:4px}
ul.ing{list-style:none;margin:0;padding:0}
ul.ing li{border-bottom:1px solid var(--rule)}
ul.ing label{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:7px 0;cursor:pointer;align-items:baseline}
ul.ing input{accent-color:var(--teal);margin:0;transform:translateY(2px)}
ul.ing input:checked + span{opacity:.45;text-decoration:line-through}
.amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.alt{color:var(--muted);font-size:13.5px;white-space:nowrap}
ol.steps{list-style:none;margin:0;padding:0;counter-reset:s}
ol.steps>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--rule)}
ol.steps>li::before{counter-increment:s;content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--c-soft);border:1.5px solid var(--c);color:var(--c-ink);display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums}
.steps h3{font-size:1.4rem;margin-bottom:6px}
.steps ul{margin:0;padding-left:18px;display:grid;gap:5px;max-width:64ch}
.q{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.tip{margin-top:10px;padding:10px 14px;background:var(--c-soft);border-radius:10px;font-size:14px;max-width:64ch}
.hot{color:var(--coral);font-weight:700}

.macros{padding-block:30px;border-top:1px solid var(--rule)}
.macros h2{font-size:1.8rem;margin-bottom:12px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:14.5px;min-width:520px}
th,td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
td.p{color:var(--teal);font-weight:700}
tr.plate td{font-weight:700;border-bottom:2px solid var(--charcoal)}
.fine{font-size:13px;color:var(--muted);max-width:72ch;margin-top:12px}

/* Serve-with sides */
.sides{padding-block:30px;border-top:1px solid var(--rule)}
.sides h2{font-size:1.8rem;margin-bottom:6px}
.side-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:12px}
.side{background:var(--c-soft);border-radius:14px;padding:18px 20px}
.side h3{font-size:1.35rem;margin-bottom:6px}
.side p{margin:0;font-size:15px;max-width:60ch}
.side .side-mac{margin-top:10px;font-size:13.5px;color:var(--c-ink);font-weight:600;font-variant-numeric:tabular-nums}

/* Reader notes */
.notes{padding-block:30px 48px;border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
@media (max-width:860px){.notes{grid-template-columns:minmax(0,1fr)}}
.notes h2{font-size:1.8rem}
.notes .sub{color:var(--muted);margin:6px 0 16px;font-size:14.5px}
.note{padding:14px 0;border-bottom:1px solid var(--rule);display:grid;gap:4px}
.note .who{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kind{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px}
.k-tip{background:var(--dinner-soft);color:var(--dinner-ink)}
.k-edit{background:var(--breakfast-soft);color:var(--breakfast-ink)}
.k-q{background:var(--snacks-soft);color:var(--snacks-ink)}
.reply{margin-left:14px;padding-left:12px;border-left:2px solid var(--snacks);font-size:14.5px}
.example{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
form.note-form{display:grid;gap:12px;background:var(--baking-soft);border-radius:16px;padding:20px}
form.note-form h3{font-size:1.45rem}
.field{display:grid;gap:5px}
.field label,.field legend{font-size:13px;font-weight:600}
.field input,.field textarea{border:1px solid var(--rule);border-radius:10px;padding:10px 12px;background:var(--white);width:100%}
.field textarea{min-height:110px;resize:vertical}
fieldset.field{border:0;padding:0;margin:0}
.kinds{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:2px}
.kinds label{display:inline-flex;gap:7px;align-items:center;font-weight:500;font-size:15px;white-space:nowrap;cursor:pointer}
.kinds input{accent-color:var(--teal);margin:0;width:16px;height:16px}
.note-tabs{display:flex;flex-wrap:wrap;gap:4px 20px;border-bottom:1px solid var(--rule);margin-bottom:12px}
.note-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:6px 0 8px;margin-bottom:-1px;font-size:14.5px;font-weight:500;color:var(--muted);cursor:pointer}
.note-tabs button[aria-pressed="true"]{color:var(--charcoal);border-bottom-color:var(--charcoal);font-weight:600}
.note-tabs .n{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:400}
/* Share */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:4px}
.share .lbl{font-size:13px;font-weight:600;color:var(--muted)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--charcoal);border:1.5px solid var(--charcoal);border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.share .msg{font-size:13px;color:var(--muted)}
.share .url{font-size:13px;border:1px solid var(--rule);border-radius:8px;padding:5px 8px;min-width:0;width:min(100%,360px)}
.sent{background:var(--dinner-soft);border:1px solid var(--dinner);border-radius:10px;padding:12px 14px;font-size:14.5px;margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- Additions for the multi-page site ---- */
html{scroll-padding-top:90px}
body{margin:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:var(--white);padding:8px 14px;z-index:20}
.skip:focus{left:12px;top:12px}
nav.main a[aria-current="page"]{color:var(--teal);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.brand .bowl,.brand .wm{width:auto}
.card[hidden]{display:none}
.news img{height:auto}
.hp{position:absolute;left:-9999px}
.opt{font-weight:400;color:var(--muted)}
.no-notes{color:var(--muted);font-size:15px;margin:0;padding:14px 0;border-top:1px solid var(--rule)}
.note-form .btn{justify-self:start}
.sent{margin:0}
.cook-notes{margin-top:26px;padding:18px 20px;background:var(--c-soft);border-radius:14px;max-width:64ch}
.cook-notes h2{font-size:1.35rem;margin-bottom:8px}
.cook-notes ul{margin:0;padding-left:18px;display:grid;gap:6px}
.cook-notes p{margin:0}
.simple{padding-block:64px 80px;max-width:62ch}
.simple h1{font-size:clamp(2.2rem,6vw,3.4rem);margin-bottom:12px}
.past{border:1px solid var(--rule);border-radius:14px;padding:12px 16px;margin-top:12px}
.past summary{cursor:pointer;font-weight:600}
.past .week-grid{margin-top:12px}
.tips{padding-block:0 56px}
.week{padding-block:0 56px}
.week-intro{padding-top:40px}
.tips-head{padding-top:40px}
.post{padding-top:6px}
.post-body h2{font-family:var(--font-display)}
/* recipe header without a photo: give the facts a little more room */
.r-head{padding-bottom:30px}
/* footer links */
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px}
/* analytics choice bar */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:30;max-width:560px;margin-inline:auto;background:var(--white);border:1px solid var(--rule);border-radius:16px;box-shadow:0 8px 28px rgba(23,23,23,.12);padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14.5px}
.consent[hidden]{display:none}
.consent p{margin:0;flex:1 1 240px}
.consent-act{display:flex;gap:8px}
.consent .btn{padding:8px 15px;font-size:14px}
.privacy h2{font-size:1.5rem;margin:28px 0 8px}
.privacy p{margin:0 0 12px}
/* line continuing off the right edge of the illustration */
.tail{position:absolute;left:calc(var(--art) - 2px);top:calc(var(--art) * .9384 - 30.5px);width:2400px;max-width:none;height:60px;overflow:visible;pointer-events:none}
/* embedded beehiiv signup */
.news .act{width:100%}
.news .signup{width:100%;max-width:460px;min-height:56px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}