/*! article container — copied verbatim from the demo's app.css lines 564–607 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

.article-container{padding-top:var(--sp-article-top-lg);display:flex;flex-direction:column;gap:var(--sp-loose);align-items:center;}
.article-col{width:620px;max-width:840px;display:flex;flex-direction:column;gap:var(--sp-normal);}
.article-top-container{display:flex;flex-direction:column;gap:var(--sp-normal);align-items:center;width:100%;overflow:hidden;}
.article-top{display:flex;flex-direction:column;gap:var(--sp-normal);align-items:center;width:100%;}
/* Figma article/label (4271:332) is TWO nodes: the component paints the box and holds the padding, and one text sits inside it. There is no wrapper between them, so there is none here either — .label IS the box. It hugs its text on both axes: placed instances measure 204, 197, 196 and 187 with identical padding, so any fixed width here would be one instance frozen into a rule. The surface is the component's own token set, which is what lets a brand turn the label into a chip while the others keep a plain rule. */
.article-label{display:inline-flex;justify-content:center;padding:var(--sp-x-tight) var(--sp-snug);background:var(--bg-component-article-label);border-bottom:var(--bw-article-label) solid var(--border-article-label);border-radius:var(--radius-article-label);}
.article-label .article-label__text{color:var(--content-article-label);white-space:nowrap;}
/* text-style role: article title (base) — the small map (xl→lg at 768), full token
   set incl letter-spacing. news-sm / news-md use this bare; the larger templates
   layer .ts-article-title / .ts-hero-title on top. */
.article-title{font-family:var(--typo-font-display);font-weight:var(--typo-display-xl-font-weight);font-size:var(--typo-display-xl-font-size);line-height:var(--typo-display-xl-line-height);letter-spacing:var(--typo-display-xl-letter-spacing);color:var(--content-primary);text-align:center;width:100%;margin:0;}
.signature{direction:ltr;display:flex;gap:var(--sp-x-tight);align-items:center;}
.signature .signature__part{color:var(--content-secondary);white-space:nowrap;}
.signature .ic{font-family:var(--typo-font-icon);font-size:var(--typo-icon-xl-font-size);line-height:var(--typo-icon-xl-line-height);color:var(--content-primary);}
.article-underline{font-family:var(--typo-underline-font-family);font-weight:var(--typo-underline-md-font-weight);font-size:var(--typo-underline-md-font-size);line-height:var(--typo-underline-md-line-height);color:var(--content-secondary);text-align:center;width:100%;margin:0;}

[data-align="right"] .article-top{align-items:flex-start;}
[data-align="right"] .article-title,
[data-align="right"] .article-underline{text-align:start;}
/* signature right variant (Figma article/signature=right): the "•" separator appears and the source logo moves to the end; center keeps date·logo·source */
.signature .divider--dot{display:none;}
[data-align="right"] .signature .divider--dot{display:inline;order:2;}
[data-align="right"] .signature .signature__source{order:3;}
[data-align="right"] .signature .ic{order:4;}

/* media */
.media{margin:0;display:flex;flex-direction:column;gap:var(--sp-tight);width:100%;}
/* 16/9, not 160/90 — identical geometry, and one spelling only: the ratio set
   is the canonical crop list for the image service (RATIOS.md), so a second
   spelling would derive and store a duplicate file for every image */
.media .ratio{aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:var(--radius-media);}
.media .ratio img,
.media .ratio video{width:100%;height:100%;object-fit:cover;}
/* THE BACKGROUND VIDEO IS OURS, NOT THE DEMO'S — it draws no video anywhere, so these four rules have
   no section to be copied from and are recovered from the pre-port sheet instead. The button is WCAG
   2.2.2: a decorative loop must be stoppable, and a control nobody can see is not one. Codepoints read
   from fonts/indy-press.css (pause-fill, play-fill), never guessed. */
