/* THE ARMCHAIR - the theme stylesheet for a Hebrew explainer, right to left (theme "armchair"). HAND WRITTEN, not compiled, and linked instead of static/site.css by templates-armchair/partials/head.html. No font is fetched: the Hebrew stack is Heebo / Assistant / Noto Sans Hebrew / Arial Hebrew with a system fallback, so the page needs no third party origin and the strict CSP covers it unchanged. Three rules this file exists to hold, from W3C hlreq and the WAI older-users work (sources in S1YZ/next24/site-designs/saba-yossi/DESIGN.md): 1. DIRECTION IS MARKUP. dir="rtl" is on ; nothing here sets `direction` for layout. Every flip is a logical property (margin-inline, border-block-end, text-align:start), so one stylesheet serves both. 2. HEBREW HAS NO UPPERCASE AND NO ITALIC. There is no text-transform and no font-style in this file. A term is emphasised with weight or with letter-spacing (.term), which is what the script actually does. 3. BODY TEXT IS 21px ON 36px, and it does not shrink on a phone. Hebrew letters have a large body and few ascenders, so the same px size reads smaller than Latin; measured ink on paper here is 17.62:1. Every Latin run (a date, an email, an English gloss) is wrapped in .ltr or .gloss, which isolate it. */ :root{ --paper:#FBF7F0; --ink:#14110D; --ink2:#46403A; --ink3:#3A342C; --ochre:#7A4A10; --ochre-soft:#8A5A16; --rule:#E0D8CB; --band:#2B2620; --band-accent:#E8C87A; --box:#EDE5D8; --he:"Heebo","Assistant","Noto Sans Hebrew","Arial Hebrew","Segoe UI",Arial,system-ui,sans-serif; --lat:system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Liberation Sans",Arial,sans-serif; --num:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;font-size:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--he); font-size:1.3125rem;line-height:2.25rem;text-align:start} .wrap{max-inline-size:62ch;margin-inline:auto;padding-inline:1.5rem} .wide{max-inline-size:78ch} a{color:var(--ochre);text-decoration:underline;text-underline-offset:3px} a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} b,strong{font-weight:700} b.term{letter-spacing:.06em} /* Hebrew highlights a term with tracking, never with italics */ .ltr{direction:ltr;unicode-bidi:isolate;font-family:var(--num);font-variant-numeric:tabular-nums} .gloss{direction:ltr;unicode-bidi:isolate;text-align:left;font-family:var(--lat); font-size:1.0625rem;line-height:1.75rem;color:var(--ink2);padding-inline-start:1rem;margin:.25rem 0 1.25rem} /* header */ header{border-block-end:1px solid var(--rule)} .bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;justify-content:space-between;padding-block:1rem} .mark{font-size:1.75rem;font-weight:700;color:var(--ink);text-decoration:none;line-height:2.25rem} .mark small{display:block;font-size:1.0625rem;font-weight:400;color:var(--ink3);line-height:1.5rem} nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.25rem;margin:0;padding:0} nav a{display:inline-flex;align-items:center;min-block-size:3rem;font-size:1.1875rem;color:var(--ink3);text-decoration:none} nav a[aria-current="page"]{color:var(--ink);font-weight:700;border-block-end:3px solid var(--ochre)} nav a:hover{color:var(--ink)} /* disclosure band: static, two lines, Hebrew then English. No marquee: a moving line is unreadable slowly. */ .band{background:var(--band);color:var(--paper);padding-block:.75rem} .band .he{font-size:1.125rem;line-height:1.75rem} .band .en{direction:ltr;unicode-bidi:isolate;text-align:left;font-family:var(--lat);font-size:.9375rem;line-height:1.5rem;color:#E9E2D6;margin-block-start:.25rem} .band b{color:var(--band-accent)} main{padding-block:2rem} h1{font-size:2.125rem;line-height:2.875rem;font-weight:700;margin:0 0 1rem} h2{font-size:1.625rem;line-height:2.375rem;font-weight:700;margin:2.5rem 0 .75rem} p{margin:0 0 1.25rem} .kicker{font-size:1.0625rem;color:var(--ink3);margin:0 0 .5rem} .kicker .ltr{color:var(--ink3)} /* film card */ .film{border:1px solid var(--rule);background:#FFFDF8;padding:1.25rem;margin-block:2rem} .poster{background:var(--box);border:1px solid var(--rule);aspect-ratio:16/9;display:flex; align-items:center;justify-content:center;text-align:center;color:var(--ink3);font-size:1rem;padding:1rem} .playrow{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-block-start:1rem} .play{display:inline-flex;align-items:center;gap:.625rem;min-block-size:3.5rem;padding:.5rem 1.25rem; background:var(--ink);color:var(--paper);font-family:var(--he);font-size:1.1875rem;font-weight:700; border:1px solid var(--ink);cursor:pointer} .play .tri{font-size:1.25rem;line-height:1} /* a play triangle is a media control: it is NOT mirrored in RTL */ .dur{font-family:var(--num);font-size:1rem;color:var(--ink3);direction:ltr;unicode-bidi:isolate} .note{font-size:1rem;color:var(--ink2);margin:0} /* transcript */ .transcript{border-block-start:1px solid var(--rule);margin-block-start:1.5rem;padding-block-start:1rem} .line{margin-block-end:1.25rem} .line .he{font-size:1.25rem;line-height:2.125rem} .who{font-size:.9375rem;color:var(--ink3);margin:0 0 .25rem} /* list of earlier explanations */ ul.rows{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--rule)} ul.rows li{border-block-end:1px solid var(--rule)} ul.rows a{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between; min-block-size:3.5rem;padding-block:.75rem;text-decoration:none;color:var(--ink)} ul.rows a:hover{background:#F5EFE4} ul.rows .q{font-size:1.25rem;line-height:2rem;text-decoration:underline;text-underline-offset:3px;color:var(--ochre)} ul.rows .meta{font-family:var(--num);font-size:.9375rem;color:var(--ink3);direction:ltr;unicode-bidi:isolate} /* the one set */ .set{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-block:1.5rem} figure{margin:0} .shot{background:var(--box);border:1px solid var(--rule);aspect-ratio:4/3;display:flex;align-items:center; justify-content:center;text-align:center;color:var(--ink3);font-size:.9375rem;padding:.75rem} figcaption{font-size:1rem;line-height:1.625rem;color:var(--ink2);padding-block-start:.5rem} .mailto{font-family:var(--num);font-size:1.125rem;direction:ltr;unicode-bidi:isolate} footer .gloss{color:#CFC6B6;padding-inline-start:0} footer{background:var(--band);color:var(--paper);padding-block:2rem 2.5rem;margin-block-start:3rem} footer a{color:var(--band-accent)} footer h2{font-size:1.1875rem;line-height:1.75rem;margin:0 0 .5rem;color:var(--band-accent)} footer p{font-size:1.0625rem;line-height:1.75rem;margin:0 0 1rem} footer .en{direction:ltr;unicode-bidi:isolate;text-align:left;font-family:var(--lat);font-size:1rem;line-height:1.625rem;color:#E9E2D6} .fbot{border-block-start:1px solid #4A423A;margin-block-start:1.5rem;padding-block-start:1rem; display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.9375rem;color:#CFC6B8} @media (max-width:640px){ .set{grid-template-columns:1fr} h1{font-size:1.75rem;line-height:2.5rem} /* body size does NOT shrink on mobile: the reader is the reason for the size */ } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---- what the real build needs on top of the prototype -------------------------------------- */ .plate img{display:block;inline-size:100%;block-size:auto;border:1px solid var(--rule);background:var(--box)} .plate figcaption{font-size:1.0625rem;line-height:1.75rem;color:var(--ink2);padding-block-start:.5rem} .plate{margin:0 0 2rem} .sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem} .sheet figure{margin:0} .sheet img{display:block;inline-size:100%;block-size:auto;border:1px solid var(--rule);background:var(--box)} .sheet figcaption{font-size:1rem;line-height:1.625rem;color:var(--ink2);padding-block-start:.375rem} .sheet .pn{font-family:var(--num);direction:ltr;unicode-bidi:isolate;color:var(--ink);font-weight:700} .facts{list-style:none;margin:0 0 2rem;padding:0;border-block-start:1px solid var(--rule)} .facts li{border-block-end:1px solid var(--rule);padding-block:.75rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between} .facts .k{color:var(--ink3);font-size:1.0625rem} .facts .v{font-family:var(--num);direction:ltr;unicode-bidi:isolate;font-size:1.0625rem} .player video{display:block;inline-size:auto;max-inline-size:100%;block-size:auto;max-block-size:80vh;margin-inline:auto;background:#000;border:1px solid var(--rule)} /* his own voice, above the written transcript: same column, same 21px reading size */ .spoken{margin:22px 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .spoken audio{width:100%;max-width:520px;display:block;margin-block:10px 14px; /* logical, not left: on this right-to-left page the control must start where the text starts, and a screenshot showed a block with a max-width sitting flush LEFT of a right-aligned column */ margin-inline-start:0;margin-inline-end:auto} /* SHOW ME ON THE PAGE (admin.html, owner only): a picture place is a figure with id="slot-", so the link page.html#slot- lands on it and this outline marks it. No script: this page ships script-src 'none'. An outline has no direction, so nothing here needs a logical property. */ [id^="slot-"]{scroll-margin-top:24px} [id^="slot-"]:target{outline:3px solid var(--ochre);outline-offset:6px}