/* הספרייה המשותפת — article components.
   Loaded by the public article page and by the admin preview, so the preview
   cannot drift from what gets published.

   Palette: green is the furniture (headings, the landing zone), cream is the
   reading surface, gold is the shared accent used sparingly. */

.a-article,.a-story{
  --paper:#FAF8F4;   /* site ground */
  --panel:#F1EBDE;   /* the design's cream, deepened to keep its step over paper */
  --gold:#EDA72E;    /* the site's gold — used 44× elsewhere, so it wins */
  --head:#2F5248;
  --body:#3E4B47;    /* softer than the site's #22302F: kinder over 3000 words */
  --rule:#EAE4D6;
  --edge:#DCE6E0;
  --muted:#8A9490;

  direction:rtl; text-align:right;
  max-width:34em; margin-inline:auto;
  padding:0 clamp(20px,5vw,32px);
  font-family:'Frank Ruhl Libre',serif;
  font-size:19px; line-height:1.9; color:var(--body);
}
.a-article p{margin:0 0 1.1em; text-wrap:pretty}

/* ── סיפור ────────────────────────────────────────────────────────────────────
   A story borrows the articles' voice and none of their apparatus. Same face,
   size, leading and colour; no headings, no seams, no pull-quotes. Articles are
   structured because they argue; stories are quiet because they testify, and
   marking a line in someone's testimony edits their emphasis for them. */
.a-story{
  direction:rtl; text-align:right;
  font-family:'Frank Ruhl Libre',serif;
  font-size:19px; line-height:1.9; color:var(--body);
}
.a-story p{margin:0 0 1.1em; text-wrap:pretty}
.a-story p:last-of-type{margin-bottom:0}
.a-story a{color:var(--head); text-decoration:underline; text-underline-offset:3px}
.a-story em{font-style:italic; color:var(--head)}
.a-article a{color:var(--head); text-decoration:underline; text-underline-offset:3px}
.a-article em{font-style:italic; color:var(--head)}

/* ── כותרת ראשית: two lines, deliberately different designs ───────────────
   The light weight is what lets the literary line be large without shouting. */
.a-title{margin:0 0 34px}
.a-title-lead{
  font-family:'Assistant',sans-serif; font-weight:300;
  font-size:clamp(30px,5.2vw,46px); line-height:1.24;
  color:var(--head); margin:0 0 14px; text-wrap:balance;
}
.a-title-topic{
  font-family:'Assistant',sans-serif; font-weight:400;
  font-size:clamp(18px,2.5vw,24px); line-height:1.4;
  color:var(--head); opacity:.86; margin:0; text-wrap:balance;
}

/* ── the opening: literary entry, carrying its source ─────────────────────── */
/* The vignette panels sit narrower than the column, so they break the flush
   edge the rest of the article holds. A scene is not the argument, and the
   margin says so before the words do. */
.a-opening{
  background:var(--panel); padding:clamp(22px,4vw,30px);
  margin:0 7% 32px; border-radius:3px;
}
/* a phone has no width to give away */
@media (max-width:560px){ .a-opening{ margin-inline:0 } }
.a-opening p{
  font-family:'Assistant',sans-serif; font-weight:300;
  font-size:clamp(18px,2.2vw,21px); line-height:1.75; color:var(--head);
}
.a-opening p:last-child{margin-bottom:0}
.a-opening-src{
  font-family:'Assistant',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.04em; color:var(--gold); margin:0 0 14px;
}

/* ── מפריד יהלום: the seam between dominoes. One job only. ────────────────── */
.a-seam{display:flex; align-items:center; gap:12px; margin:46px 0 30px}
.a-seam i{flex:1 1 auto; height:1px; background:var(--rule)}
.a-seam b{width:6px; height:6px; background:var(--gold); transform:rotate(45deg); flex:none}

/* ── domino heading — a statement, never numbered ─────────────────────────── */
.a-domino h2{
  font-family:'Assistant',sans-serif; font-weight:600;
  font-size:clamp(19px,2.3vw,24px); line-height:1.35;
  color:var(--head); margin:0 0 .7em; text-wrap:balance;
}
/* תת-כותרת: body font + bold, but the heading green. Colour and spacing carry
   it, so bold stays unambiguous and no fourth size is needed. */
