@font-face{font-family:H;font-style:normal;font-weight:300;font-display:swap;src:url(assets/h-300.ttf) format("truetype")}
@font-face{font-family:H;font-style:normal;font-weight:400;font-display:swap;src:url(assets/h-400.ttf) format("truetype")}
@font-face{font-family:H;font-style:normal;font-weight:500;font-display:swap;src:url(assets/h-500.ttf) format("truetype")}
@font-face{font-family:H;font-style:normal;font-weight:700;font-display:swap;src:url(assets/h-700.ttf) format("truetype")}
@font-face{font-family:H;font-style:normal;font-weight:900;font-display:swap;src:url(assets/h-900.ttf) format("truetype")}

/* ============================================================================
   הכאב שלך הוא לא גזירת גורל — web stylesheet, mobile first.

   Derived from the print sheet rule by rule. The print design's proportions are
   preserved, not guessed: spacing keeps the original millimetre numbers and
   type keeps the original point numbers, both expressed through two variables
   (--mm, --pt) so the whole document can be re-tuned from one place instead of
   248 hand-edits. Page-level structures that cannot simply scale — the cover,
   the silence band, the text column, the full-bleed escapes — are redesigned.

   Anything that existed only to serve paper (@page, break-*, print-color-adjust)
   is gone.
   ============================================================================ */

:root{
  /* palette — unchanged from the print document */
  --slate:#465766; --slate-deep:#33414E; --slate-soft:#8CA0B0;
  --rose:#E3B8AE; --rose-deep:#C4826E; --rose-wash:#FAF1EC;
  --cream:#FCFAF7; --ink:#3A4148; --ink-soft:#6E7378; --faint:#A69C94;
  --rule:#E9DFD7;

  /* The two conversion constants. 1mm of the print design becomes --mm of
     screen space; 1pt becomes --pt. Body text was 11.1pt, so --pt is set so
     that 11.1pt lands on exactly 1rem and every other size keeps its ratio. */
  --mm:0.215rem;
  --pt:0.0901rem;

  /* the text column and how far things may escape it */
  --pad:clamp(1.15rem, 5vw, 2rem);
  --col:33rem;
  --bleed:calc(-1 * var(--pad));
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  font-size:17px;
  /* brackets and washes sit outside their parents by design; never let that
     turn into a sideways scroll of the whole document */
  overflow-x:hidden;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:H,"Segoe UI",system-ui,sans-serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.75;
  direction:rtl;
  text-align:right;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

p{margin:0 0 calc(3.6 * var(--mm)) 0}
strong{font-weight:700}
a{color:var(--rose-deep);text-decoration:none;border-bottom:1px solid rgba(196,130,110,.45)}
a:focus-visible,button:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px;border-radius:2px}
img{max-width:100%}

/* ---------- the text column ----------
   The print sheet centred a fixed 160mm column with an RTL right:50% trick.
   On screen the column is simply fluid and centred, and --pad is what
   full-bleed elements reach back through. */
.wrap{
  width:100%;
  max-width:calc(var(--col) + 2 * var(--pad));
  margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;
}

/* ============================ cover ============================ */
/* 297mm of paper becomes a screen-height opener. The tree keeps the one rule
   that matters: flush to the left edge (its own PNG edge is the straight line
   down the trunk), never offset. */
.cover{
  position:relative;
  overflow:hidden;
  background:var(--slate);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:min(44rem, 100svh);
  padding:calc(6 * var(--mm)) var(--pad) calc(8 * var(--mm)) var(--pad);

  /* Sizes for the two pieces of artwork, declared once so that an element's
     width and its offset always resolve against the same base. Mixing a
     clamped width with a percentage offset detaches the ring from its intended
     position the moment the clamp engages on a wide screen. */
  --tree:min(84%, 26rem);
  --ring:min(80%, 30rem);
}
.enso-art{position:absolute;pointer-events:none}
.enso-art img{display:block;width:100%;height:100%}

.cover-tree{
  position:absolute;
  left:0;                 /* flush, always: the straight line down the trunk's
                             lower left is the PNG's own cut edge, and any
                             positive offset leaves a strip of slate beside it */
  bottom:-2%;
  width:var(--tree);
  z-index:1;
  pointer-events:none;
}
.cover-tree img{display:block;width:100%;height:auto}

/* The ring hangs off the left edge so only solid arc crosses the page and both
   ends of the brush stay outside it — Amit's standing rule for every ring in
   the document. The offset is a fraction of the ring's OWN diameter rather
   than of the page, so the relationship holds at every width: at -0.56 of the
   diameter the centre sits just off the left edge, which puts the gap — and
   with it both ends — well outside the frame. */