.media .ratio{position:relative;}
.media__toggle{position:absolute;inset-block-end:var(--sp-snug);inset-inline-end:var(--sp-snug);width:40px;height:40px;border:0;border-radius:var(--radius-button-primary);background:var(--bg-static-darkest);cursor:pointer;}
.media__toggle::before{font-family:var(--typo-font-icon);font-size:var(--typo-icon-md-font-size);line-height:var(--typo-icon-md-line-height);color:var(--content-static-white);content:"\e060";}
.is-paused .media__toggle::before{content:"\e062";}
/* caption (caption/md) — ONE source for every caption on every page (media, box,
   hero); carries the full token set incl letter-spacing. Scoped rules add only
   their layout extras (width / padding / height). */
.caption{font-family:var(--typo-font-text);font-size:var(--typo-caption-md-font-size);line-height:var(--typo-caption-md-line-height);color:var(--content-secondary);text-align:right;margin:0;}
.media .caption{width:100%;}

/* no overflow clip here — the byline share popover must overlay following content; blocks that need clipping (.byline, .article-subhead-lg) clip themselves */
.article-body{width:100%;padding:0 var(--sp-normal);display:flex;flex-direction:column;gap:var(--sp-paragraph);align-items:center;}
.article-body > *{width:100%;max-width:620px;}

.byline{direction:ltr;border-top:var(--bw-thin) solid var(--border-normal);padding-top:var(--sp-normal);height:68px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;}
.byline__tools{display:flex;gap:var(--sp-tight);align-items:center;}
/* action-chip (Figma component set `action-chip`) — on its own token set.
   Variants: brand (default) · mono · white-static · black-static ·
   brand-inverse. The byline toolbar uses `brand`. */
/* client 2026-08-25: chips lose their border where possible. As in Figma, the WIDTH goes to none and the colour stays wired, so a brand that wants bordered chips only turns border-width back on. outline (not built here) is the one variant that keeps thin. */
.action-chip{background:var(--bg-component-action-brand);border:var(--bw-none) solid var(--border-action-brand);height:36px;padding:0 var(--sp-tight);border-radius:var(--radius-button-primary);display:flex;gap:var(--sp-x-tight);align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease, border-color .2s ease;}
.action-chip .lbl{color:var(--content-action-brand);padding-top:var(--sp-height-fix);white-space:nowrap;transition:color .2s ease;}
.action-chip .ic{font-family:var(--typo-font-icon);font-size:var(--typo-icon-sm-font-size);line-height:var(--typo-icon-sm-line-height);color:var(--content-action-brand);transition:color .2s ease;}
/* the remaining Figma variants */
.action-chip--mono{background:var(--bg-basic-white);border-color:transparent;}
.action-chip--mono .lbl,
.action-chip--mono .ic{color:var(--content-primary);}
.action-chip--white-static{background:var(--bg-static-white);border-color:transparent;}
.action-chip--white-static .lbl,
.action-chip--white-static .ic{color:var(--content-static-darkest);}
.action-chip--black-static{background:var(--bg-static-darkest);border-color:transparent;}
.action-chip--black-static .lbl,
.action-chip--black-static .ic{color:var(--content-static-white);}
.action-chip--brand-inverse{background:var(--bg-component-action-brand-inverse);border-color:var(--border-action-brand-inverse);}
.action-chip--brand-inverse .lbl,
.action-chip--brand-inverse .ic{color:var(--content-action-brand-inverse);}
.byline__author{display:flex;gap:var(--sp-tight);align-items:center;}
.byline__author .byline__row{display:flex;gap:var(--sp-micro);align-items:center;}
.byline__author .dropdown-trigger{font-family:var(--typo-font-icon);font-size:var(--typo-icon-xs-font-size);line-height:var(--typo-icon-xs-line-height);color:var(--content-tertiary);}
.byline__author .name{color:var(--content-byline);white-space:nowrap;}
.avatar{width:48px;height:48px;}

.article-subhead-lg{padding-top:var(--sp-normal);overflow:hidden;}
.article-subhead-lg h2{color:var(--content-subhead);text-align:right;margin:0;}
/* text-style role: subhead heading — subhead/xl → subhead/lg at 768, full token set
   incl letter-spacing. Element carries .ts-subhead-heading; app.css keeps only layout. */
