/* article.css - the single-article page ("עמוד תוכן").
Auto-loaded by the SDK for ?content=article only (css/<page>.css convention),so none
of this weighs on any other page.
Sliced from pages_png/עמוד תוכן.png. Comp canvas 2666px,so the same fluid rule as the
rest of the site:a comp px N becomes clamp(MOBILE_MIN,(N/26.66)vw,Npx). Tokens,.wrap,
.title--underline and .reveal come from css.css;
the hero band is .hero--photo,also in
css.css,shared with /articles.
Sizes are MEASURED off the comp,not eyeballed - font sizes from the ink-width ratio of
a matching line of text against a trial render,spacing from each line's ink-band
position. The measurements this file is built on,in comp px:
wrap content box   x 500-2166 (1666 wide),as everywhere else on the site
post band          y 748-2948,white
floated photo    x 1414-2166 (753w),y 876-1673 (798h),radius ~24
title lines      ink y 880-950 and 996-1066,pitch 116,right edge 1330
underline        y 1138-1141,x 1169-1334 -> 166x4,#cea763,flush inline-start
body lines       pitch 75;
para 1 runs 1186-1690 beside the photo,
paras 2-4 full width at 1819,2194,2570 (375 apart)
feats band         y 2949-4790,cream
row pitch        549.5;
photo 677x451 at x 1490-2166,radius ~16
title            ink y 3088-3138,underline y 3185-3188 (166 wide again)
body             4 lines,pitch 64
*/
/* ---- c2 the article body ----
The photo is FLOATED rather than gridded because that is what the comp shows:the title
and the first paragraph sit beside it in a 830px column,and the paragraphs that clear
its bottom edge run the full 1666. A two-column grid would reproduce this one comp but
would trap any longer first paragraph in the narrow column;
the float lays out real copy
of any length the way the design intends. */
.post{background:#fff;
padding-block:clamp(40px,4.80vw,128px) clamp(44px,3.75vw,100px)}
/* float:inline-start is the logical form of float:right under dir="rtl" - it puts the
photo on the same side the comp does without hard-coding a physical direction. */
.post__figure{float:inline-start;
width:clamp(150px,28.24vw,753px);
aspect-ratio:753/798;
object-fit:cover;
border-radius:clamp(8px,.90vw,24px);
margin-inline-end:clamp(16px,2.926vw,78px);
margin-block-end:clamp(12px,.90vw,24px)}
/* display:flow-root is load-bearing,not decoration. A normal block box keeps its full
width beside a float (only its LINE boxes are shortened),which would leave the
absolutely-positioned .title--underline::after measuring off the full 1666 and landing
under the photo. flow-root makes the h1 a block formatting context,so the box itself
narrows to the 830 column and the underline lands where the comp puts it.
position:relative is required and is NOT on .title--underline in css.css - it sits on
each individual title class there,so a new title class has to bring its own. */
.post__title{position:relative;
display:flow-root;
color:var(--c-navy);
font-size:clamp(24px,3.652vw,97.4px);
font-weight:700;
line-height:1.196;
text-align:start}
/* Same kicker-on-its-own-line treatment as the listing card,done in CSS so the break
stays a styling decision rather than a hard <br> in the markup. */
.post__kicker{display:block}
.post__title.title--underline{padding-block-end:clamp(14px,1.24vw,33px)}
/* margin-inline:0 auto,not the global `auto`:the comp's rule is flush with the text
column's inline-start edge,not centred under the title. */
.post__title.title--underline::after{width:clamp(60px,6.23vw,166px);
background:var(--c-tan);
margin-inline:0 auto}
/* 58.3px,not a round 58:the comp's fourth line is "סוליסי טידום בעליק." (411px ink),and
the break that puts "סוליסי" there instead of at the end of line 3 only happens above
58.2. At 58.3 all four line widths land within 9px of the comp. Line-height 1.287 is the
comp's 75px line pitch divided by that size - the feature body independently gives
64/49.7 = 1.288,which is what makes both look like one type system rather than two. */
.post__body{color:var(--c-ink);
font-size:clamp(16px,2.187vw,58.3px);
line-height:1.287;
text-align:start;
margin-block-start:clamp(12px,1.088vw,29px);
overflow-wrap:anywhere}
.post__body + .post__body{margin-block-start:clamp(20px,2.81vw,75px)}
/* The comp leaves 108px between the paragraph that runs beside the photo and the first
full-width one,against 75px between the full-width paragraphs - the wider gap marks
where the copy stops being a column and becomes the page. :first-of-type picks the
paragraph after the first <p>,the <h1> and <img> not being of that type. If real copy
is short enough that the float ends mid-paragraph-one anyway,this still reads as a
section break rather than a mistake;
every other pair keeps the uniform 75. */
.post__body:first-of-type + .post__body{margin-block-start:clamp(28px,4.013vw,107px)}
/* Only on the 404 branch,where there is nothing else to click. */
.post__back{color:var(--c-navy);
font-weight:700}
.post__back:hover{color:var(--c-tan)}
.post--missing{padding-block:clamp(56px,7vw,186px)}
/* ---- c3 feature rows ----
830 + 159 + 677 = 1666,the wrap content box exactly. minmax(0,Nfr) rather than plain
fr so a long unbroken word cannot push a column past its share. align-items:center
matches the comp,where the shorter text block is centred against the taller photo
(text 3088-3471 inside photo 3051-3501),and it keeps doing the right thing when real
copy changes the text block's height. */
.feats{background:var(--c-cream);
padding-block:clamp(40px,3.83vw,102px) clamp(52px,7.13vw,190px)}
/* Photo column FIRST:column 1 is the inline-start (right) side under dir="rtl",which is
where the comp puts every row's photo - the same side the article's float sits on. */
.feat{display:grid;
grid-template-columns:minmax(0,677fr) minmax(0,830fr);
gap:clamp(20px,5.96vw,159px);
align-items:center}
.feat + .feat{margin-block-start:clamp(36px,3.69vw,98.5px)}
.feat__img{width:100%;
aspect-ratio:677/451;
object-fit:cover;
border-radius:clamp(6px,.60vw,16px)}
/* 69.7px from the ink width of "לורם איפסום" - the comp draws it 338px wide here and 472px
in the article title,and canvas ink measurement puts those at 69.72 and 97.36. */
.feat__title{position:relative;
color:var(--c-navy);
font-size:clamp(20px,2.615vw,69.7px);
font-weight:700;
line-height:1;
text-align:start}
.feat__title.title--underline{padding-block-end:clamp(16px,1.575vw,42px)}
.feat__title.title--underline::after{width:clamp(60px,6.23vw,166px);
background:var(--c-tan);
margin-inline:0 auto}
.feat__body{color:var(--c-ink);
font-size:clamp(15px,1.8755vw,50px);
line-height:1.287;
text-align:start;
margin-block-start:clamp(12px,1.125vw,30px);
overflow-wrap:anywhere}
/* ---- narrow screens ----
Kept deliberately small:the base above is fluid,so only genuine layout shifts belong
here. The hero's phone treatment is on .hero--photo in css.css. */
@media (max-width:900px){
/* A 753px-wide float inside a ~700px viewport leaves no column to wrap into,so the
photo goes full width above the copy and the paragraphs all run the same measure.
The ratio opens out to 16/10 because a near-square photo eats most of a phone
screen before the article has said anything. */
.post__figure{float:none;
width:100%;
aspect-ratio:16/10;
margin-inline-end:0;
margin-block-end:clamp(16px,4vw,32px)}
/* One column;
source order already puts the photo above its copy. */
.feat{grid-template-columns:1fr;
gap:clamp(16px,4vw,32px)}
}