/* ==========================================================================
   pedagogy.co.il - marketing surface (homepage, module pages, blog).
   Paper, sky, hairlines. No cards, no grey surfaces, no pills.
   Type: Rubik (client decision 2026-09-08, the pgishonim family face) - 800 headings, 400/500 body; the diary sheet (6px radius, #c9d6e8 hairline,
   6px #1653a5 spine, 0 1px 0 shadow); the hour-chip button (#00437a, 4px);
   the sky (#2b7de1 -> #1c6fd6 58% -> #fdfeff 78%) with three translucent hill layers;
   the product's hour-type palette as the only accent; teal #5ec4a8 rationed to the
   bell string, the footer hairline, the bracket-פ mark and the closing underline.
   ========================================================================== */

:root {
    --sky-1: #2b7de1;
    --sky-2: #1c6fd6;
    --spine: #1653a5;
    --paper: #fdfeff;
    --ink: #0f1f3d;
    --ink-soft: #4a5a75;
    --ink-mute: #7b889c;
    --rule: #dfe6f0;
    --rule-strong: #c9d6e8;
    --hair: rgba(43,125,225,.62);
    --hair-soft: rgba(43,125,225,.28);

    /* the product's hour-type chip palette - the ONLY accent system */
    --c-lesson: #00437a;
    --c-assess: #8b014d;
    --c-event: #b423a3;
    --c-shahiya: #b36000;
    --c-teudot: #564f02;
    --c-parents: #006163;
    --c-self: #008413;
    --c-cancel: #1f282c;

    /* washes + the attendance triad - only inside product fragments and the rulers */
    --w-mint: #edfde7;
    --w-mint-2: #dbf8d2;
    --w-blue: #d1eaff;
    --a-ok: #a7fb85;
    --a-late: #f9e892;
    --a-absent: #ff926c;

    /* the family thread */
    --pg-navy: #0b1334;
    --pg-teal: #5ec4a8;

    --serif: "Rubik", "Heebo", "Segoe UI", Arial, sans-serif;
    --sans: "Rubik", "Heebo", "Segoe UI", Arial, sans-serif;
    --mk-max: 1312px;
    --mk-pad: 64px;
}

/* --- base ----------------------------------------------------------------- */
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.mk {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.mk h1, .mk h2, .mk h3 {
    font-family: var(--serif);
    color: var(--ink);
    margin: 0 0 .5em;
    letter-spacing: -.005em;
    text-wrap: balance;
}
.mk h1 { font-weight: 800; font-size: clamp(36px, 4vw, 54px); line-height: 1.15; letter-spacing: -.01em; }
.mk h2 { font-weight: 800; font-size: clamp(27px, 2.7vw, 38px); line-height: 1.18; letter-spacing: -.01em; }
.mk h3 { font-weight: 700; font-size: 22px; line-height: 1.25; }
.mk p  { margin: 0 0 1em; }
.mk a:not(.mk-btn) { color: inherit; }
.mk img { max-width: 100%; height: auto; display: block; }
.mk :focus-visible { outline: 3px solid var(--c-lesson); outline-offset: 3px; border-radius: 2px; }
.mk-header--sky :focus-visible, .mk-sky :focus-visible { outline-color: #fff; }
.mk-diary :focus-visible { outline-color: var(--c-lesson); }
.mk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk-num, .mk-tnum { font-variant-numeric: tabular-nums; }

.mk-wrap { max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-pad); }
.mk-narrow { max-width: 760px; margin: 0 auto; }
.mk-center { text-align: center; }
.mk-section { padding: 72px 0; }
.mk-lead { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.65; color: var(--ink); }
.mk-eyebrow {
    display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 13px;
    letter-spacing: .04em; color: var(--spine); margin-bottom: 16px;
}
.mk-kicker {
    display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
    font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--spine);
}
.mk-kicker::before, .mk-kicker::after { content: ""; height: 1px; background: var(--hair); flex: 0 0 42px; }
.mk-kicker::after { flex: 1 1 auto; }
.mk-kicker--sky { color: rgba(255,255,255,.85); }
.mk-kicker--sky::before, .mk-kicker--sky::after { background: rgba(255,255,255,.45); }

/* --- skip link ------------------------------------------------------------ */
.mk-skip {
    position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
    background: var(--c-lesson); color: #fff; padding: 12px 20px; font-weight: 600;
}
.mk-skip:focus { inset-inline-start: 24px; }