.ts-subhead-heading{font-family:var(--typo-subhead-xl-font-family);font-weight:var(--typo-subhead-xl-font-weight);font-size:var(--typo-subhead-xl-font-size);line-height:var(--typo-subhead-xl-line-height);}
@media (max-width:767px){ .ts-subhead-heading{font-family:var(--typo-subhead-lg-font-family);font-weight:var(--typo-subhead-lg-font-weight);font-size:var(--typo-subhead-lg-font-size);line-height:var(--typo-subhead-lg-line-height);} }

.article-lid{padding-top:var(--sp-x-loose);}
.lid-inner{border-top:var(--bw-thick) solid var(--border-normal);padding:var(--sp-loose) 0;}
.lid-inner p{color:var(--content-lid);text-align:right;margin:0;}
/* text-style role: lid — lid/lg → lid/md at 768, full token set incl letter-spacing.
   Element carries .ts-lid; app.css keeps only layout. */
.ts-lid{font-family:var(--typo-lid-lg-font-family);font-weight:var(--typo-lid-lg-font-weight);font-size:var(--typo-lid-lg-font-size);line-height:var(--typo-lid-lg-line-height);}
@media (max-width:767px){ .ts-lid{font-family:var(--typo-lid-md-font-family);font-weight:var(--typo-lid-md-font-weight);font-size:var(--typo-lid-md-font-size);line-height:var(--typo-lid-md-line-height);} }

.read-more{padding:var(--sp-paragraph) 0;}
.read-more .read-more__container{border-top:var(--bw-thin) solid var(--border-hairline);border-bottom:var(--bw-thin) solid var(--border-hairline);padding:var(--sp-normal);display:flex;flex-direction:column;gap:var(--sp-tight);}
.read-more h2{color:var(--content-label);text-align:right;margin:0;}
.read-more .read-more__feed{display:flex;flex-direction:column;gap:var(--sp-tight);}
.read-more .read-more__link{direction:ltr;display:flex;gap:var(--sp-x-tight);align-items:center;}
.read-more .read-more__link p{flex:1;min-width:1px;direction:rtl;color:var(--content-primary);margin:0;}
.read-more .read-more__link .read-more__bullet{font-family:var(--typo-font-icon);font-size:var(--typo-icon-sm-font-size);line-height:var(--typo-icon-sm-line-height);color:var(--content-interactive);}

/* client 2026-08-25: more room around in-article modules. The Figma masters
   were rebuilt as [transparent outer, pad-block spacing/normal] > [container];
   margin-block is that outer frame's twin here. Only the three restructured
   masters carry it — read-more, topic-list, byline, signature await their
   own decisions. */
ip-article-box,
ip-article-newsletter-promo,
ip-article-channel-promo{margin-block:var(--sp-normal);}

.newsletter-promo--card{background:var(--bg-surface-1);border:var(--bw-thin) solid var(--border-hairline);border-radius:var(--radius-default);padding:var(--sp-normal);display:flex;flex-direction:column;gap:var(--sp-normal);align-items:center;overflow:hidden;}
.newsletter-promo--card h2{color:var(--content-tertiary);text-align:center;margin:0;width:100%;}
.submit-field{direction:ltr;width:100%;background:var(--bg-static-white);border:var(--bw-thin) solid var(--border-strong);border-radius:var(--radius-button-primary);padding:var(--sp-x-tight);display:flex;align-items:center;justify-content:center;}
/* submit-field variants (Figma: light-bg / transparent × normal / error).
   transparent (dark context) recolors its children too: paper-black button,
   primary-inverse label, cta-muted placeholder (Figma 4520:4287) */