.a-sub{
  font-family:inherit; font-weight:700; font-size:1em;
  color:var(--head); margin:1.8em 0 .35em;
}

/* ── ציטוט ─────────────────────────────────────────────────────────────────── */
.a-quote{
  background:var(--panel); border-inline-start:2px solid var(--gold);
  margin:30px 0; padding:22px clamp(20px,3vw,26px);
}
.a-quote p{font-size:1.05em; line-height:1.85}
.a-quote p:last-of-type{margin-bottom:0}
.a-quote cite{
  display:block; margin-top:12px; font-style:normal;
  font-family:'Assistant',sans-serif; font-size:14px; color:var(--muted);
}

/* ── מוטו — a line of verse under a heading ──────────────────────────────────
   No panel, no rule, no gold: it belongs to the heading above it, not to the
   reading surface, and every accent already has its one job. The light face in
   the heading green is the opening's voice, at the opening's size: verse set
   smaller than the prose around it reads as a caption. */
.a-motto{margin:0 0 1.6em}
.a-motto p{
  font-family:'Assistant',sans-serif; font-weight:300;
  font-size:clamp(18px,2.2vw,21px); line-height:1.6;
  color:var(--head); margin:0; text-wrap:balance;
}
.a-motto cite{
  font-style:normal; font-weight:400; white-space:nowrap;
  font-family:'Assistant',sans-serif; font-size:14px; color:var(--muted);
}
/* under the article title rather than a domino heading */
.a-title + .a-motto{margin-top:-14px; margin-bottom:32px}

/* ── שורת מפתח — a sentence set larger in the running text ─────────────────
   From the designed PDF, where "ואז נפל האסימון." is set this way: the
   opening's light green voice, one step up, with room around it and no box.
   Its job is to break a long even stretch of prose, so it stays rare. It must
   never read as a heading: light where the headings are bold. */
.a-article .a-keyline{
  font-family:'Assistant',sans-serif; font-weight:300;
  font-size:clamp(21px,2.6vw,25px); line-height:1.45;
  color:var(--head); margin:1.5em auto; text-wrap:balance;
  text-align:center; max-width:26em;
}
/* A short paragraph, or a few, in the same white card as תיבת מונח / תיבת
   עובדה. Whole paragraphs run several lines, so the size steps down from the
   single line above and the text keeps the column's reading edge. */
.a-article .a-keyline-box{
  max-width:none; text-align:start; text-wrap:initial;
  font-size:clamp(19px,2.2vw,22px); line-height:1.6;
  background:#fff; border:1px solid var(--edge);
  border-top:2px solid var(--gold); padding:22px clamp(20px,4vw,34px);
}
.a-article .a-keyline-box p{margin:0 0 .7em; text-wrap:pretty}
.a-article .a-keyline-box p:last-child{margin-bottom:0}

/* ── קולות — several voices in a row, from the designed PDF ─────────────────
   The name leads its own words in a darker gold (the site gold is too pale to
   carry text), and thin rules separate the speakers without boxing them. */