/* --- header / nav (brief §1) ---------------------------------------------- */
.mk-header { position: relative; z-index: 20; background: var(--paper); }
.mk-header--sky { position: absolute; inset-inline: 0; top: 0; background: transparent; color: #fff; }
.mk-nav { display: flex; align-items: center; gap: 20px; height: 72px; }
/* the white wordmark on its solid #2b7de1 plate - invisible against the sky at home, the one solid block on paper */
.mk-brand {
    display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
    background: var(--sky-1); line-height: 0; flex: 0 0 auto;
}
.mk-brand img { height: 34px; width: auto; }
.mk-links { display: flex; align-items: center; gap: 22px; margin-inline-start: 24px; }
.mk-links a {
    font-weight: 500; font-size: 15px; text-decoration: none; color: var(--ink);
    padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.mk-links a:hover, .mk-links a[aria-current="page"] { border-bottom-color: var(--sky-1); }
.mk-header--sky .mk-links a { color: #fff; }
.mk-header--sky .mk-links a:hover, .mk-header--sky .mk-links a[aria-current="page"] { border-bottom-color: #fff; }
.mk-nav-end { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.mk-nav-phone {
    font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums;
    text-decoration: none; color: inherit; white-space: nowrap;
}
.mk-links .mk-nav-phone { display: none; }
.mk-login { flex: 0 0 auto; }
.mk-burger {
    display: none; order: 9; background: none; border: 1px solid currentColor; color: inherit;
    border-radius: 4px; width: 40px; height: 40px; cursor: pointer; padding: 0;
    align-items: center; justify-content: center; flex: 0 0 auto;
}
.mk-burger span { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.mk-burger span::before, .mk-burger span::after {
    content: ""; position: absolute; right: 0; width: 18px; height: 2px; background: currentColor;
}
.mk-burger span::before { top: -6px; }
.mk-burger span::after  { top: 6px; }

/* --- the hour-chip: the only button on the site ---------------------------- */
.mk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1;
    color: #fff; background: var(--c-lesson); border: 1px solid var(--c-lesson); border-radius: 4px;
    padding: 14px 22px; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.mk-btn svg {
    width: 18px; height: 18px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mk-btn:hover { background: var(--spine); border-color: var(--spine); color: #fff; text-decoration: none; }
.mk-btn:active { transform: translateY(2px); }
.mk-btn--ghost {
    background: transparent; border-color: currentColor; color: inherit;
    font-size: 14px; padding: 9px 14px;
}
.mk-btn--ghost svg { width: 15px; height: 15px; }
.mk-btn--ghost:hover { background: rgba(15,31,61,.06); border-color: currentColor; color: inherit; }
.mk-header--sky .mk-btn--ghost:hover, .mk-sky .mk-btn--ghost:hover { background: rgba(255,255,255,.12); }
.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.mk-actions--center { justify-content: center; }
.mk-textlink {
    font-family: var(--sans); font-weight: 500; font-size: 15px; color: var(--ink);
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.mk-textlink--sky { color: #fff; }
.mk-phone {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px;
    font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ink);
}
.mk-phone svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

/* --- chips: the product's hour types ---------------------------------------- */
.mk-chip {
    display: inline-block; color: #fff; font-family: var(--sans); font-weight: 500; font-size: 12px;
    line-height: 1; padding: 5px 8px; border-radius: 3px; white-space: nowrap; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.mk-chip .k { opacity: .85; font-weight: 400; }
.c-lesson  { background: var(--c-lesson); }
.c-assess  { background: var(--c-assess); }
.c-event   { background: var(--c-event); }
.c-shahiya { background: var(--c-shahiya); border-radius: 999px; padding-inline: 10px; }
.c-teudot  { background: var(--c-teudot); }
.c-parents { background: var(--c-parents); }
.c-self    { background: var(--c-self); }
.c-cancel  { background: var(--c-cancel); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.7); }
.c-cancel.no-strike { text-decoration: none; }
.mk-chip--code    { background: var(--w-blue); color: var(--c-lesson); font-weight: 600; }
.mk-chip--outline { background: var(--paper); color: var(--c-self); border: 1px solid var(--c-self); padding: 4px 8px; }
.mk-chip--absent  { background: var(--a-absent); color: var(--ink); }
.mk-chip--ok      { background: var(--a-ok); color: var(--ink); }
.mk-chip--late    { background: var(--a-late); color: var(--ink); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- the house mark: a teal rounded bracket hugging a Frank Ruhl «פ» --------- */
.mk-house {
    display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto;
    border: 2px solid var(--pg-teal); border-inline-end-color: transparent;
    border-radius: 3px 9px 9px 3px;
    font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1; color: currentColor;
    padding-inline-start: 2px;
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

/* --- §2 hero: the open diary in the sky --------------------------------------- */
.mk-sky {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(180deg, #2b7de1 0%, #1c6fd6 58%, #fdfeff 78%);
}
/* three translucent paper-cutout hill layers, anchored bottom, never stretched */
.mk-hills {
    position: absolute; inset-inline: 0; bottom: 20%; height: clamp(160px, 28vw, 320px);
    pointer-events: none; z-index: 1;
}
.mk-hills svg { width: 100%; height: 100%; display: block; }
.mk-horizon {
    position: absolute; inset-inline: 0; bottom: 18%; height: clamp(180px, 30vw, 340px);
    pointer-events: none; z-index: 1;
    background: linear-gradient(180deg, rgba(253,254,255,0) 0%, rgba(253,254,255,.5) 55%, #fdfeff 100%);
}
.mk-sky-grid {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); grid-template-rows: 1fr auto;
    column-gap: 48px; padding: 118px var(--mk-pad) 44px;
    /* tall enough that the fade (58%) never starts inside the copy column - the trust line stays on solid blue */
    min-height: max(100vh, 1180px);
}
.mk-sky-copy { grid-column: 1; grid-row: 1; align-self: start; }
.mk-sky h1 { color: #fff; margin: 0 0 16px; }
.mk-sky-sub {
    font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.6;
    color: rgba(255,255,255,.95); margin: 0 0 24px; max-width: 420px;
}
.mk-sky-sub b { font-weight: 700; color: #fff; }
.mk-sky .mk-actions { margin-bottom: 20px; gap: 12px 22px; }
.mk-trust { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.92); margin: 0; max-width: 440px; }
.mk-trust a { color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.mk-trust .mk-sep { margin: 0 6px; color: rgba(255,255,255,.6); }
.mk-sky-quote { grid-column: 1; grid-row: 2; align-self: end; color: var(--ink); padding-top: 28px; }
.mk-sky-quote p { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.35; margin: 0 0 4px; }
.mk-sky-quote cite { font-style: normal; font-size: 14px; color: var(--ink-soft); }

/* the hanging mobile - positions are fractions of the sky, an image, not text */
.mk-mobile { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mk-arm { position: absolute; top: 0; width: 0; left: clamp(8px, var(--x), calc(100% - 80px)); }
.mk-mob {
    position: absolute; top: 0; left: -90px; width: 180px;
    display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0;
}
.mk-string {
    display: block; width: 1px; height: var(--len); transform-origin: top;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55));
}
.mk-arm--bell .mk-string { background: linear-gradient(180deg, rgba(94,196,168,.15), var(--pg-teal)); }
.mk-knot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--pg-teal); margin: -1px 0 2px; }
.mk-mico { display: block; width: var(--size, 56px); height: var(--size, 56px); }
.mk-mico svg {
    width: 100%; height: 100%; display: block;
    fill: none; stroke: #fff; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.45));
}
.mk-lbl {
    margin-top: 6px; font-weight: 500; font-size: 13px; line-height: 1.2;
    color: rgba(255,255,255,.88); text-align: center; white-space: nowrap;
}
.mk-lbl small { display: block; font-weight: 500; font-size: 11px; line-height: 1.2; color: rgba(255,255,255,.68); margin-top: 2px; }
.mk-bead {
    display: block; width: var(--size, 30px); height: var(--size, 30px); border-radius: 50%;
    background: rgba(255,255,255,.35); box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
/* per-arm rhythm (dir2's table): the composition of the loved background, from the start edge */
.mk-arm--cert { --x: 96%; --len: 58px;  --size: 36px; --d: 0s;   --dur: 7.5s; --phase: -1.2s; }
.mk-arm--b1   { --x: 88%; --len: 52px;  --size: 18px; --d: .6s;  --dur: 8.2s; --phase: -5s; }
.mk-arm--cap  { --x: 72%; --len: 70px;  --size: 38px; --d: .12s; --dur: 8.6s; --phase: -4.1s; } /* hangs over the copy column: its label must clear the kicker */
.mk-arm--b2   { --x: 58%; --len: 118px; --size: 22px; --d: .7s;  --dur: 7.1s; --phase: -1.9s; }
.mk-arm--book { --x: 44%; --len: 104px; --size: 38px; --d: .24s; --dur: 6.8s; --phase: -2.6s; }
.mk-arm--b3   { --x: 28%; --len: 92px;  --size: 18px; --d: .8s;  --dur: 9.4s; --phase: -7s; }
.mk-arm--pen  { --x: 18%; --len: 80px;  --size: 38px; --d: .36s; --dur: 9s;   --phase: -6.3s; }
.mk-arm--bell { --x: 5%;  --len: 118px; --size: 28px; --d: .48s; --dur: 7.9s; --phase: -3.4s; }
/* motion - gated on html.js (no-JS and reduced-motion render everything hung, still, opaque) */
.js .mk-mob { animation: mk-sway var(--dur, 7.5s) ease-in-out var(--phase, 0s) infinite alternate; }
.js .mk-string { transform: scaleY(0); animation: mk-drop 1s cubic-bezier(.3,.8,.3,1) var(--d, 0s) forwards; }
.js .mk-mico, .js .mk-lbl, .js .mk-bead, .js .mk-knot { opacity: 0; animation: mk-appear .6s ease calc(var(--d, 0s) + .85s) forwards; }
@keyframes mk-sway   { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes mk-drop   { to { transform: scaleY(1); } }
@keyframes mk-appear { to { opacity: 1; } }

/* the diary sheet - paper, 6px radius, hairline, the 6px spine, no soft shadow */
.mk-diary {
    grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 100px; min-width: 0;
    position: relative; color: var(--ink); background: var(--paper);
    border: 1px solid var(--rule-strong); border-inline-start: 6px solid var(--spine); border-radius: 6px;
    box-shadow: 0 1px 0 rgba(15,31,61,.12);
}
.mk-diary-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    padding: 16px 16px 12px; border-bottom: 1px solid var(--rule);
}
.mk-diary-head h2 { font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.15; margin: 0; letter-spacing: 0; }
.mk-diary-head h2 .mk-cls { color: var(--c-lesson); }
.mk-week { font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.mk-week .mk-heb { font-family: var(--serif); font-weight: 500; font-size: 14px; color: var(--ink); }
.mk-weeknav { display: flex; gap: 6px; flex: 0 0 auto; }
.mk-ghostbtn {
    font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: var(--paper);
    border: 1px solid var(--rule-strong); border-radius: 4px; padding: 6px 10px;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.mk-ghostbtn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-diary-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
table.mk-dg { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: 596px; font-size: 12.5px; }
.mk-dg th, .mk-dg td { border-inline-end: 1px solid var(--rule); border-bottom: 1px solid var(--rule); vertical-align: top; background: var(--paper); }
.mk-dg thead th { padding: 10px 7px 9px; text-align: start; font-weight: 400; overflow: hidden; }
.mk-dg th.mk-corner {
    width: 54px; text-align: center; font-family: var(--serif); font-size: 20px; font-weight: 500;
    color: var(--ink-mute); vertical-align: middle; position: sticky; inset-inline-start: 0; z-index: 2;
}
.mk-dg .mk-period { display: inline-block; background: var(--c-teudot); color: #fff; font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 3px; margin-bottom: 7px; }
.mk-dg .mk-hd { display: block; font-family: var(--serif); font-weight: 500; font-size: 13.5px; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.mk-dg .mk-hd .mk-num { font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--ink-soft); margin-inline-start: 5px; }
.mk-dg .mk-dn { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.mk-dg .mk-dn b { font-weight: 600; color: var(--c-self); }
.mk-dg tbody th.mk-hr { width: 54px; text-align: center; padding: 6px 4px; position: sticky; inset-inline-start: 0; z-index: 2; }
.mk-dg tbody th.mk-hr b { display: block; font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1; color: var(--ink); }
.mk-dg tbody th.mk-hr small { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 3px; font-variant-numeric: tabular-nums; }
.mk-dg tbody td { height: 46px; padding: 6px 6px 4px; }
.mk-dg tr.mk-break th, .mk-dg tr.mk-break td { height: auto; padding: 0; border-bottom: 1px dashed var(--rule-strong); }
.mk-dg tr.mk-break td { font-size: 10px; color: var(--ink-mute); letter-spacing: .06em; padding: 3px 8px; }
.mk-dg tr.mk-break th { font-size: 10px; color: var(--ink-mute); font-variant-numeric: tabular-nums; padding: 3px 0; }
.mk-dg tr:last-child th, .mk-dg tr:last-child td { border-bottom: 0; }
.mk-dg th:last-child, .mk-dg td:last-child { border-inline-end: 0; }
.mk-dg .today { background: var(--w-mint); }
.mk-dg thead th.today { background: var(--w-mint-2); box-shadow: inset 0 2px 0 var(--c-self); }
.js .mk-dg th, .js .mk-dg td { transition: background .6s ease; }
/* beat 2: the 35 chips fill in DOM order, 48ms apart, from --i emitted by the build */
.js .mk-dg .mk-chip {
    opacity: 0; animation: mk-chip .5s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(420ms + var(--i, 0) * 48ms);
}
@keyframes mk-chip { from { opacity: 0; transform: translateY(5px) scale(.9); } to { opacity: 1; transform: none; } }

/* --- §3 the year ruler ------------------------------------------------------ */
.mk-year { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 28px 0; }
.mk-year-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.mk-year-title { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.mk-year-title .mk-arrow { font-family: var(--sans); font-weight: 500; }
.mk-year-note { font-size: 13px; color: var(--spine); }
.mk-year-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.mk-ruler { min-width: 920px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto auto; }
.mk-half {
    grid-row: 1; font-weight: 500; font-size: 12px; color: var(--spine);
    border-top: 1px solid var(--ink); padding-top: 6px; margin: 0 6px 10px; text-align: center; position: relative;
}
.mk-half::before, .mk-half::after { content: ""; position: absolute; top: -1px; width: 1px; height: 9px; background: var(--ink); }
.mk-half::before { inset-inline-start: 0; }
.mk-half::after  { inset-inline-end: 0; }
.mk-half--a { grid-column: 1 / span 6; }
.mk-half--b { grid-column: 7 / span 6; }
.mk-stamp {
    grid-row: 2; align-self: end; justify-self: center; font-weight: 500; font-size: 11px; line-height: 1;
    padding: 6px 8px; color: #fff; border-radius: 3px; margin-bottom: 10px; white-space: nowrap;
}
.mk-stamp--1 { grid-column: 4; }
.mk-stamp--2 { grid-column: 6; }
.mk-stamp--3 { grid-column: 10; }
.mk-stamp--4 { grid-column: 11 / span 2; }
.mk-month {
    grid-row: 3; border-top: 1px solid var(--sky-1); padding: 10px 4px 0; text-align: center;
    font-weight: 500; font-size: 14px; color: var(--ink); position: relative;
}
.mk-month::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 1px; height: 8px; background: var(--sky-1); }
.mk-month:last-child::after { content: ""; position: absolute; top: -1px; inset-inline-end: 0; width: 1px; height: 8px; background: var(--sky-1); }
.mk-month i { display: block; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--spine); margin-top: 7px; }
.mk-month.today { background: var(--w-mint); border-top: 2px solid var(--c-self); padding-top: 9px; font-weight: 600; }
.mk-month.today i { color: var(--c-self); }

/* --- §4 one school day: the bell ruler -------------------------------------- */
.mk-day { padding: 96px 0; }
.mk-day-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); column-gap: 72px; align-items: start; }
.mk-day-intro { position: sticky; top: 32px; }
.mk-eyebrow--sw { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; }
.mk-sw { display: inline-flex; gap: 3px; }
.mk-sw i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.mk-sw-navy { background: var(--pg-navy); }
.mk-sw-blue { background: var(--sky-1); }
.mk-day-intro h2 { margin-bottom: 18px; }
.mk-day-intro .mk-lead { margin: 0 0 28px; }
.mk-sidenote { border-top: 1px solid var(--rule); padding-top: 18px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.mk-sidenote strong { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--spine); margin-bottom: 8px; }
.mk-sidenote p { margin: 0; }
.mk-bell { list-style: none; margin: 0; padding: 0; position: relative; }
.mk-bell::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 104px; width: 1px; background: var(--ink); }
.mk-ev { display: grid; grid-template-columns: 84px 40px minmax(0, 1fr); padding: 22px 0 28px; border-bottom: 1px solid var(--rule); }
.mk-ev:last-child { border-bottom: 0; }
.mk-ev-t b { display: block; font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.mk-ev-t small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-mute); margin-top: 6px; }
.mk-ev-node { position: relative; }
.mk-ev-node::before {
    content: ""; position: absolute; top: 8px; inset-inline-start: 15px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink);
}
.mk-ev--bridge .mk-ev-node::before { background: var(--ink); }
.mk-ev-body { padding-inline-start: 8px; min-width: 0; }
.mk-dir { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; padding: 4px 9px; border-radius: 3px; margin-bottom: 12px; }
.mk-dir i { font-style: normal; }
.mk-dir--in, .mk-dir--home { background: var(--w-blue); color: var(--spine); }
.mk-dir--out { background: var(--pg-navy); color: #fff; }
.mk-dir--out::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.85); }
.mk-ev p { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.6; margin: 0 0 14px; max-width: 600px; }
.mk-frags { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.mk-frag {
    flex: 1 1 240px; max-width: 360px; min-width: 0;
    border: 1px solid var(--rule); border-radius: 4px; background: var(--paper);
    padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--ink);
}
.mk-frag-h {
    display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 12px; color: var(--spine);
    padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px dashed var(--rule);
}
.mk-frag-h--pg { color: var(--pg-navy); }
.mk-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-menu li { padding: 5px 8px; border-radius: 3px; color: var(--ink-soft); font-weight: 500; }
.mk-menu li.mk-menu-hi { background: var(--w-blue); color: var(--spine); font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.mk-menu li.mk-menu-hi span { font-weight: 500; font-size: 12px; }
.mk-mini { display: grid; grid-template-columns: 24px repeat(2, 1fr); font-size: 11px; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.mk-mini > div { padding: 5px 6px; border-inline-start: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-height: 28px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.mk-mini > div:nth-child(3n+1) { border-inline-start: 0; }
.mk-mini > div:nth-last-child(-n+3) { border-bottom: 0; }
.mk-mini .h { font-weight: 600; color: var(--ink-soft); }
.mk-mini .n { justify-content: center; font-weight: 600; color: var(--ink-soft); }
.mk-mini .mk-chip { font-size: 10.5px; padding: 4px 6px; }
.mk-att { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.mk-att .who { font-weight: 600; }
.mk-bubble {
    position: relative; background: var(--w-mint); border-radius: 10px 10px 10px 2px; padding: 9px 12px;
    font-size: 13px; line-height: 1.5; color: var(--ink); max-width: 320px;
}
.mk-stampline { display: block; font-family: var(--serif); font-weight: 500; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; text-align: left; }
.mk-phoneline { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px; font-size: 13px; font-weight: 600; }
.mk-flowtag { display: inline-block; font-weight: 600; font-size: 12px; padding: 4px 9px; border-radius: 3px; background: var(--w-blue); color: var(--spine); margin-top: 12px; }
.mk-heged {
    font-family: var(--serif); font-weight: 500; font-size: 16px; line-height: 1.4; margin: 10px 0 6px; color: var(--ink);
    border-inline-start: 2px solid var(--c-teudot); padding-inline-start: 10px;
}
.mk-path { font-size: 12px; color: var(--ink-soft); margin: 0; }

/* --- §5 the תעודה ------------------------------------------------------------ */
.mk-sheet { border-top: 1px solid var(--hair); padding: 96px clamp(20px, 6vw, 96px) 80px; }
.mk-sheet-in { max-width: 1184px; margin: 0 auto; }
.mk-sheet-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: 44px; }
.mk-sheet-head .mk-lead { max-width: 36em; margin: 0; }
.mk-meta {
    font-size: 13px; color: var(--spine); border: 1px solid var(--hair); margin: 0;
    display: grid; grid-template-columns: 1fr 1fr; justify-self: end; min-width: min(100%, 360px);
}
.mk-meta div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--hair-soft); border-inline-end: 1px solid var(--hair-soft); }
.mk-meta div:nth-child(2n) { border-inline-end: 0; }
.mk-meta div:nth-child(n+3) { border-bottom: 0; }
.mk-meta dt, .mk-meta dd { margin: 0; }
.mk-meta dd { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.mk-cluster { margin-top: 40px; }
.mk-cluster-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--spine); }
.mk-cluster-head h3 { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 0; color: var(--ink); letter-spacing: 0; }
.mk-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; letter-spacing: .02em; padding: 5px 10px; border-radius: 3px; background: var(--c-lesson); color: #fff; }
.mk-who--pg { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 3px 10px 3px 8px; }
.mk-who--pg .mk-house { width: 20px; height: 20px; font-size: 12px; }
.mk-cluster-head .mk-rule { flex: 1; height: 1px; background: var(--hair); }
.mk-rows { list-style: none; margin: 0; padding: 0; }
.mk-rows li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 12px 32px; border-bottom: 1px solid var(--hair-soft); padding: 20px 0; }
.mk-rows li:first-child { border-top: 1px solid var(--sky-1); }
.mk-rows .mk-sub { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); }
.mk-rows .mk-sub a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--hair); }
.mk-rows .mk-sub a:hover { border-bottom-color: var(--ink); }
.mk-rows .mk-sub small { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .06em; color: var(--spine); margin-top: 4px; }
.mk-rows .mk-say { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.6; max-width: 44em; }
.mk-rows .mk-say .mk-chip { margin-inline-start: 6px; vertical-align: middle; }
.mk-mods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--sky-1); border-inline-start: 1px solid var(--hair-soft); }
.mk-mods li { font-weight: 500; font-size: 14px; color: var(--ink); padding: 12px 16px; border-bottom: 1px solid var(--hair-soft); border-inline-end: 1px solid var(--hair-soft); flex: 1 0 auto; min-width: 120px; text-align: center; }
.mk-mods-cap { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; }
.mk-remarks { border-top: 1px solid var(--sky-1); margin-top: 6px; }
.mk-remarks blockquote { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--hair-soft); }
.mk-remarks p { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.5; margin: 0 0 6px; color: var(--ink); }
.mk-remarks cite { font-style: normal; font-size: 13px; color: var(--ink-soft); }
.mk-honest {
    margin: 44px auto 0; max-width: 720px; border: 1px solid var(--ink); padding: 18px 24px; text-align: center;
    font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--ink);
}
.mk-sign { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.mk-sign > div { border-top: 1px solid var(--ink); padding-top: 10px; }
.mk-sigcap { display: block; font-weight: 500; font-size: 13px; letter-spacing: .06em; color: var(--spine); }
.mk-sig { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 10px 0 6px; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink); }
.mk-sig img { height: 35px; width: auto; }
.mk-sign b { display: block; font-family: var(--serif); font-size: 20px; color: var(--ink); font-weight: 700; }

/* --- §6 FAQ ------------------------------------------------------------------- */
.mk-faq-title { font-size: 32px; margin-bottom: 18px; }
.mk-faq { border-top: 1px solid var(--hair-soft); }
.mk-faq details { border-bottom: 1px solid var(--hair-soft); }
.mk-faq summary {
    cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--serif); font-weight: 700; font-size: 20px;
    line-height: 1.3; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: 1; color: var(--spine); flex: 0 0 auto; }
