:root { --linen:#F7F3E9; --ink:#17251C; --ink-soft:#55645A; --sun-deep:#C98A00; --edge:#E6DFCB; }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:"Atkinson Hyperlegible",Verdana,sans-serif; color:var(--ink); background:var(--linen); line-height:1.7; }
  .wrap { max-width:720px; margin:0 auto; padding-inline:24px; }
  header { display:flex; justify-content:space-between; align-items:center; padding:22px 0; }
  .logo { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.4rem; letter-spacing:-0.02em; text-decoration:none; color:var(--ink); }
  .logo b { color:var(--sun-deep); }
  main { background:#fff; border:1.5px solid var(--edge); border-radius:20px; padding:44px 40px 48px; margin-bottom:56px; }
  h1 { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; letter-spacing:-0.03em; font-size:2rem; }
  .updated { color:var(--ink-soft); font-size:.9rem; margin-top:6px; }
  h2 { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; letter-spacing:-0.01em; font-size:1.15rem; margin:32px 0 10px; }
  p, li { color:var(--ink-soft); font-size:1rem; }
  p b, li b { color:var(--ink); }
  ul { padding-left:22px; display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  a { color:var(--sun-deep); }
  code { font-family:ui-monospace,Menlo,monospace; font-size:.9em; background:rgba(23,37,28,.06); border-radius:5px; padding:1px 6px; }
  table { border-collapse:collapse; width:100%; margin-top:10px; font-size:.95rem; }
  th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--edge); color:var(--ink-soft); vertical-align:top; }
  th { color:var(--ink); font-weight:700; }
  footer { padding:0 0 48px; color:var(--ink-soft); font-size:.9rem; display:flex; gap:18px; flex-wrap:wrap; }
  footer a { color:var(--ink-soft); }
  @media (max-width:640px) { main { padding:32px 22px; } }
  ul, ol { padding-left:22px; display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  h1 { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; letter-spacing:-0.03em; font-size:2rem; margin:14px 0 6px; }
  .lede { color:var(--ink-soft); margin-bottom:26px; }
  h2 { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; letter-spacing:-0.01em; font-size:1.05rem; margin:26px 0 8px; color:var(--sun-deep); text-transform:uppercase; font-size:.85rem; letter-spacing:.1em; }
  details { background:#fff; border:1.5px solid var(--edge); border-radius:14px; margin-bottom:10px; overflow:hidden; }
  summary { cursor:pointer; padding:15px 18px; font-weight:700; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:"+"; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; color:var(--sun-deep); font-size:1.2rem; flex:none; }
  details[open] summary::after { content:"–"; }
  details .a { padding:0 18px 16px; color:var(--ink-soft); }
  details .a b { color:var(--ink); }
  footer { padding:36px 0 48px; color:var(--ink-soft); font-size:.9rem; display:flex; gap:18px; flex-wrap:wrap; }
  h2 { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.15rem; margin:30px 0 10px; }
  p, li { color:var(--ink-soft); }
  ol, ul { padding-left:22px; display:flex; flex-direction:column; gap:8px; margin-top:8px; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--linen); font-weight: 700; font-size: .92rem;
  padding: 10px 18px; border-radius: 0 0 12px 12px; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* FAQ recipes */
.recipes { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 10px; }
.recipe { background:#fff; border:1.5px solid rgba(23,37,28,.12); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:7px; font-size:.92rem; }
.recipe b { font-size:.95rem; }
.recipe code { align-self:flex-start; background:rgba(240,165,0,.14); padding:4px 10px; border-radius:8px; }
.recipe span { color:var(--ink-soft); font-size:.86rem; line-height:1.45; }
@media (max-width:640px){ .recipes { grid-template-columns:1fr; } }