.a-voices{margin:26px 0 30px}
.a-voices-src{
  font-family:'Assistant',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.04em; color:var(--gold); margin:0 0 6px;
}
.a-voice{border-top:1px solid var(--rule); padding:16px 0}
.a-voice:last-child{border-bottom:1px solid var(--rule)}
.a-voice p{font-size:.95em; line-height:1.85; margin:0 0 .7em}
.a-voice p:last-child{margin-bottom:0}
.a-voice-name{font-weight:500; font-size:1.12em; color:#A8801F; margin-inline-end:.3em}

/* ── תיבת מונח / תיבת עובדה — white card with a gold top rule ─────────────── */
.a-term,.a-fact{
  background:#fff; border:1px solid var(--edge); border-top:2px solid var(--gold);
  padding:20px clamp(18px,3vw,24px); margin:30px 0;
}
.a-term p,.a-fact p{font-size:.94em; line-height:1.8}
.a-term p:last-of-type,.a-fact p:last-of-type{margin-bottom:0}
.a-term-name,.a-fact-title{
  font-family:'Assistant',sans-serif; font-weight:600; font-size:17px;
  color:var(--head); margin:0 0 10px;
}
.a-term-name span{font-weight:400; color:var(--muted); font-size:15px}
.a-term-link{
  display:inline-block; margin-top:12px; font-family:'Assistant',sans-serif;
  font-size:14px; text-decoration:none; color:var(--gold); font-weight:600;
}

/* ── רשימה — the bullet is the gold diamond, tying lists to the seam motif ── */
.a-list{list-style:none; margin:0 0 1.3em; padding-inline-start:1.5em}
.a-list li{position:relative; margin:0 0 .6em}
.a-list li::before{
  content:""; position:absolute; inset-inline-start:-1.5em; top:.78em;
  width:5px; height:5px; background:var(--gold); transform:rotate(45deg);
}
.a-list-num{counter-reset:n}
.a-list-num li{counter-increment:n}
.a-list-num li::before{
  content:counter(n) "."; background:none; transform:none; top:0;
  width:auto; height:auto; color:var(--gold); font-weight:700;
  font-family:'Assistant',sans-serif;
}

/* ── תמונה + קרדיט ──────────────────────────────────────────────────────────
   Four treatments. Full width suits a landscape archive photograph; a portrait
   at the same width dominates the page, which is what the designed PDF avoided
   by putting images into panels and side columns. */
.a-figure{margin:32px 0}
.a-figure img{display:block; width:100%; height:auto; border-radius:3px}
.a-figure figcaption{
  font-family:'Assistant',sans-serif; font-size:13px;
  color:var(--muted); line-height:1.6; margin-top:8px;
}
/* smaller and centred — for a portrait or a book cover */
.a-figure-inset{max-width:58%; margin-inline:auto}
/* beside its text, as in the PDF's side column */
.a-figure-side{
  display:grid; grid-template-columns:38% 1fr; gap:22px; align-items:start;
}
.a-figure-side .a-figure-text p:last-child{margin-bottom:0}
/* Where the screen has a margin to give, the image steps out of the column
   into it and the paragraph keeps the full measure, reading as one more
   paragraph with a picture beside it rather than a boxed-off figure. The
   breakpoint is where the margin (beyond the article's own padding) can hold
   the image and its gap. Print and narrower screens keep the grid above. */
@media screen and (min-width:1260px){
  .a-figure-side{display:block; position:relative; margin:0 0 1.1em; --side-w:240px}
  .a-figure-side .a-figure-media{
    position:absolute; top:.45em; width:var(--side-w);
    inset-inline-start:calc(-1 * (var(--side-w) + 40px));
  }
}
/* The cream panel, as the designed PDF has it: the photograph fills a 40%
   column edge to edge, its credit runs vertically down the outer edge in white
   over a fading dark wash, and the text sits centred beside it in Assistant —
   not the body serif — under a diamond-and-rule. */
.a-figure-panel{
  display:flex; flex-direction:row; align-items:stretch; gap:0;
  background:var(--panel); border-radius:3px; overflow:hidden;
  min-height:250px;
}
.a-figure-panel .a-figure-media{
  flex:0 0 40%; align-self:stretch; position:relative; overflow:hidden;
}
.a-figure-panel .a-figure-media img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 30%; border-radius:0;
}
.a-figure-panel .a-figure-media figcaption{
  position:absolute; top:0; bottom:0; right:0; margin:0;
  display:flex; align-items:flex-end; padding:12px 7px;
  writing-mode:vertical-rl;
  font-family:'Assistant',sans-serif; font-size:11px; letter-spacing:.08em;
  color:rgba(255,255,255,.92); white-space:nowrap; line-height:1;
  background-image:linear-gradient(to left,
    rgba(20,34,31,.66) 0%, rgba(20,34,31,.32) 62%, rgba(20,34,31,0) 100%);
}
.a-figure-panel .a-figure-text{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  justify-content:center; padding:22px 24px;
}
.a-figure-accent{display:flex; align-items:center; gap:12px; margin:0 0 13px}
.a-figure-accent b{
  width:6px; height:6px; background:var(--gold);
  transform:rotate(45deg); flex:none;
}
.a-figure-accent i{flex:1 1 auto; height:1px; background:var(--gold); opacity:.5}
.a-figure-label{
  font-family:'Assistant',sans-serif; font-size:14px; font-weight:400;
  letter-spacing:.02em; color:#A8801F; margin:0 0 8px;
}
.a-figure-panel .a-figure-text p{
  font-family:'Assistant',sans-serif; font-weight:400;
  font-size:clamp(17px,2.2vw,22px); line-height:1.32;
  color:var(--head); margin:0; text-wrap:pretty;
}

