/* r-tip.com. Plain CSS, no build step, Safari 14 floor. One stylesheet.

   A WHITE PAGE (Ilai, 2026-09-21), matching the R-tip mark: black brush and
   one red dot. The red is sampled from that dot and is used the way the dot
   is: small, for focus and hover, never as a filled button.

   THE TOP BAR IS RONILEVAVI.COM'S BAR (Ilai: "exactly like ronilevavi.com on
   mobile and PC"). The "bar" block below is copied from roni-a/assets/site.css
   unchanged except that the mark is an image. If the two ever need to match
   again, diff that block, not the whole file.

   THERE IS NO prefers-reduced-motion QUERY IN THIS FILE, and there must never
   be one. That setting is turned on for a whole operating system, not for a
   website. The «עצירת אנימציות» switch in the accessibility panel is the only
   thing here that may stop motion. */

:root{
  /* measured on white: ink 16.8:1, muted 9.0:1, field 5.1:1, red 4.9:1 */
  --canvas:#ffffff;
  --panel:#f5f5f7;
  --edge:#e3e3e6;
  --field:#6e6e73;
  --ink:#1d1d1f;
  --muted:#46464b;
  --red:#da251d;

  --bar:#ffffff;
  --bar-ink:#1d1d1f;
  --hdr:48px;
  --btn-r:14px;

  --sans:"Assistant",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --a11y-scale:1;
  --gut:clamp(20px, 5vw, 64px);
  --maxw:1180px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--sans);
  font-size:calc(17px * var(--a11y-scale));line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,video{max-width:100%}
img{display:block;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.04}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:60}
.skip:focus{inset-inline-start:12px;top:12px;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:var(--btn-r);font-weight:700;text-decoration:none}

/* =====================================================================
   THE BAR. ronilevavi.com's (and so sg-site's), measurement for measurement.
   ===================================================================== */

.bar{position:fixed;left:0;right:0;z-index:30;display:flex;align-items:center;
  background:var(--bar);color:var(--bar-ink)}
.bar-top{top:0;height:var(--hdr);padding-top:env(safe-area-inset-top);
  justify-content:center;background:rgba(255,255,255,.74);
  border-bottom:1px solid rgba(0,0,0,.08)}
/* GLASS (Ilai, 2026-09-21, twice: "give the top bar a glass effect", then
   "a little bit more glass, it's almost not visible on the white"). Glass
   over white has nothing to show through, so it has to be SEEN as a pane: a
   faint cool-grey tint, a bright top edge, a darker hairline under it and a
   soft shadow. Over the photographs the blur does the rest. */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .bar-top{background:linear-gradient(to bottom, rgba(246,246,249,.78), rgba(232,233,238,.58));
    -webkit-backdrop-filter:saturate(200%) blur(24px);
    backdrop-filter:saturate(200%) blur(24px);
    border-bottom:1px solid rgba(0,0,0,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.45),
      0 6px 22px rgba(0,0,0,.10)}
}

.menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  column-gap:26px;row-gap:3px;max-width:100%;padding:0 130px 0 180px;height:100%}
.menu a{color:var(--bar-ink);text-decoration:none;white-space:nowrap;
  font-family:var(--sans);
  font-size:calc(14px * var(--a11y-scale));font-weight:600;line-height:1.25;
  letter-spacing:.01em;opacity:.88;transition:opacity .15s ease;
  -webkit-tap-highlight-color:transparent}
.menu a:hover,.menu a:active{opacity:1}

.toprow{display:contents}

.logo{position:absolute;right:20px;top:50%;transform:translateY(-50%);
  display:block;text-decoration:none;color:var(--bar-ink);line-height:0}
.logo img{display:block;height:34px;width:auto}