.submit-field--transparent{background:var(--bg-basic-none);}
.submit-field--transparent .submit-field__button{background:var(--bg-basic-black);}
.submit-field--transparent .submit-field__button span{color:var(--content-primary-inverse);}
.submit-field--transparent .submit-field__placeholder span{color:var(--content-cta-muted);}
.submit-field--error{border-color:var(--border-error);}
/* error-state stack: field + error message, Figma gap 5 */
.newsletter-promo__field{width:100%;display:flex;flex-direction:column;gap:var(--sp-x-tight);}
/* standalone form error message (reusable in any form) */
.error-message{margin:0;width:100%;color:var(--content-error);}
.submit-field__button{background:var(--bg-static-darkest);height:40px;padding:0 var(--sp-snug);border-radius:var(--radius-label);display:flex;align-items:center;justify-content:center;}
.submit-field__button span{color:var(--content-static-white);white-space:nowrap;}
.submit-field__placeholder{flex:1;min-width:1px;height:40px;display:flex;align-items:center;justify-content:flex-end;padding-right:var(--sp-snug);}
.submit-field__placeholder span{color:var(--content-static-darkest);white-space:nowrap;}
.newsletter-terms{direction:ltr;width:100%;display:flex;gap:var(--sp-x-tight);align-items:center;justify-content:flex-end;overflow:hidden;}
.newsletter-terms .txt{color:var(--content-tertiary);white-space:nowrap;}
.newsletter-terms .ic{font-family:var(--typo-font-icon);font-size:var(--typo-icon-sm-font-size);line-height:var(--typo-icon-sm-line-height);color:var(--content-cta);}

.tight{display:flex;flex-direction:column;gap:var(--sp-tight);}
/* .article-subhead-sm = layout only; type from .ts-subhead-sm on the element */
.article-subhead-sm{color:var(--content-primary);text-align:right;margin:0;}

/* client 2026-08-26 (Ohad): modules' border #DDDFE6. Rewired in Figma from border/normal to border/hairline, which is what resolves to that value in boker; the other brands follow their own hairline. topic-list, byline and read-more deliberately stay on border/normal for now. */
/* the component binds max-width/body on its outer frame (4205:776) */
.channel-promo{border-top:var(--bw-thin) solid var(--border-hairline);border-bottom:var(--bw-thin) solid var(--border-hairline);padding:var(--sp-normal);display:flex;flex-direction:column;gap:var(--sp-snug);align-items:center;max-width:var(--maxw-body);overflow:hidden;}
.channel-promo h2{color:var(--content-essential);text-align:center;margin:0;width:100%;}
/* Figma order: buttons left-to-right, and inside each button label left, icon right */
.channel-promo .channel-promo__buttons{direction:ltr;display:flex;gap:var(--sp-snug);width:100%;}
/* the two CTAs are button-secondary instances that grow to share the row */
.channel-promo .button-secondary{flex:1;min-width:1px;}
.channel-promo .button-secondary .lbl{direction:rtl;unicode-bidi:isolate;}

/* RTL cross-axis start = right, matching Figma's counterAxisAlignItems: MAX */
.article-box{}

/* wide top (news-md / news-lg / op-md / full underline) */
.article-col--wide{width:840px;}
/* text-style role: article title — the responsive display map (2xl→xl→lg at
   1024/768) in ONE place, carrying the FULL token set (incl letter-spacing, which
   the font: shorthand dropped). Elements opt in with .ts-article-title; a token
   change flows to every title on every page. Used by news-lg / op-md. */
.article-title.ts-article-title{font-family:var(--typo-font-display);font-weight:var(--typo-display-2xl-font-weight);font-size:var(--typo-display-2xl-font-size);line-height:var(--typo-display-2xl-line-height);letter-spacing:var(--typo-display-2xl-letter-spacing);}
@media (max-width:1023px){ .article-title.ts-article-title{font-weight:var(--typo-display-xl-font-weight);font-size:var(--typo-display-xl-font-size);line-height:var(--typo-display-xl-line-height);letter-spacing:var(--typo-display-xl-letter-spacing);} }
@media (max-width:767px){ .article-title.ts-article-title{font-weight:var(--typo-display-lg-font-weight);font-size:var(--typo-display-lg-font-size);line-height:var(--typo-display-lg-line-height);letter-spacing:var(--typo-display-lg-letter-spacing);} }
/* text-style role: hero title — full / 50:50 heroes step 2xl→xl→lg at 1280/1024.
   Same single-source pattern, hero breakpoints. */