.cover .enso-art{
  width:var(--ring);
  left:calc(var(--ring) * -0.56);
  top:4%;
  aspect-ratio:1;
  opacity:.72;
  z-index:0;
}

/* The contents list has to sit over the blossoms on a screen this narrow —
   there is no column of free slate to put it in, the way there was on A4.
   A scrim from the reading edge puts the type on solid ground without touching
   the artwork: opaque where the text is, gone before the tree's centre. */
.cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to left,
    var(--slate) 2%,
    rgba(70,87,102,.92) 26%,
    rgba(70,87,102,.55) 52%,
    rgba(70,87,102,0) 78%);
}

.cover-top{position:relative;z-index:2;display:flex;justify-content:space-between;
  align-items:flex-start;gap:1rem}
.cover-logo{width:calc(22 * var(--mm));max-width:5.5rem;opacity:.96;height:auto}
.cover-meta{text-align:center}
.cover-ed{font-size:calc(8 * var(--pt));font-weight:300;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.cover-meta .kicker{padding-top:calc(2.2 * var(--mm))}
.kicker{font-size:calc(8.4 * var(--pt));font-weight:700;letter-spacing:.22em;color:var(--rose)}

.cover-mid{position:relative;z-index:2;margin-block:auto}
.cover h1{
  margin:0;
  font-size:clamp(2.15rem, 11vw, 3.7rem);
  font-weight:900;
  line-height:1.16;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.cover h1 .lt{display:block;font-weight:300;font-size:.63em;letter-spacing:.01em;
  color:rgba(255,255,255,.72);margin-bottom:calc(2 * var(--mm))}
.cover h1 em{font-style:normal;color:var(--rose)}
.cover-rule{width:calc(22 * var(--mm));height:2px;background:var(--rose);
  margin:calc(7 * var(--mm)) 0 calc(6 * var(--mm)) 0}
.cover-sub{font-size:calc(12.5 * var(--pt));font-weight:300;color:rgba(255,255,255,.8);
  max-width:28ch;line-height:1.65}

/* ---- the contents ----
   On paper this had to squeeze into the slate the tree left free. On a phone
   the tree sits behind it, so the list gets a scrim of its own rather than
   being pushed aside. */
.cover-toc{margin-top:calc(9 * var(--mm));width:100%;max-width:24rem;position:relative}
.cover-toc .toc-h{font-size:calc(8 * var(--pt));font-weight:700;letter-spacing:.12em;
  color:var(--rose);margin-bottom:calc(3.5 * var(--mm))}
.cover-toc ol{list-style:none;margin:0;padding:0}
.cover-toc li{padding:calc(1.1 * var(--mm)) 0}
.cover-toc a{display:flex;gap:calc(3.6 * var(--mm));align-items:baseline;
  text-decoration:none;border-bottom:none;font-size:calc(9.6 * var(--pt));
  font-weight:300;line-height:1.5;color:rgba(255,255,255,.78)}
.cover-toc a b{flex:0 0 auto;font-size:calc(7.6 * var(--pt));font-weight:700;
  letter-spacing:.06em;color:rgba(227,184,174,.62)}

.cover-bot{position:relative;z-index:2;display:flex;justify-content:space-between;
  align-items:flex-end;font-size:calc(9 * var(--pt));color:rgba(255,255,255,.62);font-weight:300}
.cover-bot b{display:block;font-weight:700;color:#fff;font-size:calc(10.5 * var(--pt));
  margin-bottom:calc(1 * var(--mm))}

/* ============================ chapters ============================ */
.ch{display:flex;align-items:center;gap:calc(4 * var(--mm));
  margin:calc(13 * var(--mm)) 0 calc(6 * var(--mm)) 0}
.ch .enso{width:calc(12 * var(--mm));height:calc(12 * var(--mm));flex:0 0 auto}
.ch-n{font-size:calc(8.2 * var(--pt));font-weight:700;letter-spacing:.24em;
  color:var(--slate-soft);margin-bottom:calc(.6 * var(--mm))}
/* the print sheet forbade these from wrapping, which is right on a 132mm
   column and impossible on a 375px one — "עוד המלצות ליוצאים לדרך" at 19pt
   overflows the screen. Wrapping is allowed; balance keeps it tidy. */
.ch h2{margin:0;font-size:clamp(1.32rem, 5.6vw, 1.72rem);font-weight:800;
  color:var(--slate);line-height:1.28;letter-spacing:-.01em;text-wrap:balance}
.ch.first{margin-top:calc(9 * var(--mm))}
.ch-n[id]{scroll-margin-top:4.5rem}

.lead p{font-size:calc(12.6 * var(--pt));font-weight:400;line-height:1.72;color:#4A5158}
.arw{font-style:normal;font-weight:400;color:var(--rose-deep);font-size:.92em;padding:0 calc(2 * var(--mm))}
.p-key{font-weight:700;color:var(--slate-deep)}
.mark{background:linear-gradient(transparent 72%,rgba(227,184,174,.55) 72%,
  rgba(227,184,174,.55) 96%,transparent 96%)}
.q{font-size:calc(13 * var(--pt));font-weight:500;color:var(--slate);line-height:1.7}

/* chapter 6 — the invitation. Centred and roomier, as on paper. */
.ch6{max-width:30rem;margin-inline:auto;text-align:center}
.ch6 p{font-size:calc(11.9 * var(--pt));line-height:1.9;margin:0 0 calc(5.6 * var(--mm)) 0;
  text-wrap:balance}
.ch6 p:last-child{margin-bottom:calc(1 * var(--mm))}
.ch6 .mark{padding:0 calc(.6 * var(--mm))}
.ch6 .club{white-space:nowrap}
.ch6 .acro-l{font-weight:800;color:var(--rose-deep);font-size:1.1em}

/* ============================ declaration band ============================ */
.decl{background:var(--rose-wash);border-top:1px solid #F0E0D8;border-bottom:1px solid #F0E0D8;
  padding:calc(11 * var(--mm)) 0;margin:calc(9 * var(--mm)) 0}
.decl .wrap{text-align:center}
.decl .l{font-size:calc(13 * var(--pt));font-weight:700;color:var(--rose-deep);line-height:1.95}
.decl .l span{display:block}
.decl .l span:nth-child(2){opacity:.86}
.decl .l span:nth-child(3){opacity:.72}

/* the photograph sits beside the declaration on paper; on a phone it stacks
   under it, because 54mm of picture next to 13pt of type is unreadable at
   375px wide */
.decl-row{display:flex;flex-direction:column;align-items:center;gap:calc(7 * var(--mm));margin:0}
.decl-row .l{font-size:calc(13.2 * var(--pt));line-height:1.95}
.decl-row .shot{flex:0 0 auto;width:min(100%, 17rem);margin:0}
.decl-row .shot .wash{display:none}
.decl-row .shot .br-v{top:calc(-4 * var(--mm));bottom:calc(12 * var(--mm));left:calc(-4 * var(--mm))}
.decl-row .shot .br-h{left:calc(-4 * var(--mm));right:calc(18 * var(--mm));bottom:calc(-4 * var(--mm))}

/* ============================ silence band ============================ */
.silence{
  position:relative;overflow:hidden;
  background:var(--slate);color:#fff;text-align:center;
  min-height:min(34rem, 84svh);
  padding:calc(20 * var(--mm)) var(--pad);
  display:flex;flex-direction:column;justify-content:center;
}
/* Both rings keep the print design's own offsets, expressed as a fraction of
   each ring's diameter: s1 hung off the right at -0.358 of its width (and
   rotated 180° in the markup, so its gap points that way), s2 off the left at
   -0.32. Same numbers as the paper version, same result at any screen width. */
.silence{--s1:min(88%, 34rem); --s2:min(54%, 21rem)}
.silence .enso-art.s1{width:var(--s1);right:calc(var(--s1) * -0.358);top:2%;
  aspect-ratio:1;opacity:.72}
.silence .enso-art.s2{width:var(--s2);left:calc(var(--s2) * -0.32);bottom:2%;
  aspect-ratio:1;opacity:.72}
.silence .big{font-size:clamp(1.9rem, 9vw, 2.7rem);font-weight:900;line-height:1.32;
  position:relative;z-index:2;letter-spacing:-.01em;text-wrap:balance}
.silence .big em{font-style:normal;color:var(--rose)}
.silence .sm{margin-top:calc(8 * var(--mm));font-size:calc(11.5 * var(--pt));font-weight:300;
  color:rgba(255,255,255,.75);line-height:1.95;position:relative;z-index:2}

/* ============================ finding cards ============================ */
/* On paper these escaped the column by 18mm on each side. On screen they
   reach back through the column's padding instead, which is the same gesture
   at any width and never causes a sideways scroll. */
.cardw{position:relative;margin:calc(7 * var(--mm)) var(--bleed)}
.cardw .sh{position:absolute;border-radius:calc(3.6 * var(--mm));background:#B9A899}
.cardw .sh1{left:calc(-.9 * var(--mm));right:calc(-.9 * var(--mm));top:calc(.9 * var(--mm));
  bottom:calc(-1.9 * var(--mm));opacity:.10}
.cardw .sh2{left:calc(-.2 * var(--mm));right:calc(-.2 * var(--mm));top:calc(.5 * var(--mm));
  bottom:calc(-1.1 * var(--mm));opacity:.14}
.card{position:relative;background:#fff;border:1px solid var(--rule);
  border-radius:calc(3 * var(--mm));padding:calc(6 * var(--mm)) calc(6 * var(--mm));margin:0}
.card-h{display:flex;align-items:baseline;gap:calc(3.4 * var(--mm));margin-bottom:calc(4 * var(--mm))}
.card-n{font-size:calc(20 * var(--pt));font-weight:900;color:var(--rose);line-height:1;flex:0 0 auto}
.card h3{margin:0;font-size:calc(13 * var(--pt));font-weight:700;color:var(--slate-deep);
  line-height:1.45;text-wrap:balance}
.card p{font-size:calc(10.9 * var(--pt));line-height:1.7;margin-bottom:calc(3 * var(--mm))}
sup.fn{font-size:calc(7 * var(--pt));font-weight:700;color:var(--rose-deep);vertical-align:super}

.fig{margin:calc(6 * var(--mm)) 0 0 0}
.fig svg{width:100%;height:auto;display:block}
.fig .legend{display:flex;justify-content:center;gap:calc(4 * var(--mm));flex-wrap:wrap;
  margin-bottom:calc(3 * var(--mm))}
.lg{font-size:calc(9 * var(--pt));color:#4A5158;display:inline-flex;align-items:center;
  gap:calc(1.8 * var(--mm));white-space:nowrap}
.lg i{width:calc(9 * var(--mm));height:2.4px;border-radius:2px;display:inline-block}
.cap{font-size:calc(8.8 * var(--pt));color:var(--faint);margin-top:calc(4 * var(--mm));
  text-align:center;line-height:1.6}
.fig .cap{margin-top:calc(2.5 * var(--mm))}
.vlabel{display:flex;margin:0 0 calc(1 * var(--mm)) 0}
.vlabel div{width:50%;text-align:center;font-size:calc(10 * var(--pt));font-weight:700;
  color:var(--slate-deep)}
.vlabel .vcalm{color:var(--slate)}
.vlabel .vstress{color:var(--rose-deep)}

/* the percentage grid: its label column was a fixed 15mm, which starves the
   bars on a narrow screen — it becomes a proportion instead */
.pgrid{margin:calc(1 * var(--mm)) 0 0 0}
.phead{display:flex;gap:calc(4 * var(--mm));align-items:flex-end;
  padding-bottom:calc(2.5 * var(--mm));border-bottom:1px solid var(--rule)}
.phead .pl{flex:0 0 22%}
.phead .pc{flex:1;text-align:center;font-size:calc(9.4 * var(--pt));font-weight:700;
  color:var(--slate);line-height:1.35}
.prow{display:flex;gap:calc(4 * var(--mm));align-items:center;padding:calc(3.6 * var(--mm)) 0;
  border-bottom:1px solid #F2EAE3}
.prow:last-child{border-bottom:none}
.prow .pl{flex:0 0 22%;font-size:calc(10.5 * var(--pt));font-weight:700;color:var(--slate)}
.prow .pc{flex:1;text-align:center}
.pct{display:block;font-size:calc(12.5 * var(--pt));font-weight:900;color:var(--rose-deep);
  margin-bottom:calc(1.6 * var(--mm))}
.prow .pc svg{width:100%;max-width:calc(33 * var(--mm));height:auto}
.pnote{font-size:calc(9.8 * var(--pt));color:var(--ink-soft);text-align:center;
  margin:0 0 calc(3 * var(--mm)) 0;line-height:1.6}

/* ---------- stat strip ---------- */
/* three cells side by side is fine on paper and cramped at 375px; it wraps to
   a single column on the narrowest screens and closes back up above that */
.stat{display:flex;flex-wrap:wrap;margin:calc(6 * var(--mm)) 0;border:1px solid var(--rule);
  border-radius:calc(3 * var(--mm));overflow:hidden;background:#fff}
.stat div{flex:1 1 30%;padding:calc(5 * var(--mm)) calc(2.5 * var(--mm));text-align:center;
  border-inline-start:1px solid var(--rule)}
.stat div:first-child{border-inline-start:none}
.stat b{display:block;font-size:calc(17 * var(--pt));font-weight:900;color:var(--slate);line-height:1.15}
.stat span{display:block;font-size:calc(8.6 * var(--pt));color:var(--ink-soft);
  margin-top:calc(1.5 * var(--mm));line-height:1.45}

/* ---------- terms ---------- */
.terms{margin:calc(6 * var(--mm)) 0 calc(7 * var(--mm)) 0;padding:calc(6 * var(--mm));
  border:1px dashed var(--rose);border-radius:calc(3 * var(--mm));text-align:center;
  background:rgba(250,241,236,.55)}
.terms div{font-size:calc(11.5 * var(--pt));line-height:2.05}
.terms b{font-weight:900;color:var(--rose-deep)}

/* ============================ photographs ============================ */
/* One corner opens into a wide arch, the other three stay sharp, and a
   hairline bracket runs past the opposite corner and stops — the same open
   gesture as the gap in the ring. The arch alternates down the document.

   The brackets and the wash sit OUTSIDE the frame, so the picture is never
   taken all the way to the screen edge: it keeps an inset wide enough for
   them to land on-screen. */
.shot{position:relative;margin:calc(11 * var(--mm)) 0 calc(13 * var(--mm)) 0}
.shot figure{margin:0;position:relative;z-index:2}
.shot .plate{position:relative;overflow:hidden;background:var(--slate);
  border-radius:calc(1.2 * var(--mm)) calc(18 * var(--mm)) calc(1.2 * var(--mm)) calc(1.2 * var(--mm))}
.shot.turn .plate{border-radius:calc(18 * var(--mm)) calc(1.2 * var(--mm))
  calc(1.2 * var(--mm)) calc(1.2 * var(--mm))}
.shot .plate img{display:block;width:100%;height:auto}
.shot .wash{position:absolute;top:calc(4 * var(--mm));left:calc(-4 * var(--mm));
  right:calc(13 * var(--mm));bottom:calc(-4 * var(--mm));background:var(--rose-wash);
  border-radius:calc(1.2 * var(--mm)) calc(18 * var(--mm)) calc(1.2 * var(--mm)) calc(1.2 * var(--mm));
  z-index:0}
.shot.turn .wash{left:calc(13 * var(--mm));right:calc(-4 * var(--mm));
  border-radius:calc(18 * var(--mm)) calc(1.2 * var(--mm)) calc(1.2 * var(--mm)) calc(1.2 * var(--mm))}
.shot .br{position:absolute;background:var(--rose-deep);z-index:3}
.shot .br-v{width:1px;top:calc(-5 * var(--mm));bottom:calc(20 * var(--mm));left:calc(-5 * var(--mm))}
.shot .br-h{height:1px;left:calc(-5 * var(--mm));right:calc(36 * var(--mm));bottom:calc(-5 * var(--mm))}
.shot.turn .br-v{left:auto;right:calc(-5 * var(--mm))}
.shot.turn .br-h{left:calc(36 * var(--mm));right:calc(-5 * var(--mm))}
.shot figcaption{margin-top:calc(8 * var(--mm));font-size:calc(9 * var(--pt));
  line-height:1.6;color:var(--faint)}
.shot figcaption b{color:var(--slate);font-weight:700}
.shot.name figcaption{margin-top:calc(4.5 * var(--mm));text-align:left;font-size:calc(10.4 * var(--pt))}
.shot.name figcaption b{letter-spacing:.01em}
/* Yafa's photograph — a wide band, caption hanging from the picture's own
   right edge, bold and right-aligned, as Amit asked */
.shot.memorial{margin:calc(5 * var(--mm)) 0 calc(13 * var(--mm)) 0}
.shot.memorial figcaption{margin-top:calc(7 * var(--mm));text-align:right;
  font-size:calc(10.2 * var(--pt));line-height:1.6;font-weight:700;color:var(--slate)}

/* ============================ resources ============================ */
.res{list-style:none;margin:0;padding:0}
.res li{display:flex;gap:calc(4 * var(--mm));padding:calc(3.8 * var(--mm)) 0;
  border-bottom:1px solid var(--rule);font-size:calc(10.5 * var(--pt));
  line-height:1.65;align-items:center}
.res li:last-child{border-bottom:none}
.res .tag{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:calc(9 * var(--mm));height:calc(9 * var(--mm));border:1px solid var(--rose);
  border-radius:50%;background:#fff;color:var(--rose-deep)}
.res .tag svg{display:block;width:calc(4.9 * var(--mm));height:calc(4.9 * var(--mm))}
.res b{color:var(--slate)}
.nb{white-space:nowrap}

/* ============================ the invitation ============================ */
.offer{margin:calc(9 * var(--mm)) var(--bleed) calc(6 * var(--mm)) var(--bleed);
  border:1px solid #EAD5CB;border-radius:calc(4.5 * var(--mm));overflow:hidden;background:#fff;
  box-shadow:0 calc(2.5 * var(--mm)) calc(7 * var(--mm)) rgba(51,65,78,.18)}
.offer-top{background:var(--rose-wash);padding:calc(9 * var(--mm)) calc(6 * var(--mm))
  calc(8 * var(--mm)) calc(6 * var(--mm));text-align:center}
.offer-k{font-size:calc(8.4 * var(--pt));font-weight:700;letter-spacing:.16em;
  color:var(--rose-deep);margin-bottom:calc(4.5 * var(--mm))}
.offer-n{font-size:clamp(1.8rem, 8vw, 2.35rem);font-weight:900;color:var(--slate-deep);
  line-height:1.1;letter-spacing:-.02em}
.offer-acro{display:block;font-size:calc(14 * var(--pt));font-weight:800;margin-top:calc(3 * var(--mm))}
.offer-acro .acro-l{color:var(--rose-deep);font-size:1.14em}
.offer-acro i{font-style:normal;font-weight:400;color:rgba(196,130,110,.55);padding:0 calc(1.6 * var(--mm))}
.offer-meta{font-size:calc(10.6 * var(--pt));font-weight:500;color:var(--slate);
  margin-top:calc(6 * var(--mm))}
.offer-meta .dot{display:inline-block;width:calc(1.3 * var(--mm));height:calc(1.3 * var(--mm));
  border-radius:50%;background:var(--rose-deep);vertical-align:middle;margin:0 calc(2.6 * var(--mm))}
.offer-note{font-size:calc(9.6 * var(--pt));font-weight:300;color:var(--ink-soft);
  margin-top:calc(3.6 * var(--mm));line-height:1.55}

/* The dark island exists for one thing, so it gets the room to say it: the
   line of type points at the button, the button is the only filled shape, and
   nothing follows it. The ring hangs off the panel's left side so that what
   crosses the panel is solid arc — both brush ends stay outside. */
.offer-gift{position:relative;overflow:hidden;background:var(--slate);color:#fff;
  text-align:center;padding:calc(10 * var(--mm)) calc(6 * var(--mm)) calc(7 * var(--mm)) calc(6 * var(--mm));
  --r:min(118%, 26rem)}
/* Hung off the panel's left side (and rotated 34° in the markup), so what
   crosses the panel is a piece of solid arc from the circle's right edge —
   both brush ends stay outside the box, as on the cover. The offsets are the
   print design's own, as fractions of the ring's diameter. */
.offer-gift .enso-art{width:var(--r);left:calc(var(--r) * -0.613);top:calc(var(--r) * -0.302);
  aspect-ratio:1;opacity:.72}
.gift-in{position:relative;z-index:2}
.offer-cta-k{font-size:calc(10.6 * var(--pt));font-weight:300;color:rgba(255,255,255,.84);
  margin-bottom:calc(5.5 * var(--mm))}
.cta-btn{display:inline-block;margin:0;padding:calc(4.4 * var(--mm)) calc(11 * var(--mm));
  border-radius:999px;background:var(--rose);color:var(--slate-deep);
  font-size:calc(12.6 * var(--pt));font-weight:800;line-height:1.1;letter-spacing:-.01em;
  text-align:center;text-decoration:none;border:none;
  box-shadow:0 calc(1.8 * var(--mm)) calc(5 * var(--mm)) rgba(0,0,0,.3)}
.cta-btn:hover{background:#EFC7BD}
.cta-c{display:flex;justify-content:center;gap:calc(6 * var(--mm));flex-wrap:wrap;direction:ltr;
  font-size:calc(9.2 * var(--pt));margin-top:calc(5 * var(--mm));padding-top:calc(4 * var(--mm));
  border-top:1px solid rgba(255,255,255,.2)}
.cta-c a{color:rgba(255,255,255,.88);border-bottom:1px solid rgba(255,255,255,.32)}

/* ============================ closing ============================ */
.src{margin-top:calc(9 * var(--mm));padding-top:calc(5 * var(--mm));border-top:1px solid var(--rule)}
.src h4{margin:0 0 calc(3 * var(--mm)) 0;font-size:calc(8.4 * var(--pt));font-weight:700;
  letter-spacing:.2em;color:var(--slate-soft)}
.src p{font-size:calc(8.6 * var(--pt));line-height:1.6;color:var(--ink-soft);
  margin-bottom:calc(2.2 * var(--mm));direction:ltr;text-align:left;overflow-wrap:anywhere}
.src span{font-weight:700;color:var(--rose-deep)}

.close{margin-top:calc(9 * var(--mm));text-align:center}
.close .k{font-size:calc(10.5 * var(--pt));color:var(--ink-soft);margin-bottom:calc(2.5 * var(--mm))}
.close .m{font-size:calc(12.5 * var(--pt));font-weight:700;color:var(--slate);
  line-height:1.7;text-wrap:balance}
.sign{margin-top:calc(11 * var(--mm));margin-bottom:calc(11 * var(--mm));background:var(--rose-wash);
  border-radius:calc(4 * var(--mm));padding:calc(8 * var(--mm)) calc(6 * var(--mm));text-align:center}
.sign img{width:calc(24 * var(--mm));max-width:6rem;margin-bottom:calc(1.5 * var(--mm));height:auto}
.sign .n{font-size:calc(12 * var(--pt));font-weight:700;color:var(--slate)}
.sign .c{display:flex;justify-content:center;gap:calc(5 * var(--mm));flex-wrap:wrap;direction:ltr;
  font-size:calc(9 * var(--pt));margin-top:calc(5.5 * var(--mm))}
.sign .c a{color:var(--slate);border-bottom:1px solid rgba(70,87,102,.3)}

/* ============================ wider screens ============================ */
/* Nothing here changes the design; it only lets it breathe once there is room.
   The document was drawn for a 132mm text column, and this is that column. */
@media (min-width:40rem){
  :root{--mm:0.235rem}
  html{font-size:17.5px}
  .cover{min-height:min(50rem, 100svh)}
  .cover-tree{width:min(62%, 27rem)}
  .decl-row{flex-direction:row;align-items:center;gap:calc(9 * var(--mm))}
  .decl-row .l{flex:1}
  .decl-row .shot{flex:0 0 44%;width:auto}
  .cardw,.offer{margin-inline:calc(-1 * var(--pad))}
  .card{padding:calc(6 * var(--mm)) calc(7 * var(--mm))}
  .offer-top,.offer-gift{padding-inline:calc(8 * var(--mm))}
}

@media (min-width:64rem){
  html{font-size:18px}
  :root{--pad:2.5rem}
  /* the pictures and the invitation may reach a little past the text column,
     the way they escaped it on paper */
  .shot,.cardw,.offer{margin-inline:-2.6rem}
  .decl-row .shot{margin-inline:0}
}


/* ============================================================================
   Variant C — "דף נחיתה שיווקי"
   Same words, same palette, different job: the page is asking for something.
   A hero that makes the offer immediately, a standing call to action, two
   pauses that restate the promise, and a closing invitation with more weight.
   Everything additive to base.css.
   ============================================================================ */

.cover{min-height:100svh;padding-bottom:calc(11 * var(--mm))}
.cover h1{font-size:clamp(2.35rem, 12.5vw, 4.1rem)}
.cover-sub{font-size:calc(13.2 * var(--pt));max-width:30ch}

/* the contents list is not the point here; it becomes a quiet promise of
   what's inside rather than a navigation device */
.cover-toc{max-width:22rem}
.cover-toc .toc-h{color:rgba(227,184,174,.8)}
.cover-toc a{font-size:calc(9.2 * var(--pt));color:rgba(255,255,255,.62)}
.cover-toc a:hover{color:rgba(255,255,255,.92)}

/* ---------- the hero's call to action ---------- */
.hero-cta{
  display:inline-flex;align-items:center;gap:calc(2.4 * var(--mm));
  margin-top:calc(8 * var(--mm));
  background:var(--rose);color:var(--slate-deep);
  text-decoration:none;border-bottom:none;
  font-size:calc(12 * var(--pt));font-weight:800;letter-spacing:-.01em;
  padding:calc(4 * var(--mm)) calc(10 * var(--mm));
  border-radius:999px;
  box-shadow:0 calc(2 * var(--mm)) calc(6 * var(--mm)) rgba(0,0,0,.32);
  position:relative;z-index:2;
}
.hero-cta:hover{background:#EFC7BD}
.hero-note{position:relative;z-index:2;margin-top:calc(3.4 * var(--mm));
  font-size:calc(8.8 * var(--pt));font-weight:300;color:rgba(255,255,255,.55)}

/* ---------- a pause that restates the promise ---------- */
/* Placed where the argument has just landed, so it reads as a conclusion the
   reader has arrived at rather than a claim being made at them. */
.pitch{
  background:var(--slate);color:#fff;text-align:center;
  padding:calc(14 * var(--mm)) var(--pad);
  margin:calc(11 * var(--mm)) 0;
  position:relative;overflow:hidden;
}
.pitch-in{position:relative;z-index:2;max-width:30rem;margin-inline:auto}
/* same rule as everywhere: the ring hangs off the left edge by a fraction of
   its own diameter, so only solid arc crosses and no brush end shows */
.pitch{--r:min(105%, 28rem)}
.pitch .enso-art{width:var(--r);left:calc(var(--r) * -0.60);top:calc(var(--r) * -0.30);
  aspect-ratio:1;opacity:.72}
.pitch p{font-size:clamp(1.22rem, 5.4vw, 1.55rem);font-weight:800;line-height:1.45;
  margin:0 0 calc(6 * var(--mm)) 0;text-wrap:balance;letter-spacing:-.01em}
.pitch p em{font-style:normal;color:var(--rose)}
.pitch .sub{font-size:calc(10.6 * var(--pt));font-weight:300;color:rgba(255,255,255,.75);
  line-height:1.7;margin-bottom:calc(7 * var(--mm))}
.pitch a{
  display:inline-block;background:var(--rose);color:var(--slate-deep);
  text-decoration:none;border-bottom:none;font-weight:800;
  font-size:calc(11.4 * var(--pt));padding:calc(3.6 * var(--mm)) calc(9 * var(--mm));
  border-radius:999px;box-shadow:0 calc(1.6 * var(--mm)) calc(5 * var(--mm)) rgba(0,0,0,.28);
}
.pitch a:hover{background:#EFC7BD}

/* Each pitch follows a full-bleed band of its own colour. Left with its own
   margin, a sliver of cream page shows between the two, which reads as a gap
   rather than a change of voice — so they butt together and a hairline marks
   the seam instead. */
.decl + .pitch,
.silence + .pitch{margin-top:0}
/* the sliver is the declaration band's own bottom margin (9mm), not the
   pitch's top margin — so it has to be removed from that side */
.decl:has(+ .pitch){margin-bottom:0}
.silence + .pitch{border-top:1px solid rgba(255,255,255,.13)}
.decl + .pitch.soft{border-top:1px solid rgba(196,130,110,.22)}

/* a lighter pause, on the rose wash, for the earlier of the two */
.pitch.soft{background:var(--rose-wash);color:var(--slate-deep)}
.pitch.soft p em{color:var(--rose-deep)}
.pitch.soft .sub{color:var(--ink-soft)}
.pitch.soft .enso-art{opacity:.4}

/* ---------- standing call to action ---------- */
/* Unlike the guide's dock, this one is present from the start — on a landing
   page the offer is the reason the page exists, not an afterthought. */
.railcta{
  position:fixed;bottom:0;right:0;left:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:calc(3 * var(--mm));
  padding:calc(2.8 * var(--mm)) var(--pad);
  background:rgba(51,65,78,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 -2px 14px rgba(51,65,78,.22);
  transform:translateY(100%);transition:transform .28s ease;
}
.railcta.on{transform:none}
.railcta .l{min-width:0}
.railcta b{display:block;font-size:calc(9.8 * var(--pt));font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.railcta span{display:block;font-size:calc(8.4 * var(--pt));font-weight:300;
  color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.railcta a{flex:0 0 auto;background:var(--rose);color:var(--slate-deep);
  text-decoration:none;border-bottom:none;font-weight:800;
  font-size:calc(9.8 * var(--pt));padding:calc(2.8 * var(--mm)) calc(6.4 * var(--mm));
  border-radius:999px}
.railcta a:hover{background:#EFC7BD}
.railcta.hushed{transform:translateY(100%)}

/* the closing invitation carries more weight here than in the guide */
.offer{box-shadow:0 calc(3.5 * var(--mm)) calc(11 * var(--mm)) rgba(51,65,78,.24)}
.offer-n{font-size:clamp(1.95rem, 9vw, 2.7rem)}
.cta-btn{padding:calc(5 * var(--mm)) calc(12 * var(--mm));font-size:calc(13.2 * var(--pt))}

/* room for the standing bar so it never covers the last line */
body{padding-bottom:calc(22 * var(--mm))}

@media (prefers-reduced-motion:reduce){ .railcta{transition:none} }

@media (min-width:64rem){
  .railcta{padding-inline:max(var(--pad), 12vw)}
  .pitch{margin-inline:-2.6rem}
}