.tools{display:flex;align-items:center;gap:10px}
@media (min-width: 901px){
  .tools{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
}

.lang{position:static;
  appearance:none;-webkit-appearance:none;background:#f5f5f7;border:0;
  border-radius:var(--btn-r);color:var(--bar-ink);
  font:700 calc(13px * var(--a11y-scale))/1 var(--sans);
  letter-spacing:.04em;height:34px;min-width:52px;padding:0 12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease}
.lang:active{background:#e8e8ed}

.a11y-btn,.wa{appearance:none;-webkit-appearance:none;border:0;background:#f2f2f4;
  color:var(--bar-ink);width:44px;height:34px;border-radius:var(--btn-r);padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease}
.a11y-btn:active,.wa:active{background:#e6e6ea}
.a11y-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.a11y-btn svg circle{fill:currentColor;stroke:none}
.wa svg{width:20px;height:20px;fill:currentColor}

@media (min-width: 901px){
  .menu a[aria-current]{position:relative;opacity:1;font-weight:800;color:var(--bar-ink)}
  .menu a[aria-current]::after{content:"";position:absolute;
    inset-inline:0;bottom:-8px;height:2px;border-radius:1px;background:#b3491d}
}

/* Phones and small tablets: the PC bar, not a black block, and one thin row
   (Ilai, 2026-09-21). No name here (the page opens on it in large type), no
   WhatsApp (it floats, below): just the links, centred, and EN + access on the
   physical left as on the PC. Fixed over the page like the PC's, so the film
   shows through it; the inner pages' heads carry the extra top room. */
@media (max-width: 900px){
  :root{ --hdr:44px; }
  /* The PC's half-transparent glass, floating over the page (Ilai asked for
     the PC look, 2026-09-21), and it slides away while scrolling down and
     back on the first scroll up (app.js adds .bar-hide). */
  .bar-top{height:calc(var(--hdr) + env(safe-area-inset-top));
    -webkit-transition:-webkit-transform .28s ease;transition:transform .28s ease}
  .bar-top.bar-hide{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
  .bar .wa{display:none}
  /* the R-tip logo replaces the «הסטודיו» link on phones (Ilai, 2026-09-21),
     so the big logo at the top of the page is not shown there */
  .logo{right:12px;top:calc(50% + env(safe-area-inset-top) / 2)}
  .logo img{height:28px}
  .menu a[href$="#studio"]{display:none}
  .tools{position:absolute;left:10px;top:calc(50% + env(safe-area-inset-top) / 2);
    transform:translateY(-50%);gap:6px}
  .lang{height:30px;min-width:40px;padding:0 9px;font-size:calc(12px * var(--a11y-scale))}
  .menu{width:100%;padding:0 84px 0 96px;column-gap:18px;flex-wrap:nowrap}
  .menu a{font-size:calc(14px * var(--a11y-scale))}
  .menu a[aria-current]{position:relative;opacity:1;font-weight:800;color:var(--bar-ink)}
  .menu a[aria-current]::after{content:"";position:absolute;
    inset-inline:0;bottom:-6px;height:2px;border-radius:1px;background:#b3491d}
}

/* No floating WhatsApp button on this site (Ilai, 2026-09-21: "remove the
   whatsapp float button"). On a phone WhatsApp is one of the five contact
   icons; on a PC it is also in the bar. */

/* These three live down HERE and not in the phone block above on purpose:
   their base rules are declared after it, and at equal specificity the later
   plain rule wins, so a phone override placed earlier is silently ignored.
   Same trap sg-site records in its own sheet. */
@media (max-width: 900px){
  .a11y-btn,.wa{width:34px;height:30px}
  .a11y-btn svg{width:16px;height:16px}
  .wa svg{width:17px;height:17px}
}

/* =====================================================================
   LAYOUT
   ===================================================================== */

main{display:block}
.inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.inner.narrow{max-width:760px}
.sec{padding-block:clamp(52px, 7vw, 96px)}
/* one quiet hairline between the sections, fading at both ends */
.sec + .sec{position:relative}
.sec + .sec::before{content:"";position:absolute;top:0;left:50%;
  width:calc(min(100%, var(--maxw)) - var(--gut) * 2);height:1px;
  -webkit-transform:translateX(-50%);transform:translateX(-50%);
  background:linear-gradient(to right, transparent, rgba(0,0,0,.12) 12%, rgba(0,0,0,.12) 88%, transparent)}

.h1{font-size:clamp(34px, 6.2vw, 58px)}
.h2{font-size:clamp(25px, 3.6vw, 38px)}
.body{color:var(--muted);margin-top:1.05em;max-width:62ch}
.lead{color:var(--muted);margin-top:1em;font-size:calc(19px * var(--a11y-scale));max-width:62ch}
.note{color:var(--field);margin-top:1.2em;font-size:calc(14.5px * var(--a11y-scale))}

.page-head{padding-block:calc(var(--hdr) + clamp(40px, 7vw, 92px)) 0}

/* =====================================================================
   THE STUDIO. The mark, large, then Roni's three paragraphs. The first
   paragraph is the one line a visitor must read, so it is the ink colour.
   ===================================================================== */

.sec-studio{padding-top:calc(var(--hdr) + clamp(44px, 8vw, 110px))}
.mark{margin:0 0 clamp(28px,4vw,48px)}
.mark img{width:min(360px, 62vw);height:auto}
/* phones: the logo lives in the bar, so the page opens on the words. The h1
   stays for screen readers and search, clipped rather than removed. */
@media (max-width: 900px){
  .mark{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .sec-studio{padding-top:calc(var(--hdr) + 36px)}
}
.sec-studio .lead{max-width:60ch}
.sec-studio .lead.first{color:var(--ink);font-weight:600;
  font-size:calc(22px * var(--a11y-scale));line-height:1.5;margin-top:0}
@media (min-width: 901px){ .sec-studio .lead.first{font-size:calc(25px * var(--a11y-scale))} }

/* =====================================================================
   THE WORK. All 125 pieces in THREE ROWS that drift slowly left to right
   (Ilai, 2026-09-21). The strip is a real horizontal scroller, so a finger
   or a trackpad can move it too; app.js adds the drift. It runs edge to
   edge, fading at both ends. No captions on the tiles; the lightbox has them.
   ===================================================================== */

.pf-wrap{margin-top:clamp(26px,3.5vw,44px);direction:ltr;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent)}
.pf-wrap::-webkit-scrollbar{display:none}
.pf-track{display:flex;width:-webkit-max-content;width:max-content}
.pf{--t:clamp(118px, 16vw, 236px);--g:8px;
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(3, var(--t));
  grid-auto-columns:var(--t);gap:var(--g);padding-right:var(--g)}
@media (max-width: 560px){ .pf{--g:6px} }
.pf a{position:relative;display:block;width:100%;height:100%;overflow:hidden;
  border-radius:10px;background:var(--panel);-webkit-user-drag:none}
.pf picture{display:block;width:100%;height:100%}
.pf img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.pf a:hover img{transform:scale(1.04)}
.pf-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;background:rgba(0,0,0,.55);pointer-events:none}
.pf-play::after{content:"";position:absolute;left:21px;top:16px;
  border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}

/* the lightbox (app.js builds it). Black, the picture whole, the caption
   under it, arrows on the sides; on a phone, swipe. */
.lb{position:fixed;inset:0;z-index:50;background:#0b0b0c;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 12px calc(20px + env(safe-area-inset-bottom));color:#fff;
  -webkit-user-select:none;user-select:none}
.lb-stage{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:4px;background:#111}
.lb-cap{flex:0 0 auto;margin-top:14px;min-height:1.5em;text-align:center;
  font-size:calc(16px * var(--a11y-scale));font-weight:600;max-width:60ch;color:#f2f2f2}
.lb-count{display:block;color:#9a9a9f;font-weight:400;font-size:calc(13px * var(--a11y-scale));margin-top:2px}
.lb button{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;border-radius:50%;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease}
.lb button:hover{background:rgba(255,255,255,.24)}
.lb button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lb-close{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px}
.lb-prev,.lb-next{position:absolute;top:50%;margin-top:-24px}
.lb-prev{left:14px}
.lb-next{right:14px}
@media (max-width: 700px){ .lb .lb-prev,.lb .lb-next{display:none} .lb{padding-top:64px} }
html.lb-open,html.lb-open body{overflow:hidden}

/* =====================================================================
   THE CLIENT WALL, as on ronilevavi.com. Logos only; each <img> carries its
   own size from build.py (equal area). On white the tiles keep a hairline.
   ===================================================================== */

.wall{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(128px, 1fr))}
.wall-wrap{margin-top:clamp(26px,3.5vw,44px)}
.wall-dup{display:none}
.wall li{border:1px solid var(--edge);border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  height:60px;padding:0 12px;overflow:hidden}
.wall li img{max-width:100%;height:auto}

/* Phones: one row of logos drifting across, instead of a tall grid. The
   track holds the list twice and moves by exactly one copy, so no seam. */
@media (max-width: 700px){
  .wall-wrap{overflow:hidden;direction:ltr;margin-inline:calc(var(--gut) * -1);
    -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)}
  .wall-track{display:flex;width:-webkit-max-content;width:max-content;
    -webkit-animation:wall-drift 80s linear infinite;animation:wall-drift 80s linear infinite}
  .wall,.wall-dup{display:flex;gap:8px;padding-right:8px}
  .wall li{flex:0 0 104px;height:54px;padding:0 10px}
}
@-webkit-keyframes wall-drift{from{-webkit-transform:translateX(-50%)}to{-webkit-transform:translateX(0)}}
@keyframes wall-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* =====================================================================
   MORE BY RONI. Three plain links in a row: the name, what it is, the
   address. No boxes; a rule above each, and the red only on hover.
   ===================================================================== */

.sites{margin-top:clamp(22px,3vw,36px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(20px,3vw,40px)}
@media (max-width: 760px){ .sites{grid-template-columns:1fr} }
.sites a{display:block;padding:18px 0 20px;border-top:1px solid var(--ink);
  text-decoration:none;transition:border-color .2s var(--ease)}
.sites b{display:block;font-weight:800;font-size:calc(21px * var(--a11y-scale));
  letter-spacing:-.02em;line-height:1.25}
.sites span{display:block;color:var(--muted);margin-top:4px}
.sites small{display:block;color:var(--field);margin-top:6px;
  font-size:calc(13.5px * var(--a11y-scale));text-align:start}
html[dir="rtl"] .sites small{text-align:right}
.sites b::after{content:" \2190";color:var(--red);opacity:0;
  transition:opacity .2s var(--ease)}
html[dir="ltr"] .sites b::after{content:" \2192"}
.sites a:hover{border-color:var(--red)}
.sites a:hover b::after,.sites a:focus-visible b::after{opacity:1}

/* =====================================================================
   CONTACT: five round icons and nothing else, as on ronilevavi.com, in
   ink on white instead of frosted glass (there is no film behind them).
   ===================================================================== */

.reach{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3.5vw,40px)}
/* room under the icons for the PC's phone/email bubble (app.js), PCs only */
@media (hover: hover) and (pointer: fine){ .reach{margin-bottom:84px} }
.reach a{display:flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:50%;color:var(--ink);background:#fff;border:1px solid rgba(0,0,0,.16);
  transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease}
.reach a:hover,.reach a:focus-visible{border-color:var(--red);color:var(--red)}
.reach a:active{transform:scale(.95)}
.reach svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.reach svg .f,.reach svg.solid,.reach svg.solid path{fill:currentColor;stroke:none}
@media (max-width: 560px){ .reach{gap:10px} .reach a{width:54px;height:54px} .reach svg{width:23px;height:23px} }
/* the PC bubble for phone and email (app.js) */
.reach li{position:relative}
.reach-tip{position:absolute;top:calc(100% + 12px);left:50%;z-index:6;
  -webkit-transform:translateX(-50%);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 16px;border-radius:14px;white-space:nowrap;
  background:#fff;border:1px solid var(--edge);color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.14);font-size:calc(14px * var(--a11y-scale))}
.reach-tip b{font-size:calc(17px * var(--a11y-scale));font-weight:800;letter-spacing:.01em;
  -webkit-user-select:all;user-select:all}
.reach-tip small{color:var(--red);font-size:calc(12.5px * var(--a11y-scale));font-weight:700}

/* prose pages */
.sec-prose .h2{margin-top:2em;font-size:clamp(21px,2.5vw,28px)}
.sec-prose .h2:first-child{margin-top:0}
.dl{margin-top:1.2em}
.dl dt{font-weight:700;margin-top:1em}
.dl dd{margin:.2em 0 0;color:var(--muted)}
.sec-prose a,.back{color:var(--ink);text-underline-offset:3px}
.back{display:inline-block;margin-top:1.6em;font-weight:700}
.back:hover,.sec-prose a:hover{color:var(--red)}

/* footer: one thin line */
.foot{border-top:1px solid var(--edge);padding-block:12px calc(12px + env(safe-area-inset-bottom));
  margin-top:clamp(24px,4vw,48px)}
.foot .inner{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;
  justify-content:space-between}
.flinks{display:flex;flex-wrap:wrap;gap:4px 16px}
.flinks a,.fsmall{color:var(--field);text-decoration:none;
  font-size:calc(12px * var(--a11y-scale));line-height:1.5}
.flinks a:hover{color:var(--red)}
@media (max-width: 560px){ .foot .inner{justify-content:center;text-align:center} .flinks{justify-content:center} }

/* =====================================================================
   THE ONE ENTRANCE. Sections arrive; nothing else moves.
   ===================================================================== */

.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0s)}
.reveal.in{opacity:1;transform:none}

/* AND THE PAGE MUST SURVIVE ITS OWN SCRIPT DYING. The rule above hides
   everything it is on and hands the reveal to app.js. If that script never
   parses, every word on the page would be invisible. The pre-paint script in
   the head sets data-js; if it never ran, nothing is hidden. */
html:not([data-js]) .reveal{opacity:1;transform:none;transition:none}

/* =====================================================================
   THE ACCESSIBILITY PANEL (IS 5568)
   ===================================================================== */

.a11y-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.52)}
.a11y-panel{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,380px);max-height:86vh;overflow:auto;background:#fff;color:#1d1d1f;
  border-radius:18px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.44);
  font-family:var(--sans);font-size:calc(15px * var(--a11y-scale));
  direction:rtl;text-align:right}
html[lang="en"] .a11y-panel{direction:ltr;text-align:left}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px}
.a11y-head h2{font-size:calc(17px * var(--a11y-scale));color:#1d1d1f;letter-spacing:0}
.a11y-close{appearance:none;-webkit-appearance:none;border:0;background:#f2f2f4;
  width:36px;height:36px;border-radius:50%;cursor:pointer;color:#1d1d1f;
  display:flex;align-items:center;justify-content:center}
.a11y-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.a11y-row{margin-bottom:14px}
.a11y-row > span{display:block;margin-bottom:8px;font-weight:600}
.a11y-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.a11y-steps button,.a11y-toggles button{appearance:none;-webkit-appearance:none;border:0;
  background:#f2f2f4;color:#1d1d1f;border-radius:var(--btn-r);min-height:44px;
  padding:0 10px;cursor:pointer;font:inherit;font-size:.86em;font-weight:600;
  -webkit-tap-highlight-color:transparent;width:100%}
.a11y-steps button[aria-pressed="true"],
.a11y-toggles button[aria-pressed="true"]{background:#1d1d1f;color:#fff}
.a11y-toggles{display:grid;gap:8px;margin-bottom:14px}
.a11y-reset{appearance:none;-webkit-appearance:none;border:1px solid rgba(0,0,0,.18);
  background:#fff;color:#1d1d1f;border-radius:var(--btn-r);min-height:44px;width:100%;
  cursor:pointer;font:inherit;font-weight:600}
[hidden]{display:none !important}

/* --- what the six settings do ------------------------------------- */

:root{--a11y-scale:1}
html[data-a11y-font="1"]{--a11y-scale:1.125}
html[data-a11y-font="2"]{--a11y-scale:1.25}
html[data-a11y-font="3"]{--a11y-scale:1.5}

/* Doubled attribute on purpose: it has to outrank anything else that paints
   this page, and a tie decided by source order is exactly the kind of thing
   that changes by accident. High contrast is a legal requirement. */
html[data-a11y-contrast][data-a11y-contrast]{
  --canvas:#ffffff; --panel:#ffffff; --edge:#000000; --field:#000000;
  --ink:#000000; --muted:#000000; --red:#0000cc;
  --bar:#ffffff; --bar-ink:#000000;
}
html[data-a11y-contrast][data-a11y-contrast] .bar-top{
  background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:2px solid #000;box-shadow:none}
html[data-a11y-contrast][data-a11y-contrast] .lang,
html[data-a11y-contrast][data-a11y-contrast] .a11y-btn,
html[data-a11y-contrast][data-a11y-contrast] .wa{
  background:#fff;box-shadow:inset 0 0 0 2px #000}
html[data-a11y-contrast][data-a11y-contrast] .menu a{color:#000;opacity:1}
html[data-a11y-contrast][data-a11y-contrast] .menu a[aria-current]{
  background:#000;color:#fff;box-shadow:none}
html[data-a11y-contrast][data-a11y-contrast] .menu a[aria-current]::after{background:#000}
html[data-a11y-contrast][data-a11y-contrast] .sec + .sec::before{background:#000}
html[data-a11y-contrast][data-a11y-contrast] .wall li{border-color:#000;background:#fff}
html[data-a11y-contrast][data-a11y-contrast] .wall li img{filter:grayscale(1) contrast(1.6)}
html[data-a11y-contrast][data-a11y-contrast] .sites a{border-top-width:2px;border-color:#000}
html[data-a11y-contrast][data-a11y-contrast] .reach a{border-color:#000;color:#000;background:#fff}
html[data-a11y-contrast][data-a11y-contrast] .pf a{outline:2px solid #000}
html[data-a11y-contrast][data-a11y-contrast] .lb{background:#000}
html[data-a11y-contrast][data-a11y-contrast] .lb button{background:#fff;color:#000}
html[data-a11y-contrast][data-a11y-contrast] .reach-tip{background:#fff;color:#000;border-color:#000}

/* Greyscale sits on the root only. The root is exempt from the rule that a
   filter makes a containing block, so fixed and sticky things keep working. */
html[data-a11y-grayscale]{filter:grayscale(1)}

html[data-a11y-links] a{text-decoration:underline !important;
  text-decoration-thickness:2px;text-underline-offset:3px}
html[data-a11y-links] a:not(:has(img)):not(:has(picture)):not(:has(svg)){
  background-color:rgba(218,37,29,.12)}

html[data-a11y-readable]{letter-spacing:normal}
html[data-a11y-readable] .h1,html[data-a11y-readable] .h2,
html[data-a11y-readable] .sites b{letter-spacing:normal;font-weight:700}

html[data-a11y-motion] *,
html[data-a11y-motion] *::before,
html[data-a11y-motion] *::after{
  animation:none !important;transition:none !important;scroll-behavior:auto !important}
html[data-a11y-motion] .reveal{opacity:1 !important;transform:none !important}
html[data-a11y-motion] .wall-wrap{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
html[data-a11y-motion] .wall-dup{display:none}
html[data-a11y-motion] .pf-dup{display:none}