.article-title.ts-hero-title{font-family:var(--typo-font-display);font-weight:var(--typo-display-2xl-font-weight);font-size:var(--typo-display-2xl-font-size);line-height:var(--typo-display-2xl-line-height);letter-spacing:var(--typo-display-2xl-letter-spacing);}
@media (max-width:1279px){ .article-title.ts-hero-title{font-weight:var(--typo-display-xl-font-weight);font-size:var(--typo-display-xl-font-size);line-height:var(--typo-display-xl-line-height);letter-spacing:var(--typo-display-xl-letter-spacing);} }
@media (max-width:1023px){ .article-title.ts-hero-title{font-weight:var(--typo-display-lg-font-weight);font-size:var(--typo-display-lg-font-size);line-height:var(--typo-display-lg-line-height);letter-spacing:var(--typo-display-lg-letter-spacing);} }
/* near-fullbleed media (news-lg) — renders as min(1280px,100vw); --mw lets it
   share the edge-aware radius rule below (full-bleed under 1280 → radius 0) */
.media--bleed{width:1280px;--mw:min(1280px, 100vw);}

.media--sq .ratio{aspect-ratio:1/1;}
.media--free .ratio{aspect-ratio:auto;}
.media--free .ratio img{height:auto;}

/* half — the ip-media host floats at 50% so text wraps beside it; needs a
   normal-flow container (not the flex article-body). Drops to full width below
   the article breakpoint. */
.media-host--half{float:inline-end;width:50%;margin-block-end:var(--sp-tight);margin-inline-start:var(--sp-normal);}

/* md / lg / xl — symmetric breakout past the column, centred on the column
   (which is centred in the viewport), so the overhang is even on both sides.
   The host is flipped to LTR so the centring margin isn't dropped under RTL. */
.media-host--break{direction:ltr;}
.media--md{--mw:min(840px, 100vw);width:var(--mw);margin-left:calc((100% - var(--mw)) / 2);}
.media--lg{--mw:min(1280px, 100vw);width:var(--mw);margin-left:calc((100% - var(--mw)) / 2);}
.media--xl{--mw:100vw;width:var(--mw);margin-left:calc((100% - var(--mw)) / 2);}
/* xl is sized by height, not ratio: a full-bleed 90vh band (every appearance, incl. mobile) */
.media--xl .ratio{aspect-ratio:auto;height:90vh;}
/* radius follows the side inset: the corner can only be as round as the gap
   between the image and the screen edge. Full-bleed (--mw = 100vw) → inset 0 →
   radius 0; as the image detaches past its cap the radius grows in at the same
   rate the gap opens, capping at radius/media. No breakpoints — reuses --mw. */
.media--md .ratio,
.media--lg .ratio,
.media--xl .ratio,
.media--bleed .ratio{border-radius:min(var(--radius-media), (100vw - var(--mw)) / 2);}

/* full-bleed captions get side padding (xl always; md/lg once full-bleed) */
.media--xl > .caption{padding-inline:var(--sp-normal);}
@media (max-width:839px){ .media--md > .caption{padding-inline:var(--sp-normal);} }
@media (max-width:1279px){ .media--lg > .caption{padding-inline:var(--sp-normal);} }

/* half collapses to a full-width block below the article breakpoint */
@media (max-width:767px){
  /* the demo's host is <ip-media>, an inline box once the float is off, so its margin-block-end is inert here; this host is a div and would keep it */
  .media-host--half{float:none;width:100%;margin-inline-start:0;margin-block-end:0;}
}

/* opinion overline */
.article-overline{display:flex;flex-direction:column;gap:var(--sp-tight);align-items:center;}
.article-overline__avatar{width:120px;height:120px;border-radius:50%;}
.article-overline__name{color:var(--content-primary);white-space:nowrap;}
/*! the writer's name is a real destination wherever the site has one (build-contract C5) and the demo draws the same name as plain text, so the link carries its host's ink and shows its state on hover alone. Unstyled it took the UA's link blue — rgb(0,0,238) against the brand's rgb(43,34,40) — on the opinion page's overline. */
.byline__link{text-decoration:none;}
.byline__link:hover{text-decoration:underline;}