.mk-faq details[open] summary::after { content: "\2013"; }
.mk-faq details > p { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.65; color: var(--ink); }

/* --- §7 the closing line and the call --------------------------------------- */
.mk-close { border-top: 1px solid var(--hair); padding: 72px 0 96px; text-align: center; }
.mk-close-line { font-family: var(--serif); font-weight: 800; font-size: 34px; line-height: 1.25; color: var(--ink); margin: 0 auto 18px; max-width: 24em; text-wrap: balance; letter-spacing: -.005em; }
.mk-close-line .mk-pg { text-decoration: underline; text-decoration-color: var(--pg-teal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.mk-close-sub { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 28px; }

/* --- §8 footer ----------------------------------------------------------------- */
.mk-footer { background: var(--ink); color: rgba(255,255,255,.8); border-top: 3px solid var(--pg-teal); padding: 48px 0 32px; font-size: 14px; }
.mk-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.mk-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.mk-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.mk-footer h4 { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.6); margin: 0 0 14px; }
.mk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mk-footer-brand img { height: 34px; width: auto; margin-bottom: 16px; }
.mk-footer-house { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.mk-footer-brand p { max-width: 360px; margin: 0; line-height: 1.6; }
.mk-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
.mk-footer-bottom a { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   INNER PAGES - the frieze above the nav, the blog bookmark, paper heroes and
   ruled rows. No cards, no icon tiles, no grey surfaces, no bands.
   ========================================================================== */
/* the 118px frieze (signature (2)): 48px ink-stroke SVGs on 1px navy strings of 30-76px, beads
   filled #2b7de1, the bell at 40px on the only teal string, a 1px #2b7de1 hairline closing the band;
   the page's own subject hangs lowest. Already hung, sway only (2.6deg, 6.2-8.1s); nine objects, five at 390px. */
.mk-frieze { position: relative; height: 118px; overflow: hidden; border-bottom: 1px solid var(--sky-1); }
.mk-frieze-row { display: flex; justify-content: space-between; align-items: flex-start; height: 100%; }
.mk-fr { width: 64px; height: 118px; flex: 0 0 auto; transform-origin: 32px 0; }
.mk-fr svg { width: 64px; height: 118px; overflow: visible; display: block; }
.mk-fr .st { stroke: var(--ink); stroke-width: 1; opacity: .55; }
.mk-fr .ic, .mk-bookmark .ic { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mk-fr .ic *, .mk-bookmark .ic * { vector-effect: non-scaling-stroke; }
.mk-fr .dot { fill: var(--sky-1); opacity: .9; }
.mk-fr .ring { fill: none; stroke: var(--sky-1); stroke-width: 1.25; opacity: .45; }
.mk-fr--bell .st { stroke: var(--pg-teal); opacity: 1; }
.mk-fr--bell .knot { fill: var(--pg-teal); }
.mk-fr.sm { display: none; }
@media (min-width: 700px) { .mk-fr.sm { display: block; } }   /* 9 objects at >=700px, 5 at 390px */
.js .mk-fr { animation: mk-frswing var(--p, 6.6s) ease-in-out var(--ph, 0s) infinite alternate; }
@keyframes mk-frswing { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
/* blog posts (signature (3)): one open book, 40px on a 40px navy string, hung from the top edge at the
   start of the article measure, still - a bookmark, not a mobile */
.mk-bookmark { position: absolute; top: 0; inset-inline-start: var(--mk-pad); width: 64px; height: 80px; pointer-events: none; }
.mk-bookmark svg { width: 64px; height: 80px; display: block; overflow: visible; }
.mk-bookmark .st { stroke: var(--ink); stroke-width: 1; opacity: .55; }

/* --- the paper hero: ruled kicker, H1, sub, the hour-chip + a text link, the screen behind a hairline --- */
.mk-hero { padding: 56px 0 64px; border-bottom: 1px solid var(--hair); }
.mk-hero-copy { max-width: 720px; min-width: 0; }
.mk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.mk-hero-grid .mk-hero-copy { max-width: none; }
.mk-hero .mk-kicker { margin: 0 0 22px; }
.mk-hero h1 { margin: 0 0 18px; }
.mk-hero-sub { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.6; color: var(--ink); max-width: 620px; margin: 0 0 28px; }
.mk-hero .mk-actions { gap: 14px 24px; }
/* the hero marks: short ruled lines with a 2px #2b7de1 dash, Plex 500 15px */
.mk-marks { list-style: none; margin: 30px 0 0; padding: 0; max-width: 520px; border-top: 1px solid var(--hair-soft); }
.mk-marks li { position: relative; padding: 9px 0; padding-inline-start: 24px; border-bottom: 1px solid var(--hair-soft); font-weight: 500; font-size: 15px; line-height: 1.5; }
.mk-marks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 19px; width: 12px; height: 2px; background: var(--sky-1); }
/* the product screen the page already uses, behind a hairline frame - not rotated, not a card */
.mk-shot { margin: 0; min-width: 0; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; background: var(--paper); box-shadow: 0 1px 0 rgba(15,31,61,.12); }
.mk-shot img { width: 100%; }

/* --- ruled rows on paper: hairlines #2b7de1 .62 between items --- */
.mk-section--ruled { border-top: 1px solid var(--hair); }
.mk-numbered { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.mk-numbered li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hair); font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--ink); }
.mk-numbered li > b { font-weight: 700; font-size: 18px; color: var(--spine); font-variant-numeric: tabular-nums; }
.mk-numbered strong { font-weight: 700; }
.mk-numbered--big li { padding: 20px 0; }
.mk-numbered--big li > b { font-size: 28px; line-height: 1; padding-top: 3px; }
.mk-feats { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.mk-feats li { display: grid; grid-template-columns: 40px minmax(180px, 280px) minmax(0, 1fr); gap: 10px 32px; padding: 22px 0; border-bottom: 1px solid var(--hair); align-items: start; }
.mk-feats li > b { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--spine); font-variant-numeric: tabular-nums; }
.mk-feats h3 { font-size: 20px; line-height: 1.35; margin: 0; }
.mk-feats h3 .mk-chip { margin-inline-start: 8px; vertical-align: 2px; }
.mk-feats p { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.6; max-width: 44em; }
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.mk-split .mk-lead { margin-bottom: 24px; }
.mk-modlist { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.mk-modlist li { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 6px 32px; padding: 16px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.mk-modlist a { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.mk-modlist a:hover { border-bottom-color: var(--ink); }
.mk-modlist p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* --- contact: three ruled columns, the numbered steps --- */
.mk-contact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.mk-contact li { border-top: 1px solid var(--hair); padding: 20px 0 24px; min-width: 0; }
.mk-contact h2 { font-weight: 800; font-size: 22px; margin: 0 0 8px; }
.mk-contact p { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.55; }
.mk-val { display: inline-block; font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--hair); overflow-wrap: anywhere; }
.mk-val:hover { text-decoration-color: var(--ink); }

/* --- enter: ruled rows, each ending in an hour-chip (real actions) --- */
.mk-entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.mk-entries li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.mk-entries h2 { font-weight: 800; font-size: 22px; margin: 0 0 4px; }
.mk-entries p { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.55; }

/* --- blog: the ruled list of posts, the post --- */
.mk-postlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.mk-postlist li { display: grid; grid-template-columns: 180px minmax(0, 760px); gap: 6px 32px; padding: 28px 0; border-bottom: 1px solid var(--hair); }
.mk-postlist .mk-tag { font-weight: 600; font-size: 12px; letter-spacing: .04em; color: var(--spine); padding-top: 7px; }
.mk-postlist h2, .mk-postlist h3 { font-weight: 700; font-size: 22px; line-height: 1.3; margin: 0 0 8px; }
.mk-postlist h2 { font-weight: 800; }   /* the frozen token: Frank Ruhl 900 on every H2; the compact list's h3 stays 700 */
.mk-postlist h2 a, .mk-postlist h3 a { color: var(--ink); text-decoration: none; }
.mk-postlist h2 a:hover, .mk-postlist h3 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--hair); }
.mk-postlist p { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.6; max-width: 44em; }
.mk-postlist--compact li { padding: 20px 0; }
.mk-article { padding: 0 0 72px; }
.mk-post-head { position: relative; padding-top: 104px; }
.mk-post-head .mk-kicker { margin: 0 0 20px; }
.mk-crumbs { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.mk-crumbs a { color: var(--ink-soft); }
.mk-post-meta { color: var(--ink-soft); font-size: 14px; margin: 0; }
.mk-post, .mk-prose { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.7; color: var(--ink); }
.mk-post h2, .mk-prose h2 { font-weight: 800; font-size: 30px; line-height: 1.2; margin: 1.5em 0 .5em; }
.mk-post p, .mk-prose p { margin: 0 0 1.1em; }
.mk-post .mk-lead, .mk-prose .mk-lead { font-size: 21px; line-height: 1.6; }
.mk-post > ul, .mk-prose > ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
.mk-post > ul > li, .mk-prose > ul > li { position: relative; padding-inline-start: 24px; margin-bottom: .55em; }
.mk-post > ul > li::before, .mk-prose > ul > li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 12px; height: 2px; background: var(--sky-1); }
.mk-post-cta { border: 1px solid var(--hair); border-inline-start: 4px solid var(--spine); padding: 22px 24px; margin: 36px 0; }
.mk-post-cta p { margin: 0; font-size: 18px; }
.mk-post-cta a[href^="tel:"] { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .mk-sky-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding: 200px 20px 32px; min-height: 0; }
    .mk-sky-copy { grid-column: 1; grid-row: 1; }
    .mk-diary { grid-column: 1; grid-row: 2; margin-top: 40px; }
    .mk-sky-quote { grid-column: 1; grid-row: 3; padding-top: 32px; }
    .mk-sky-sub { max-width: 560px; }
    /* shorter strings so the lowest label clears the copy; positions spread so nothing collides */
    .mk-arm--cert { --len: 44px; }
    .mk-arm--b1   { --x: 82%; --len: 48px; }
    .mk-arm--cap  { --len: 64px; }
    .mk-arm--b2   { --len: 96px; }
    .mk-arm--book { --len: 80px; }
    .mk-arm--b3   { --len: 76px; }
    .mk-arm--pen  { --x: 22%; --len: 60px; }
    .mk-arm--bell { --x: 6%; --len: 90px; }
    .mk-day-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
    .mk-day-intro { position: static; }
    .mk-sheet-head { grid-template-columns: 1fr; }
    .mk-meta { justify-self: start; }
}
@media (max-width: 900px) {
    .mk-burger { display: inline-flex; }
    .mk-links {
        display: none; position: absolute; top: 72px; inset-inline: 0; margin: 0;
        background: var(--paper); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
        flex-direction: column; align-items: stretch; padding: 8px 20px 12px; gap: 0;
    }
    .mk-links.is-open { display: flex; }
    .mk-header .mk-links a { color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--rule); }
    .mk-header .mk-links a:last-child { border-bottom: 0; }
    .mk-header .mk-links a:hover, .mk-header .mk-links a[aria-current="page"] { border-bottom-color: var(--sky-1); }
    .mk-footer-grid { grid-template-columns: 1fr 1fr; }
    .mk-hero-grid, .mk-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .mk-contact { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mk-feats li { grid-template-columns: 40px minmax(0, 1fr); }
    .mk-feats p { grid-column: 2; }
    .mk-modlist li, .mk-postlist li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 640px) {
    :root { --mk-pad: 20px; }
    .mk-nav { height: 64px; gap: 10px; }
    .mk-brand { height: 40px; padding: 0 10px; }
    .mk-brand img { height: 28px; }
    .mk-nav-end { gap: 10px; }
    .mk-nav-end .mk-nav-phone { display: none; }
    .mk-links .mk-nav-phone { display: block; }
    .mk-links { top: 64px; }
    .mk-section { padding: 52px 0; }
    /* the hero band: strings 40-90px, icons 36px, bell 30px, no sub-labels, no beads; <= 200px tall */
    .mk-sky-grid { padding: 176px 20px 32px; }
    .mk-sky h1 { font-size: 40px; }
    .mk-arm--cert { --x: 80%; --len: 40px; --size: 36px; }
    .mk-arm--cap  { --x: 64%; --len: 68px; --size: 36px; }
    .mk-arm--book { --x: 46%; --len: 90px; --size: 36px; }
    .mk-arm--pen  { --x: 28%; --len: 56px; --size: 36px; }
    .mk-arm--bell { --x: 9%;  --len: 84px; --size: 30px; }
    .mk-arm--b1, .mk-arm--b2, .mk-arm--b3 { display: none; }
    .mk-lbl small { display: none; }
    .mk-diary-head { padding: 14px 12px 10px; }
    .mk-weeknav { display: none; }
    /* three columns: today and its neighbours (data-win from the date script; no-JS: the first three) */
    table.mk-dg { min-width: 0; }
    .mk-dg .mk-brk-b { display: none; }   /* two colspan=3 halves: the column count stays equal to the visible cells, no phantom columns */
    .mk-dg .c3, .mk-dg .c4, .mk-dg .c5 { display: none; }
    .mk-dg[data-win="1"] .c0, .mk-dg[data-win="1"] .c4, .mk-dg[data-win="1"] .c5 { display: none; }
    .mk-dg[data-win="1"] .c3 { display: table-cell; }
    .mk-dg[data-win="2"] .c0, .mk-dg[data-win="2"] .c1, .mk-dg[data-win="2"] .c5 { display: none; }
    .mk-dg[data-win="2"] .c3, .mk-dg[data-win="2"] .c4 { display: table-cell; }
    .mk-dg[data-win="3"] .c0, .mk-dg[data-win="3"] .c1, .mk-dg[data-win="3"] .c2 { display: none; }
    .mk-dg[data-win="3"] .c3, .mk-dg[data-win="3"] .c4, .mk-dg[data-win="3"] .c5 { display: table-cell; }
    .mk-sky-quote p { font-size: 19px; }
    .mk-day { padding: 64px 0 56px; }
    .mk-bell::before { inset-inline-start: 71px; }
    .mk-ev { grid-template-columns: 60px 22px minmax(0, 1fr); padding: 18px 0 22px; }
    .mk-ev-t b { font-size: 22px; }
    .mk-ev-node::before { inset-inline-start: 6px; top: 6px; }
    .mk-frag { flex-basis: 100%; max-width: none; }
    .mk-sheet { padding-top: 64px; padding-bottom: 56px; }
    .mk-rows li { grid-template-columns: 1fr; gap: 8px; }
    .mk-sign { grid-template-columns: 1fr; gap: 44px; }
    .mk-close { padding: 56px 0 72px; }
    .mk-close-line { font-size: 28px; }
    .mk-footer { padding: 40px 0 28px; }
    .mk-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .mk-hero { padding: 40px 0 48px; }
    .mk-entries li { grid-template-columns: minmax(0, 1fr); }
    .mk-entries .mk-btn { justify-self: start; }
    .mk-post-head { padding-top: 96px; }
    .mk-numbered li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
    .mk-feats li { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; }
}

/* every object hung, still, at full opacity; the week visible at once; today washed if resolved */
@media (prefers-reduced-motion: reduce) {
    .mk *, .mk *::before, .mk *::after { animation: none !important; transition: none !important; }
    .mk-string { transform: none !important; }
    .mk-mico, .mk-lbl, .mk-bead, .mk-knot, .mk-dg .mk-chip { opacity: 1 !important; }
    .mk-btn:active { transform: none; }
}

@media print {
    .mk-header, .mk-footer, .mk-close, .mk-frieze, .mk-bookmark, .mk-mobile, .mk-hills, .mk-horizon, .mk-post-cta { display: none; }
    .mk-sky { background: none; color: var(--ink); min-height: 0; }
}

/* the approved attendance_absence_alert template rendered as the parent sees it:
   bold title line, four labelled lines, then WhatsApp's URL button below a hairline */
.mk-bubble b { display: block; font-weight: 600; margin-bottom: 4px; }
.mk-bubble-btn {
    display: block; margin: 8px -10px -8px; padding: 9px 10px 8px;
    border-top: 1px solid rgba(15,31,61,.12); text-align: center;
    font-family: var(--sans); font-weight: 600; font-size: 13px; color: #0b6cd6;
}

/* A hero that carries the live diary sheet (diary, timetable) gets the homepage's proportion:
   the copy column stays narrow so the six day columns fit without the sheet's internal scroll. */
@media (min-width: 1025px) {
    .mk-hero-grid:has(.mk-diary) { grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); }
    .mk-hero-grid .mk-diary { margin-top: 0; }
}

