/* הכפר portal: its own look, separate from the show page. Loaded only on portal pages. */
.portal {
  /* Maya's brief: white first, muted blue and red as touches, a little beige and brown */
  --pine: #1b1919;
  --pine-2: #506ea4;
  --cream: #ffffff;
  --paper: #ffffff;
  --apricot: #a95a63;
  --clay: #a95a63;
  --butter: #ba9b84;
  --mist: #e6ecf5;
  --blush: #f5e6e7;
  --sand: #f3f5f9;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: var(--sand);
  --ink: var(--pine);
  --ink-soft: #55504c;
  --brand: var(--clay);
  --brand-dark: #84424b;
  --accent: var(--butter);
  --line: #e3e7ef;
  --focus: var(--pine-2);
  --font-display: "Rubik", "Assistant", sans-serif;
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  overflow-x: clip;
}
.portal section h2::after { display: none; }
.portal h1, .portal h2, .portal h3 { font-weight: 700; letter-spacing: -.015em; }
.portal h2 { font-size: clamp(36px, 5.5vw, 68px); line-height: 1.08; }
.portal a { color: inherit; }
.portal .ph { color: #3b3216; }

.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; background: var(--pine-2); transform: scaleX(var(--p, 0)); transform-origin: right; }

/* Top bars and floating header */
/* Calm, not alarming: a soft blue strip with dark text. */
.portal .help-bar { background: var(--mist); padding: 7px 16px; }
.portal .help-bar a { color: var(--pine); font-weight: 500; }
.portal .site-header { position: sticky; top: 12px; z-index: 20; background: none; border: 0; padding: 0; margin: 12px 0 -74px; box-shadow: none !important; }
.portal .site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; max-width: 1140px;
  margin-inline: auto; width: calc(100% - 32px); padding: 8px 24px; background: #fff; border-radius: 999px; box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .3s, transform .3s var(--ease);
}
.portal .site-header.is-scrolled .wrap { box-shadow: 0 0 0 1px var(--line), 0 14px 34px -18px rgba(40, 40, 60, .5); }
.portal .logo { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--pine); }
.portal .nav { display: flex; gap: 22px; }
.portal .nav a { color: var(--pine); font-weight: 600; }
.portal .nav a::after { background: var(--clay); bottom: 0; }
.portal .medical-note { background: #fff; color: var(--ink-soft); padding: 88px 20px 0; font-weight: 400; font-size: 14px; }

/* Buttons */
.pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 28px; border-radius: 999px;
  font-weight: 700; text-decoration: none; transition: transform .3s var(--ease), background-color .25s, color .25s;
}
.pill span { transition: transform .3s var(--ease); }
.pill:hover { transform: translateY(-3px); }
.pill:hover span { transform: translateX(-6px); }
.portal a.pill-light { background: var(--pine-2); color: #fff; }
.portal a.pill-line { box-shadow: inset 0 0 0 2px var(--pine); color: var(--pine); }
.portal a.pill-line:hover { background: var(--pine); color: #fff; }
.portal a.pill-dark { background: var(--pine); color: #fff; }
.portal .btn { border-radius: 999px; background: var(--pine); color: #fff; }
.portal .btn-ghost { background: none; color: var(--pine); box-shadow: inset 0 0 0 2px var(--pine); border: 0; }
.portal .btn-ghost:hover { background: var(--pine); color: #fff; }

/* Hero: a colored village, windows light up as you scroll */
.hero { position: relative; background: #fff; color: var(--pine); overflow: hidden; min-height: calc(100svh - 170px); display: flex; flex-direction: column; padding: 40px 0 0; }
.hero-text { position: relative; z-index: 2; width: 100%; padding-bottom: 30px; }
.hero h1 { color: var(--pine); font-size: clamp(72px, 13vw, 170px); line-height: 1; margin: 0 0 22px; font-weight: 700; }
.hero-sub { font-size: clamp(20px, 2.4vw, 28px); margin-bottom: 26px; color: var(--ink-soft); }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.moon { position: absolute; inset-inline-end: 9%; top: 9%; width: clamp(70px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--clay); }
.village { display: block; width: 100%; height: clamp(190px, 25vw, 340px); margin-top: auto; }
.win { fill: #ffffff3d; transition: fill .9s ease; }
.win.on { fill: #fff; }
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .06em; margin-block: -.06em; }
.js [data-split] .w > i { display: inline-block; font-style: normal; transform: translateY(110%); transition: transform 1s var(--ease) var(--d); }
.js [data-split].is-in .w > i { transform: none; }
/* Safety net: the headline is always visible once the entrance time has passed */
.js [data-split].is-done .w > i { transform: none; transition: none; }

/* Text that fills in with the scroll */
.statement { padding: clamp(36px, 5vw, 64px) 0; }
.statement p { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 5vw, 62px); line-height: 1.22; margin: 0; max-width: 1020px; }
.js [data-words] span { color: #1b191926; transition: color .35s; }
.js [data-words] span.lit { color: var(--pine); }

/* Topics: one composition, not a row of equal cards */
.topics { padding: 0 0 clamp(70px, 9vw, 130px); }
.topics h2 { margin-bottom: 40px; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 300px;
  padding: 30px; border-radius: 32px; text-decoration: none; color: var(--pine); grid-column: span 2;
  transition: transform .5s var(--ease), border-radius .5s var(--ease);
}
.tile h3 { color: inherit; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; margin: auto 0 10px; max-width: 16em; }
.tile p { margin: 0; font-size: 17px; line-height: 1.5; max-width: 34em; }
.tile-icon { width: 44px; height: 44px; flex: none; }
.tile-go { position: absolute; top: 24px; inset-inline-end: 26px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #ffffff55; font-size: 20px; transition: transform .4s var(--ease), background-color .3s; }
.tile-shape { position: absolute; z-index: -1; inset-inline-end: -8%; bottom: -30%; width: 58%; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; background: #1b19190d; transition: transform .7s var(--ease); }
.tile:hover { transform: translateY(-6px); }
.tile:hover .tile-shape { transform: translateY(-22%) scale(1.08); }
.tile:hover .tile-go { transform: translateX(-6px); background: #ffffff99; }
.tile-1 { grid-column: span 4; min-height: 400px; background: var(--pine-2); color: #fff; }
.tile-1 h3 { font-size: clamp(36px, 4.6vw, 60px); }
.tile-1 .tile-shape, .tile-2 .tile-shape { background: #ffffff26; }
.tile-1 .tile-go, .tile-2 .tile-go { background: #ffffff33; }
.tile-2 { background: var(--clay); color: #fff; border-radius: 220px 220px 32px 32px; padding-top: 74px; }
.tile-2 .tile-go { top: 64px; inset-inline-end: 34px; }
.tile-3 { background: var(--sand); }
.tile-4 { background: var(--mist); border-radius: 32px 32px 120px 32px; }
.tile-5 { background: var(--blush); }
.tile-5 { border-radius: 32px 120px 32px 32px; }

/* Show teaser */
.teaser { padding: clamp(70px, 9vw, 130px) 0; }
.teaser .wrap { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.arch { border-radius: 999px 999px 24px 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--pine-2); }
.arch img { width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.eyebrow { font-weight: 700; color: var(--clay); margin-bottom: 10px; }
.teaser .pill { margin-top: 12px; }

/* Inner pages */
.portal .page-head { position: relative; overflow: hidden; background: #fff; color: var(--pine); border-bottom: 1px solid var(--line); padding: clamp(36px, 5vw, 70px) 0 clamp(60px, 7vw, 100px); border-radius: 0 0 48px 48px; }
.portal .page-head .wrap { position: relative; z-index: 1; }
.portal .page-head h1 { color: var(--pine); font-size: clamp(42px, 7vw, 92px); line-height: 1.04; max-width: 14em; }
.portal .page-head .lead { color: var(--ink-soft); font-size: clamp(19px, 2.2vw, 25px); }
.portal .crumbs, .portal .crumbs a { color: var(--ink-soft); }
.portal .reviewed { color: var(--pine-2); }
.head-arch { position: absolute; inset-inline-end: 4%; bottom: -60px; width: clamp(110px, 17vw, 240px); height: 88%; border-radius: 999px 999px 0 0; background: var(--apricot); }
.head-arch-2 { inset-inline-end: calc(4% + clamp(90px, 13vw, 190px)); width: clamp(70px, 10vw, 140px); height: 52%; background: var(--sand); }
.head-mental-health .head-arch:not(.head-arch-2) { background: var(--pine-2); }
.head-professional-help .head-arch:not(.head-arch-2) { background: var(--clay); }
.head-community .head-arch:not(.head-arch-2) { background: var(--mist); }
.head-loss .head-arch:not(.head-arch-2) { background: var(--butter); }
.head-first-parenthood .head-arch:not(.head-arch-2) { background: var(--blush); }
.portal .prose { padding-block: clamp(36px, 5vw, 64px); font-size: 19px; }
.portal .prose h2 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 1.5em; }
.portal .prose h2:first-child { margin-top: 0; }
.portal .section-soft { background: var(--surface-soft); border-radius: 48px; margin: 0 16px; padding: clamp(44px, 6vw, 80px) 0; }
.portal .section-soft h2 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 24px; }

.portal .filters select {
  appearance: none; border: 0; border-radius: 999px; padding: 12px 22px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231b1919' stroke-width='2'/%3E%3C/svg%3E") no-repeat left 20px center;
  transition: box-shadow .2s;
}
.portal .filters select:hover { box-shadow: inset 0 0 0 2px var(--pine); }
.portal .filter-count { margin-top: 14px; }
.portal .resource-card { position: relative; overflow: hidden; background: var(--paper); border-radius: 28px; padding: 28px; transition: transform .45s var(--ease), box-shadow .45s; }
.portal .resource-card::before { content: ""; position: absolute; inset-inline-end: -22px; top: -22px; width: 74px; height: 74px; border-radius: 50%; background: var(--mist); transition: transform .5s var(--ease); }
.portal .resource-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -26px rgba(40, 40, 60, .5); }
.portal .resource-card:hover::before { transform: scale(1.5); }
.portal .resource-card > * { position: relative; }
.portal .resource-card h3 { font-size: 25px; max-width: calc(100% - 44px); }
.portal .resource-meta { color: var(--clay); }
.portal .resource-links a { font-weight: 700; }
.portal .mail-cta { background: var(--paper); border-radius: 28px; padding: 18px 24px; justify-content: space-between; }
.portal .article-list a { padding: 20px 0; transition: padding .35s var(--ease); }
.portal .article-list a:hover { padding-inline-start: 14px; }
.portal .article-list strong { font-family: var(--font-display); font-size: 25px; color: var(--pine); }

/* Footer */
.portal .site-footer { background: var(--sand); color: var(--ink-soft); border-radius: 48px 48px 0 0; margin-top: clamp(50px, 6vw, 90px); padding: 44px 0 96px; border: 0; }
/* The bottom padding keeps the last links clear of the floating accessibility button. */
.portal .site-footer a { color: var(--pine); }

/* Reveal with stagger and a slight scale */
.portal.js-ready .reveal { opacity: 0; transform: translateY(34px) scale(.975); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms), border-radius .5s var(--ease); }
.portal.js-ready .reveal.is-visible { opacity: 1; transform: none; }
.portal.js-ready .tile.reveal.is-visible:hover { transform: translateY(-6px); transition-delay: 0ms; }
.portal.js-ready .resource-card.reveal.is-visible:hover { transform: translateY(-5px); transition-delay: 0ms; }

@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile { grid-column: span 1; min-height: 250px; padding: 24px; }
  .tile-1 { grid-column: span 2; min-height: 320px; }
  .tile-2 { grid-column: span 2; border-radius: 160px 160px 32px 32px; }
  .tile-5 { grid-column: span 2; min-height: 210px; }
  .teaser .wrap { grid-template-columns: 1fr; }
  .arch { max-width: 420px; }
}
@media (max-width: 760px) {
  .portal .filters, .portal .resource-grid { grid-template-columns: 1fr; }
  .portal .site-header .wrap { padding: 8px 18px; width: calc(100% - 20px); min-height: 56px; }
  .portal .site-header { margin-bottom: -68px; }
  .portal .nav { gap: 13px; font-size: 15px; }
  .portal .logo { font-size: 20px; }
  .portal .medical-note { padding-top: 78px; font-size: 13px; }
  .hero { min-height: 0; }
  .portal .section-soft { border-radius: 32px; margin: 0 10px; }
}
@media (max-width: 480px) {
  .tile:not(.tile-1) { grid-column: span 2; min-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .portal.js-ready .reveal { opacity: 1; transform: none; }
  .js [data-words] span { color: var(--pine); }
  .js [data-split] .w > i { transform: none; }
  .tile:hover, .pill:hover, .portal .resource-card:hover { transform: none; }
}

/* Keep headings clear of the decorative arches and sun */
.portal .page-head .wrap > * { max-width: min(100%, 760px); }
.portal .page-head h1 { font-size: clamp(40px, 6vw, 76px); }
@media (max-width: 1000px) {
  /* No sun or arches on smaller screens: the header stays plain and short. */
  .head-arch { display: none; }
  .portal .page-head { padding-bottom: 8px; border-bottom: 0; border-radius: 0; }
}
@media (max-width: 760px) {
  .moon { width: 52px; top: auto; bottom: 170px; inset-inline-end: auto; left: 10%; }
}
.portal .tile-1, .portal .tile-2 { color: #fff; }
@media (max-width: 760px) { .moon { bottom: 120px; } }

/* Topics: calm and light. Plain rounded tiles, no cut shapes. */
.portal .tile, .portal .tile-1, .portal .tile-2, .portal .tile-4, .portal .tile-5 { border-radius: 24px; color: var(--pine); padding: 30px; }
.portal .tile-1 { background: #eef2f8; }
.portal .tile-2 { background: #f8eeee; }
.portal .tile-3 { background: #f3f1f8; }
.portal .tile-4 { background: #f1f4f9; }
.portal .tile-5 { background: #faf3f1; }
.portal .tile-go, .portal .tile-1 .tile-go, .portal .tile-2 .tile-go { top: 26px; inset-inline-end: 28px; width: auto; height: auto; background: none; }
.portal .tile:hover .tile-go { background: none; }
.portal .tile:hover { transform: translateY(-3px); }
.portal.js-ready .tile.reveal.is-visible:hover { transform: translateY(-3px); }

/* "Pause animations" in the accessibility tool also stops the scroll effects */
html.a11y-pause-anim [data-speed] { transform: none !important; }
html.a11y-pause-anim [data-words] span { color: var(--pine) !important; }

/* Topics first: the three priority topics lead, the other two sit below in a quieter row */
.hero { min-height: 0; padding-top: 24px; }
.hero h1 { margin-bottom: 14px; }
.hero-sub { margin-bottom: 20px; }
.village { height: clamp(120px, 14vw, 200px); }
.hero h1 { font-size: clamp(64px, 10vw, 140px); }
.topics { padding-top: clamp(28px, 4vw, 48px); }
.topics h2 { margin-bottom: 24px; }
.portal .tile-main { grid-column: span 2; min-height: 330px; }
.portal .tile-main h3 { font-size: clamp(30px, 3.2vw, 42px); }
.portal .tile-main p { font-size: 18px; }
.portal .tile-1 { background: #dfe6f2; }
.portal .tile-2 { background: #f3e0e1; }
.portal .tile-3 { background: #e8e4f1; }
.portal .tile-more { grid-column: span 3; min-height: 0; padding: 22px 28px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.portal .tile-more h3 { font-size: 24px; margin-top: 6px; }
.portal .tile-more p { font-size: 16px; }
.portal .tile-more .tile-go { top: 22px; }
/* A lone last tile in its row takes the whole width. */
.portal .tile-more:last-child:nth-child(4) { grid-column: 1 / -1; }
.statement { padding: clamp(32px, 4vw, 56px) 0 0; }
@media (max-width: 860px) {
  .portal .bento { grid-template-columns: 1fr; }
  .portal .tile-main, .portal .tile-more { grid-column: auto; }
  .portal .tile-main { min-height: 230px; }
}
.portal.js-ready .reveal.is-shown { opacity: 1; transform: none; transition: none; }

/* Village: whole houses on wide screens (only the sides are trimmed on phones) */
@media (min-width: 761px) {
  .village { height: auto; aspect-ratio: 1440 / 340; }
  .hero h1 { font-size: clamp(64px, 8.5vw, 124px); }
}
@media (max-width: 760px) { .moon { width: 40px; bottom: 92px; left: 6%; } }

/* Show teaser as a wide photo banner */
.teaser .wrap { display: block; }
.show-banner { position: relative; display: flex; align-items: flex-end; min-height: clamp(340px, 34vw, 460px); border-radius: 32px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; }
.show-banner img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; z-index: -2; transition: scale .8s var(--ease); }
.show-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, rgba(20, 18, 24, .82) 0%, rgba(20, 18, 24, .55) 45%, rgba(20, 18, 24, .05) 80%); }
.show-banner:hover img { scale: 1.04; }
.show-banner-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 560px; padding: clamp(28px, 4vw, 52px); }
.show-banner .eyebrow { color: #f3e0e1; margin: 0; }
.show-banner-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; }
.show-banner-sub { font-size: 18px; color: #f1eee9; }
.pill-white { background: #fff; color: var(--pine); margin-top: 8px; }
.show-banner:hover .pill-white { transform: translateY(-3px); }
.show-banner:hover .pill-white span { transform: translateX(-6px); }
@media (max-width: 760px) {
  .show-banner { min-height: 440px; border-radius: 24px; }
  .show-banner::before { background: linear-gradient(to top, rgba(20, 18, 24, .88) 0%, rgba(20, 18, 24, .5) 55%, rgba(20, 18, 24, 0) 85%); }
}
.portal a.show-banner { color: #fff; }
.statement p { font-size: clamp(22px, 3vw, 38px); line-height: 1.3; max-width: 900px; }


/* Topic text from the editing interface: source numbers, the source list, entry cards and the urgent-help box */
.portal .prose sup.src { font-size: .62em; line-height: 0; margin-inline-start: 2px; }
.portal .prose sup.src a { text-decoration: none; color: var(--clay); font-weight: 700; padding: 0 2px; }
.portal .prose sup.src a:hover { text-decoration: underline; }
.portal .prose ol.sources { font-size: 16px; color: var(--ink-soft); padding-inline-start: 1.4em; }
.portal .prose ol.sources li { margin-bottom: 10px; scroll-margin-top: 110px; overflow-wrap: anywhere; }
.portal .prose ol.sources li:target { background: var(--sand); border-radius: 10px; }
.portal .prose .entry { background: var(--surface-soft); border-radius: 26px; padding: 24px 28px; margin-top: 16px; }
.portal .prose .entry h3 { font-size: 23px; margin: 0 0 8px; }
.portal .prose .entry p { margin: 0 0 8px; }
.portal .prose .entry p:last-child { margin-bottom: 0; }
.portal .prose .entry a { overflow-wrap: anywhere; }
/* Help boxes stay gentle: soft blue, no red edge. */
.portal .prose blockquote { margin: 32px 0; padding: 22px 28px; border: 0; background: var(--mist); border-radius: 22px; font-style: normal; }
.portal .prose blockquote p { margin: 0 0 8px; }
.portal .prose blockquote p:last-child { margin-bottom: 0; }
.portal .resource-place { font-weight: 700; color: var(--clay); margin-bottom: 2px; }
.portal .resource-address, .portal .resource-note { color: var(--ink-soft); font-size: 16px; }
.portal .resource-more summary { cursor: pointer; font-weight: 700; color: var(--blue, #506ea4); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.portal .resource-more summary::-webkit-details-marker { display: none; }
.portal .resource-more summary::after { content: "+"; font-size: 1.2em; line-height: 1; transition: transform .3s var(--ease); }
.portal .resource-more[open] summary::after { transform: rotate(45deg); }
.portal .resource-more p { margin: 10px 0 0; }
.portal .resource-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.portal .filters .check { display: inline-flex; align-items: center; gap: 10px; align-self: end; background: var(--paper); border-radius: 999px; padding: 12px 20px; cursor: pointer; font-weight: 600; }
.portal .filters .check input { width: 18px; height: 18px; accent-color: var(--clay); }
.portal a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* Contents list in the page header: jumps straight to each section.
   Computers show it open as a row of small buttons; phones open and close it. */
.portal .toc { margin-top: 18px; }
.portal .toc-title { font-weight: 700; color: var(--pine); font-size: 15px; margin: 0 0 8px; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.portal .toc-title::-webkit-details-marker { display: none; }
.portal .toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.portal .toc a { display: block; padding: 4px 11px; border-radius: 999px; background: var(--mist); color: var(--pine); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.4; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); }
.portal .toc a:hover, .portal .toc a:focus-visible { background: var(--pine-2); color: #fff; }
@media (min-width: 761px) {
  .portal .toc-title { pointer-events: none; }
}
@media (max-width: 760px) {
  .portal .toc { background: var(--mist); border-radius: 20px; }
  .portal .toc-title { display: flex; justify-content: space-between; width: 100%; margin: 0; padding: 12px 18px; }
  .portal .toc-title::after { content: "+"; font-size: 1.3em; line-height: 1; transition: transform .3s var(--ease); }
  .portal .toc[open] .toc-title::after { transform: rotate(45deg); }
  .portal .toc ul { display: block; padding: 0 18px 8px; }
  .portal .toc li + li { border-top: 1px solid #fff; }
  .portal .toc a { background: none; border-radius: 0; padding: 10px 0; font-size: 15px; white-space: normal; }
  .portal .toc a:hover, .portal .toc a:focus-visible { background: none; color: var(--pine-2); }
}
.portal .prose h2[id], .portal #places { scroll-margin-top: 110px; }
@media (max-width: 760px) {
  /* The text starts close under the header, not after two stacked gaps. */
  .portal .page-head + section { padding-top: 0; }
  .portal .page-head + section .prose { padding-top: 28px; }
}

/* Opening sentence of a topic (a first paragraph all in bold): large, words rising in one by one. */
.portal .prose .opening { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.3; color: var(--pine); margin: 0 0 28px; max-width: 22em; }
.portal .prose .opening span { display: inline-block; animation: word-in .7s var(--ease) both; animation-delay: calc(200ms + var(--i) * 70ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(.45em); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .portal .prose .opening span { animation: none; } }

/* A pinned place (like ער״ן) stands out from the filtered list. */
.portal .resource-card.is-pinned { background: var(--mist); }
.portal .resource-card.is-pinned::before { background: #fff; }

/* Under the content, a short line with its button: text and button side by side, centered on phones. */
.portal .mail-cta { justify-content: space-between; gap: 14px 20px; font-weight: 600; }
.portal .mail-cta + .mail-cta { margin-top: 14px; }
.portal .section-soft .wrap > .mail-cta:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .portal .mail-cta { flex-direction: column; text-align: center; padding: 22px 20px; }
}
/* The card's corner circle stays the same size (it used to grow and stay big after "מידע נוסף"). */
.portal .resource-card:hover::before { transform: none; }

/* "Tell us" window */
.portal .tell-us { width: min(520px, calc(100% - 32px)); border: 0; border-radius: 28px; padding: 0; color: var(--pine); box-shadow: 0 30px 60px -30px rgba(30, 30, 50, .5); }
.portal .tell-us::backdrop { background: rgba(27, 25, 25, .45); }
.portal .tell-us-form { display: grid; gap: 16px; padding: 30px 28px 28px; }
.portal .tell-us h2 { font-size: 26px; margin: 0 0 0 40px; }
.portal .tell-us-close { position: absolute; top: 18px; left: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--mist); color: var(--pine); font-size: 24px; line-height: 1; cursor: pointer; }
.portal .tell-us-field { display: grid; gap: 6px; font-weight: 600; font-size: 16px; }
.portal .tell-us-field input, .portal .tell-us-field textarea { font: inherit; font-weight: 400; border: 0; border-radius: 16px; padding: 12px 16px; background: var(--sand); box-shadow: inset 0 0 0 1px var(--line); color: var(--pine); }
.portal .tell-us-field input:focus, .portal .tell-us-field textarea:focus { outline: 2px solid var(--pine-2); outline-offset: 1px; }
.portal .tell-us .btn[type=submit] { justify-self: start; }
.portal .tell-us-done { margin: 0; line-height: 1.6; }
.portal .tell-us-done a { color: var(--pine-2); font-weight: 700; }
.portal .tell-us [hidden] { display: none; }

/* Contact lines on a place's card: phone, WhatsApp, email and site, each with its icon. */
.portal .resource-links { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.portal .resource-links a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; color: var(--pine); overflow-wrap: anywhere; }
.portal .resource-links a:hover span, .portal .resource-links a:hover { color: var(--pine-2); }
.portal .resource-links svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--pine-2); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.portal .resource-card.is-pinned .resource-links { border-top-color: #fff; }
.portal .resource-links a[href^="tel:"] { direction: rtl; }

/* ---------- Sections with their own look (Maya's notes 5, 7, 12-16) ---------- */
/* Source marks: small and quiet, one mark for a run of sources. */
.portal .prose sup.src { font-size: .55em; vertical-align: super; line-height: 0; }
.portal .prose sup.src a { color: var(--ink-soft); font-weight: 600; padding: 0 1px; }
/* Key sentence: a soft warm band that breaks a long run of text. */
.portal .prose .key { font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 2.2vw, 25px); line-height: 1.4; color: var(--pine); background: #f8f1e7; border-radius: 18px; padding: 16px 22px; margin: 6px 0 22px; }
.portal .prose blockquote .key { font: inherit; font-weight: 700; background: none; padding: 0; margin: 0 0 8px; }
/* Default cards: white with a thin line, not a filled blue block. */
.portal .prose .entry { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 22px; }
/* The start of each part of a long page. */
.portal .prose .part-label { margin: clamp(56px, 7vw, 90px) 0 0; padding-top: 22px; border-top: 2px solid var(--pine); font-weight: 700; font-size: 16px; color: var(--clay); }
.portal .prose .part-label + .part h2 { margin-top: 10px; }
.portal .toc .toc-group { flex-basis: 100%; font-size: 13px; font-weight: 700; color: var(--clay); margin-top: 6px; }
.portal .toc .toc-group:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .portal .toc li.toc-group { border-top: 0; padding-top: 12px; }
}
/* Health funds: four light tiles, two by two. */
.portal .prose .part-funds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.portal .prose .part-funds > :not(.entry) { grid-column: 1 / -1; }
.portal .prose .part-funds .entry { margin: 0; padding: 20px 22px; }
.portal .prose .part-funds .entry h3 { font-size: 21px; margin-bottom: 6px; }
.portal .prose .part-funds .entry p { font-size: 17px; margin-bottom: 4px; }
.portal .prose .part-funds .entry a[href^="tel:"] { font-weight: 700; color: var(--pine); }
@media (max-width: 560px) { .portal .prose .part-funds { grid-template-columns: 1fr; } }
/* One clear help box (ער״ן), stronger than the others. */
.portal .prose .part-urgent blockquote { background: var(--pine-2); color: #fff; padding: 26px 30px; }
.portal .prose .part-urgent blockquote a, .portal .prose .part-urgent blockquote sup.src a { color: #fff; }
.portal .prose .part-urgent blockquote .key { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); }
/* Communities and groups: light rows, no boxes. */
.portal .prose .part-list .entry { background: none; box-shadow: none; border-radius: 0; padding: 20px 0 20px; margin: 0; border-bottom: 1px solid var(--line); }
.portal .prose .part-list h2 + p, .portal .prose .part-list > p:last-of-type { margin-bottom: 4px; }
.portal .prose .part-list .entry:last-child { border-bottom: 0; }
/* Everyday help and partners: one warm card with a colored side. */
.portal .prose .part-feature .entry { background: #fbf6f0; box-shadow: none; border-inline-start: 6px solid var(--butter); border-radius: 22px; border-start-start-radius: 6px; border-end-start-radius: 6px; }
/* Loss: quiet black and white, like its tile on the home page. */
.portal .prose .part-quiet { margin-top: 1.5em; padding: clamp(24px, 4vw, 40px); border: 1.5px solid var(--pine); border-radius: 26px; }
.portal .prose .part-quiet h2 { margin-top: 0; font-size: clamp(24px, 3vw, 32px); }
.portal .prose .part-quiet .entry { background: none; box-shadow: none; border-top: 1px solid #d8d6d4; border-radius: 0; padding: 18px 0 0; }
.portal .prose .part-quiet a { color: var(--pine); }
/* "Important to know": a closing note, plain text. */
.portal .prose .part-note h2 { font-size: 20px; margin-top: 2.2em; }
.portal .prose .part-note blockquote { background: none; padding: 0; margin: 0 0 12px; font-size: 17px; }
.portal .prose .part-note p { font-size: 16px; color: var(--ink-soft); }
/* Star numbers (*8703) keep the star in front. */
.portal a[href^="tel:*"], .portal a[href^="tel:*"] span { unicode-bidi: bidi-override; direction: ltr; }
/* A section's heading keeps its space above, except at the very top of the text. */
.portal .prose .part > h2:first-child { margin-top: 1.5em; }
.portal .prose > .part:first-child > h2:first-child { margin-top: 0; }
.portal .prose .part-quiet > h2:first-child { margin-top: 0; }

/* Between the topics and the show: less empty space, and the logo's bars as a quiet divider. */
.portal .topics { padding-bottom: clamp(36px, 4vw, 56px); }
.portal .divider { display: flex; justify-content: center; align-items: flex-start; gap: 5px; height: 30px; }
.portal .divider i { display: block; width: 7px; border-radius: 4px; }
.portal .divider i:nth-child(1) { height: 18px; margin-top: 4px; background: #ba9b84; }
.portal .divider i:nth-child(2) { height: 24px; margin-top: 6px; background: #a95a63; }
.portal .divider i:nth-child(3) { height: 21px; background: #506ea4; }
.portal .teaser { padding-top: clamp(36px, 4vw, 56px); }

/* Health-fund cards: the fund's logo stands in for its name. */
.portal .prose .part-funds .entry h3.fund-logo { margin: 0 0 12px; line-height: 0; }
.portal .prose .part-funds .entry h3.fund-logo img { height: 34px; width: auto; max-width: 70%; display: block; }

/* Community page: partners get a soft blue panel, set apart from the warm everyday-help card. */
.portal .prose .part-partner { margin-top: 1.5em; padding: clamp(22px, 4vw, 36px); background: #eef2f9; border-radius: 26px; }
.portal .prose .part-partner > h2:first-child { margin-top: 0; }
.portal .prose .part-partner .entry { background: #fff; box-shadow: none; border: 0; margin-bottom: 0; }
/* A pause before loss: the three bars, then a calm grey panel in black and white. */
.portal .prose .part-break { margin: clamp(48px, 7vw, 80px) 0 clamp(24px, 4vw, 40px); }
.portal .prose .part-break + .part-quiet { margin-top: 0; border: 0; background: #f4f3f2; }
.portal .prose .part-break + .part-quiet .entry { border-top-color: #dcdad8; }

/* Loss page: restrained black and white, as Maya asked. No blue boxes, no warm bands. */
.portal .topic-loss .prose blockquote { background: #f4f3f2; color: var(--pine); border-inline-start: 3px solid var(--pine); }
.portal .topic-loss .prose blockquote a { color: var(--pine); }
.portal .topic-loss .prose a { color: var(--pine); }
.portal .topic-loss .prose .part-quiet { border-width: 1px; }

/* Computers: the "not medical advice" note sits inside the floating menu, between the logo and the links.
   The line under the menu keeps its height (it makes room for the menu) and stays there for screen readers. */
.portal .header-note { display: none; }
@media (min-width: 1000px) {
  .portal .header-note { display: block; flex: 1; margin: 0 24px; text-align: center; font-size: 14px; color: var(--ink-soft); }
  .portal .medical-note { font-size: 0; line-height: 0; visibility: hidden; }
}