/* cta banner block (replaces lid on these templates) */
/* client 2026-08-25: the banner gets the same room the in-article modules got */
.cta-banner{margin:var(--sp-normal) 0;}
.cta-banner img{width:100%;display:block;}
/* compact 60px header (hero templates) — stays 60px at every breakpoint (beats the global 80px tablet rule) */
.site-header.site-header--compact{height:60px;}
.site-header--compact{justify-content:center;}
.site-header--compact::after{display:none;}
.site-header--compact .site-header__top{height:50px;padding:var(--sp-x-tight) var(--sp-normal);background:none;}
.site-header--compact .site-nav{display:none;}
.site-header--compact .site-header__logo{bottom:0;}
.site-header--compact .site-header__logo .logo-eye{width:142px;height:36px;}
.site-header--compact .site-header__logo .logo-shakuf{width:77px;height:28px;margin-top:4px;}
.site-header--overlay{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background-color .3s ease;}
.site-header--overlay .site-header__top{transition:background-color .3s ease;}
/* the overlay header stays transparent at every breakpoint (beats the global mobile bg rule) */
.site-header.site-header--overlay{background:none;}
/* 50:50 header is a solid compact bar that sits above the hero (in flow), so it pins with position:sticky — no fade needed (it's already opaque) */
.site-header--solid60{background:var(--bg-component-header);position:sticky;top:0;z-index:1000;}

/*! the article BODY. Its headings and its pictures ARE the demo's DOM — body_blocks_functions.php
    rebuilds each block into the element the design draws, so `.article-subhead-lg`, `.article-subhead-sm`
    and `.media` above are the rules that style them. What is left here is the paragraph, which takes
    the demo's own `p.body` (app.css 801-806, commit 7df0d35) — the class the paragraph block filter
    now writes, because a `> p` selector here also caught the underline, the error message and every
    other component paragraph that carries its own text style.

    THE TYPE IS THE COMPOSED TEXT STYLE, not a second class on the element. The demo writes
    `body ts-body-lg` and `.ts-body-lg` declared exactly what this rule already declared, so it was
    a class on every paragraph of every article buying nothing — measured: removing it from a live
    paragraph changed neither family, size, line-height, weight nor letter-spacing. The demo
    decides the look and not the code (Eyal, 2026-09-22), so the class went and `font:var(--ts-body-lg)`
    took its place: one rule, one intent, the typography still from the layer that owns it. */
p.body{color:var(--content-body);text-align:right;margin:0;font:var(--ts-body-lg);letter-spacing:var(--ts-body-lg-ls);}
p.body a{color:var(--content-link);text-decoration:underline;text-underline-position:from-font;}
/* the demo wraps a small subhead and its paragraph in `.tight`, whose gap is tight where the body's own is paragraph; the editor has no such wrapper, so the difference rides on the heading */
.article-body > h3:not(:last-child){margin:0 0 calc(var(--sp-tight) - var(--sp-paragraph));}

/*! the port's own three declarations, and the reason for each: the demo draws the read-more row, the
    box's "קראו עוד" and each topic tag as static text, while the theme has a real destination for all
    three (build-contract C5), and the summary drawer's "more on this" list is a fourth. The anchor sits
    ON the element the demo styles, so the only thing it brings that the demo does not draw is the UA
    underline and its colour — and the tag's colour and nowrap, which the demo binds to a span, are
    restated here from its own declarations. */
/*! and the port's own one declaration about PICTURES: the demo's images carry no width/height
    attributes and ours do, because a box reserved before the picture arrives is what keeps the
    page from jumping. Those attributes are presentational hints, so the height among them pins
    the box the moment CSS gives the width — the banner rendered 188px tall inside a 362px column,
    78px more than the design. `height:auto` hands the ratio back to the attributes (or to the
    aspect-ratio the design sets), which is what reserves the box in the first place. */
.cta-banner img,
.info-frame-media img{height:auto;}
.read-more .read-more__link,
.byline__list a,
.article-box .article-box__more-link{text-decoration:none;}
.byline__list a{color:inherit;}
.topic-list__items a{color:var(--content-secondary);white-space:nowrap;text-decoration:none;}