/* --- client feedback 2026-09-08: the mobile is background, not a band ------------- */
.mk-lbl { display: none; }
.mk-mico svg { opacity: .82; }
.mk-mobile { z-index: 0; }
.mk-sky-grid { position: relative; z-index: 1; }
@media (max-width: 1024px) { .mk-sky-grid { padding-top: 132px; } }
@media (max-width: 640px)  { .mk-sky-grid { padding-top: 112px; } }

/* --- rounded system screens + soft finishes ----------------------------------------- */
.mk-shot { border-radius: 14px; box-shadow: 0 10px 30px rgba(15,31,61,.10), 0 1px 0 rgba(15,31,61,.08); }
.mk-diary { border-radius: 14px; box-shadow: 0 18px 44px rgba(3,20,50,.22), 0 1px 0 rgba(15,31,61,.12); }
.mk-frag { border-radius: 10px; box-shadow: 0 4px 14px rgba(15,31,61,.06); }
.mk-brand { border-radius: 10px; }
.mk-btn { box-shadow: 0 6px 16px rgba(0,67,122,.22); }
.mk-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,67,122,.28); }
.mk-btn--ghost, .mk-btn--ghost:hover { box-shadow: none; transform: none; }
.mk-faq summary:hover, .mk-faq-item summary:hover { color: var(--spine); }
.mk-chip { box-shadow: 0 1px 0 rgba(15,31,61,.10); }

