/* Shared styles for the two legally required pages, /accessibility and /privacy.
   Same tokens as the home page, which keeps its CSS inline on purpose: it is the
   conversion page and an extra render-blocking request there costs Google Ads
   quality score. These pages are low traffic and rarely change, so one shared
   file is the better trade here. If the palette moves, it moves in both places. */

:root{
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --muted:#5A5A5A;
  --rule:#E4E4E4;
  --measure:40rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Heebo",-apple-system,"Segoe UI","Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:1.5rem}
a{color:inherit}

h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.03em;line-height:1.15}
h1{font-size:clamp(1.6rem,5.5vw,2.4rem)}
h2{font-size:clamp(1.15rem,3.8vw,1.4rem);margin-top:2.75rem;letter-spacing:-0.02em}
h3{font-size:1.0625rem;margin-top:1.75rem;letter-spacing:-0.01em}
p{margin:1rem 0 0}
ul{margin:1rem 0 0;padding-inline-start:1.25rem}
li{margin-top:.5rem}
b,strong{font-weight:800}

/* masthead, same lockup as the home page but linking back to it */
.masthead{padding-block:1.75rem 0}
.lockup{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.lockup .mark{width:3.25rem;flex:none;color:var(--ink);height:auto;fill:currentColor}
.lockup .name{font-weight:800;font-size:1.0625rem;letter-spacing:-0.02em;line-height:1.15}
.lockup .name small{
  display:block;font-weight:400;font-size:.5625rem;letter-spacing:.22em;
  color:var(--muted);text-transform:uppercase;line-height:1.4;
}

main{padding-block:clamp(2rem,7vw,3.5rem) 0}
.updated{margin-top:1rem;color:var(--muted);font-size:.9375rem}

/* a plain definition block for contact details, no card and no box */
.details{margin-top:1.25rem;border-top:1px solid var(--rule)}
.details div{display:flex;gap:1rem;justify-content:space-between;align-items:baseline;
  padding-block:.75rem;border-bottom:1px solid var(--rule)}
.details dt,.details b{color:var(--muted);font-weight:400;font-size:.9375rem;flex:none}
.details dd,.details span{margin:0;font-weight:800;text-align:end}

/* the one thing on these pages that must not be missed before publishing */
.todo{margin-top:1.25rem;padding:1rem 1.25rem;border:2px solid var(--ink);font-size:.9375rem}
.todo b{display:block;margin-bottom:.25rem}

footer{margin-top:4rem;border-top:1px solid var(--rule);padding-block:2rem 3rem;
  font-size:.875rem;color:var(--muted)}
footer ul{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
footer a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}

:where(a):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (prefers-contrast:more){:root{--muted:#2B2B2B;--rule:#0A0A0A}}