/* the photograph takes two thirds, for a short line that needs little room */
.a-figure-panel-wide .a-figure-media{flex-basis:66.667%}

/* a phone is too narrow for any two-column arrangement */
@media (max-width:560px){
  .a-figure-inset{max-width:100%}
  .a-figure-side{grid-template-columns:1fr; gap:14px}
  .a-figure-panel{flex-direction:column; min-height:0}
  .a-figure-panel .a-figure-media{flex:0 0 auto; aspect-ratio:4/3}
  .a-figure-panel .a-figure-media img{height:100%}
}

/* ── הערות שוליים ─────────────────────────────────────────────────────────── */
.fn-ref{font-size:.7em; line-height:0}
.fn-ref a{text-decoration:none; color:var(--gold); font-weight:700; padding:0 2px}
.a-footnotes{margin:44px 0 0; padding-top:18px; border-top:1px solid var(--rule)}
.a-footnotes ol{list-style:none; margin:0; padding:0}
.a-footnotes li{
  position:relative; font-size:15px; line-height:1.75;
  color:var(--muted); margin:0 0 .6em; padding-inline-start:1.6em;
}
.fn-num{
  position:absolute; inset-inline-start:0; color:var(--gold);
  font-weight:700; font-family:'Assistant',sans-serif;
}
.fn-back{text-decoration:none; color:var(--gold)}

/* ── the landing: green, bordered, distinctly not the reading surface.
   The colour says "you have finished reading and returned to navigating". ─── */