/* --- slimmer frieze on inner pages: same objects, scaled into a 84px band ------------ */
.mk-frieze { height: 84px; }
.mk-fr { scale: .62; transform-origin: 32px 0; height: 84px; }
.mk-fr svg { height: 118px; }

/* ISSUE-002: in the narrower sheet heroes the Gregorian date drops under the Hebrew one instead of clipping */
.mk-hero .mk-dg .mk-hd .mk-num { display: block; }

/* --- client feedback, round 2 (2026-09-08) -------------------------------------------- */
/* the button: brand blue with white text - the navy chip read as dark-on-dark on paper */
.mk-btn { background: var(--sky-1); border-color: var(--sky-1); color: #fff; box-shadow: 0 6px 16px rgba(43,125,225,.28); }
.mk-btn:hover { background: var(--sky-2); border-color: var(--sky-2); color: #fff; box-shadow: 0 10px 22px rgba(43,125,225,.34); }
.mk-btn--ghost, .mk-btn--ghost:hover { background: transparent; border-color: currentColor; color: inherit; box-shadow: none; }
/* the diary sheet: the table painted square corners over the 14px radius */
.mk-diary { overflow: hidden; }
/* the closing on the sky, hills at its foot, no paper fade (the navy footer follows) */
.mk-close--sky { position: relative; overflow: hidden; border-top: 0; color: #fff;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 100%); padding: 88px 0 120px; }
.mk-close--sky > .mk-wrap { position: relative; z-index: 1; }
.mk-close--sky .mk-close-line { color: #fff; }
.mk-close--sky .mk-close-line .mk-pg { text-decoration-color: var(--pg-teal); }
.mk-close--sky .mk-close-sub { color: rgba(255,255,255,.92); }
.mk-close--sky .mk-btn { background: #fff; border-color: #fff; color: var(--sky-2); box-shadow: 0 10px 26px rgba(3,20,50,.28); }
.mk-close--sky .mk-btn:hover { background: #eef5fe; border-color: #eef5fe; color: var(--sky-2); }
.mk-close--sky .mk-phone, .mk-close--sky .mk-textlink { color: #fff; }
.mk-close--sky .mk-hills { z-index: 0; }
/* round 2b: on the sky the button is white (blue-on-blue vanished); the closing hills hug the footer */
.mk-sky .mk-btn { background: #fff; border-color: #fff; color: var(--sky-2); box-shadow: 0 10px 26px rgba(3,20,50,.28); }
.mk-sky .mk-btn:hover { background: #eef5fe; border-color: #eef5fe; color: var(--sky-2); }
.mk-close--sky { padding-bottom: 150px; }
.mk-close--sky .mk-hills { top: auto; bottom: 0; height: 200px; }

/* --- client round 3 (2026-09-08): the real pgishonim wordmark replaces the bracket-פ tag ----- */
.mk-who--pg { background: transparent; border: 0; padding: 0; }
.mk-who--pg img { display: block; height: 30px; width: auto; }
.mk-footer-brand .mk-footer-house img { height: 26px; width: auto; margin: 0; }

/* --- example site (school-website page, 2026-09-08): browser frame + phone at the end edge ---- */
.mk-example { padding-top: 8px; }
.mk-example-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; margin: 40px 0 28px; }
.mk-example-head h2 { margin: 0 0 8px; }
.mk-example-head .mk-lead { margin: 0; max-width: 40em; }
.mk-example-stage { position: relative; padding-inline-end: 110px; padding-bottom: 48px; }
.mk-browser { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule-strong); background: #fff;
  box-shadow: 0 24px 60px rgba(15,31,61,.16), 0 1px 0 rgba(15,31,61,.08); }
.mk-browser-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: #eef2f8; border-bottom: 1px solid var(--hair); }
.mk-browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #cfd8e6; }
.mk-browser-bar i { font-style: normal; margin: 0 auto; font-size: 12px; color: var(--ink-soft); background: #fff; border-radius: 6px; padding: 3px 14px; direction: ltr; }
.mk-browser img, .mk-phone-frame img { display: block; width: 100%; height: auto; }
.mk-phone-frame { position: absolute; inset-inline-end: 0; bottom: 0; width: 210px; margin: 0; border-radius: 28px; overflow: hidden;
  border: 6px solid var(--ink); background: var(--ink); box-shadow: 0 24px 50px rgba(15,31,61,.28); }
@media (max-width: 900px) {
  .mk-example-head { grid-template-columns: 1fr; align-items: start; }
  .mk-example-stage { padding: 0; }
  .mk-phone-frame { display: none; }
}

/* --- the 7-link nav (home added 2026-09-08) overflowed at 1024: tighter gaps between the burger breakpoint and 1140 --- */
@media (min-width: 901px) and (max-width: 1140px) {
  .mk-links { gap: 14px; margin-inline-start: 14px; }
  .mk-nav-end { gap: 12px; }
}
@media (min-width: 901px) and (max-width: 1023px) {
  .mk-nav-end .mk-nav-phone { display: none; } /* the number stays in the hero, the closing band and the footer */
}

/* the footer's "מבית פגישונים" is a link to pgishonim.com (2026-09-08) */
.mk-footer-house a { display: inline-flex; align-items: center; gap: 10px; color: #fff; }