.a-landing{
  max-width:34em; margin:56px auto 0;
  background:rgba(61,116,104,.07); border:1px solid rgba(47,82,72,.22);
  border-radius:3px; padding:clamp(24px,4vw,32px);
  direction:rtl; text-align:right;
  font-family:'Assistant',sans-serif; color:var(--head,#2F5248);
}
/* פתיח כותרת — reserved for the landing zone alone, never at a domino seam. */
.a-landing-bar{display:flex; align-items:center; gap:0; margin:0 0 20px}
.a-landing-bar i{height:3px; width:34px; background:#2F5248; flex:none}
.a-landing-bar b{height:3px; flex:1 1 auto; background:#EDA72E}
.a-landing h3{
  font-size:14px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#EDA72E; margin:22px 0 10px;
}
.a-landing h3:first-of-type{margin-top:0}
.a-landing ul{list-style:none; margin:0; padding:0}
.a-landing li{margin:0 0 8px; font-size:16px; line-height:1.6}
.a-landing a{color:#2F5248; text-decoration:underline; text-underline-offset:3px}
/* The way in for a reader who arrived here first. Quiet: one line, and set off
   from the article's own apparatus above it by a rule when there is any. */
.a-landing-new{margin:0; font-size:16px; line-height:1.6}
.a-landing ul + .a-landing-new{
  margin-top:22px; padding-top:16px; border-top:1px solid rgba(47,82,72,.16);
}

/* ── print: ⌘P → Save as PDF is how Ronit produces the article's PDF ─────── */
@media print{
  @page{size:A4; margin:18mm 16mm}
  html,body{background:#fff !important}
  .a-article{max-width:none; font-size:11.5pt; padding:0}
  .a-title-lead{font-size:28pt}
  .a-title-topic{font-size:16pt}
  .a-domino h2{font-size:15pt; break-after:avoid}
  .a-sub,.a-motto{break-after:avoid}
  .a-keyline{break-inside:avoid}
  .a-voice{break-inside:avoid}
  .a-opening,.a-quote,.a-term,.a-fact,.a-figure{
    break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .a-figure-inset{max-width:52%}
  .a-figure-side{grid-template-columns:36% 1fr}
  .a-seam{break-after:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .a-article a{color:inherit; text-decoration:none}
  /* The PDF is the article and nothing else. Responses keep arriving, so a
     file saved today and forwarded next month would carry a version of the
     conversation that has moved on — and they were given to the library,
     not to a document that travels on its own. */
  .a-landing,.a-echoes,.no-print{display:none !important}
  .a-footnotes{break-before:auto}
}

/* ── שמירה כ-PDF ──────────────────────────────────────────────────────────────
   The stylesheet above already sets the article for A4; this just opens the
   browser's own print dialog, where every browser and phone offers "save as
   PDF". No server, no generated file to go stale against the page. */
.a-pdf{
  max-width:34em; margin:40px auto 0;
  padding:0 clamp(20px,5vw,32px);
  direction:rtl; text-align:center;
}
.a-pdf button{
  font-family:'Assistant',sans-serif; font-size:15px; font-weight:600;
  color:#2F5248; background:none;
  border:1px solid rgba(47,82,72,.28); border-radius:999px;
  padding:11px 26px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.a-pdf button:hover{background:rgba(237,167,46,.1); border-color:#EDA72E}
.a-pdf button:focus-visible{outline:2px solid #EDA72E; outline-offset:2px}
.a-pdf p{
  font-family:'Assistant',sans-serif; font-size:13px; color:#8A9490;
  margin:10px 0 0; line-height:1.6;
}

/* ── הדים ─────────────────────────────────────────────────────────────────────
   Published responses, and the invitation to write one. Visitors see only what
   Ronit chose to publish, and cannot reply to one another — a collection of
   voices, not a conversation between strangers. Absence is invisible: nobody
   can tell how many arrived or that theirs was not among them. */
.a-echoes,.a-echo-form{
  max-width:34em; margin:44px auto 0;
  padding:0 clamp(20px,5vw,32px);
  direction:rtl; text-align:right;
  font-family:'Frank Ruhl Libre',serif; color:#3E4B47;
}
.a-echoes h2,.a-echo-form h2{
  font-family:'Assistant',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#EDA72E; margin:0 0 18px;
}
.a-echo{border-top:1px solid #EAE4D6; padding:20px 0 4px}
.a-echo:first-of-type{border-top:0; padding-top:0}
.a-echo p{font-size:17px; line-height:1.9; margin:0 0 .8em}
.a-echo-by{
  font-family:'Assistant',sans-serif; font-size:13px; color:#8A9490; margin:0 0 4px;
}
.a-echo-form{
  background:rgba(61,116,104,.06); border:1px solid rgba(47,82,72,.18);
  border-radius:3px; padding:clamp(22px,4vw,30px); margin-top:44px;
}
.a-echo-why{font-size:15px; line-height:1.75; color:#5E706B; margin:0 0 18px}
.a-echo-why a{color:#2F5248}
.a-echo-form input[type=text],.a-echo-form input[type=email],.a-echo-form textarea{
  width:100%; font-family:inherit; font-size:16px; padding:12px 14px;
  border:1px solid rgba(34,48,47,.2); border-radius:2px;
  background:#FBF7EC; color:#22302F; margin:0 0 10px;
}
.a-echo-form textarea{line-height:1.7; resize:vertical}
.a-echo-two{display:flex; gap:10px; flex-wrap:wrap}
.a-echo-two>*{flex:1 1 180px}
.a-echo-consent{
  display:flex; gap:10px; align-items:flex-start; font-size:15px;
  line-height:1.6; color:#3E4B47; margin:6px 0 14px;
}
.a-echo-consent input{margin-top:5px; width:17px; height:17px; accent-color:#EDA72E; flex:0 0 auto}
.a-echo-attr{
  font-family:'Assistant',sans-serif; font-size:14px; color:#5E706B;
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:0 0 16px;
}
.a-echo-attr label{display:flex; gap:6px; align-items:center}
.a-echo-form button{
  font-family:'Assistant',sans-serif; font-size:16px; font-weight:600;
  background:#2F5248; color:#fff; border:0; border-radius:2px;
  padding:12px 26px; cursor:pointer;
}
.a-echo-form button:hover{background:#3D7468}
.a-echo-note{font-size:13px; line-height:1.7; color:#8A9490; margin:16px 0 0}
.a-echo-thanks{font-size:17px; line-height:1.8; color:#2F5248; margin:0}
#echoMsg{font-size:14px; color:#2F5248; margin-top:10px}

/* ── כרטיסי סיפורים וחלון הקריאה ────────────────────────────────────────────
   A story is a card, not a column. One long scroll buries every voice after
   the first; a reader should see how many there are and choose. */
.story-card{
  display:block; width:100%; text-align:right; cursor:pointer;
  font-family:inherit; background:#fff;
  border:1px solid rgba(34,48,47,.14); border-top:2px solid #EDA72E;
  border-radius:3px; padding:16px 18px; margin-bottom:10px;
  transition:border-color .15s ease, transform .1s ease;
}
.story-card:hover{border-color:rgba(47,82,72,.35)}
.story-card:active{transform:translateY(1px)}
.story-card-title{
  font-family:'Assistant',sans-serif; color:#2F5248;
  font-weight:700; font-size:17px; line-height:1.4;
}
.story-card-by{font-family:'Assistant',sans-serif; font-size:13px; color:#8A9490; margin-top:6px}
.story-card-cta{
  font-family:'Assistant',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.08em; color:#EDA72E; margin-top:10px;
}

.story-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(20,34,31,.55);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
}
.story-window{
  position:relative; background:#F1EBDE;
  border-radius:4px; border-inline-start:3px solid #EDA72E;
  /* A fixed size, so every story opens into the same window. Height follows
     the viewport only, never the story — otherwise a short piece and a long one
     produce visibly different objects and the band's proportions change with
     each. Anything longer simply scrolls. */
  width:min(38em,100%);
  height:min(86vh,44em);
  overflow:auto;
  display:flex; flex-direction:column;
  --pad-y:clamp(28px,4vw,40px);
  --pad-x:clamp(22px,4vw,38px);
  padding:var(--pad-y) var(--pad-x);
  direction:rtl; text-align:right;
  box-shadow:0 18px 50px rgba(20,34,31,.28);
  outline:none;
}
.story-close{
  position:absolute; inset-inline-start:14px; top:12px;
  background:none; border:0; cursor:pointer;
  font-size:20px; line-height:1; color:#8A9490; padding:6px 8px;
}
.story-close:hover{color:#2F5248}
.story-window-title{
  font-family:'Assistant',sans-serif; font-weight:700;
  font-size:clamp(19px,2.4vw,23px); color:#2F5248; margin:0 0 6px; line-height:1.35;
}
.story-window-by{
  font-family:'Assistant',sans-serif; font-size:13px;
  color:#8A9490; margin:0 0 20px;
}
/* the reading window is a comfortable measure on its own, so the story does
   not need the page's narrower column */
.story-window .a-story{font-size:18px; line-height:1.85}

/* The band behind a story.
   It lives in an inner wrapper whose height is the whole scrollable content, so
   it scrolls with the words rather than hanging fixed behind them — and negative
   insets carry it back out through the window's padding, so its short sides meet
   the frame instead of stopping just inside it. A band ending a few pixels short
   of the edge reads as a mistake; one that touches reads as a decision.
   Each story carries its own geometry: fourteen identical windows would be a
   template, not a design. */
.story-window-inner{
  position:relative;
  /* Fill the window when the story is short, grow past it when long. Without
     this the wrapper is only as tall as the text, so a band anchored to it ends
     where the words end rather than at the frame. */
  flex:1 0 auto;
}
.story-accent{
  position:absolute; pointer-events:none; z-index:0;
  background:rgba(61,116,104,.16);
}
/* אנכי — full height, bleeding past the padding at both ends */
.story-accent-v{ top:calc(-1 * var(--pad-y)); bottom:calc(-1 * var(--pad-y)); }
/* אופקי — full width, bleeding to both side edges */
.story-accent-h{ inset-inline:calc(-1 * var(--pad-x)); }
/* חופשי — a shape inside the text area, rounded because it touches nothing */
.story-accent-free{ border-radius:2px; }
.story-window-inner > .story-window-title,
.story-window-inner > .story-window-by,
.story-window-inner > .a-seam,
.story-window-inner > .a-story{ position:relative; z-index:1; }
@media print{ .story-accent{display:none} }