/* ============================================================
   Technion - inner content page template
   Page stylesheet. Loads after base.css and only holds what this
   page owns. Tokens, header, footer, buttons, icons, the reveal
   system and the motion policy all live in base.css and are never
   redefined here.

   This file is written as a component sheet, not as one page:
   every block below is self contained, takes any number of items
   and any length of text, and carries no rule that depends on the
   subject of this particular page. A second content page reuses
   the same classes with different copy.

   Components:
     .hero      hero with media, the whole opening copy, CTA and
                the anchor bar
     .anchors   in page navigation, same component as contact
     .vgrid     grid of icon + text advantages, auto fit
     .tabs      tab bar on the container rule, swaps .stage panels
     .cblock    content panel: text, list, CTA and one large picture
     .tgrid     grid of topic cards on the dark field, auto fit
     .info      information rows with icon discs, two columns
     .acc       FAQ accordion, same component as the brand page
     .final     closing call to action

   Traps from HANDOFF.md that govern the choices below:
     - .reveal.is-in{transform:none} swallows transform, so every
       hover response rides on a pseudo element or on a child.
     - RTL flips logical properties, so anything pinned to a screen
       edge uses physical left / right.
     - No transform may land on .anchors__list or an ancestor, it
       silently disables backdrop-filter.
   ============================================================ */

/* several components set display, so [hidden] has to win */
[hidden]{ display:none !important; }

/* ============================================================
   ICON ACCENTS
   The faculty page colours a content mark in one of two brand
   accents and alternates them across a row. Both are the brand
   guide's own values, as published on the brand page: turquoise
   is the secondary #32B1CA, and the gold is the token the rest of
   this project already uses. base.css has no turquoise token yet,
   so it is written out here; if a second page needs it, it belongs
   in _template/base.css and a sync, see HANDOFF.md.
   ============================================================ */
.ico--a{ color:#32B1CA; }
.ico--b{ color:var(--gold); }

/* ============================================================
   PAGE SHELL
   No floating contact rail on this page, so the room base.css
   reserves for the mobile dock is given back and the
   accessibility widget returns to the screen edge.
   ============================================================ */
@media (max-width:1024px){
  body{ padding-bottom:0; }
}
@media (max-width:767px){
  .a11y{ bottom:var(--s4); }
}

/* the labelled placeholder frame, shown when a file is not there yet */
.is-missing .ph{ display:flex; }


/* ============================================================
   SECTION SURFACES
   Light and pale alternate down the page, the two dark fields
   carry the visual break and the closing action. One rule per
   section, nothing else changes between them.
   ============================================================ */
.sec--why{ padding-block:104px; background:var(--pale); }
.sec--tabs{ padding-block:104px; background:var(--white); }
.sec--tracks{ padding-block:104px 112px; }
.sec--admission{ padding-block:104px; background:var(--white); }
.sec--faq{ padding-block:104px; background:var(--pale); }
.sec--final{ padding-block:72px 80px; }

.dark{ position:relative; background:var(--navy); isolation:isolate; }

/* every anchor destination stops below the floating header rather
   than behind it. The bar measures this again in script.js, this is
   the no JS floor. */
#why,#programs,#tracks,#admission,#faq,#closing{
  scroll-margin-top:calc(var(--hdr-top) + var(--hdr-h) + var(--s4));
}


/* ============================================================
   SHARED TEXT BLOCKS
   The three text levels a content section uses, so a new section
   never invents a size of its own.
   ============================================================ */
.sec__lead{
  max-width:760px;
  margin-top:calc(var(--s5) * -1 + 4px);
  margin-bottom:var(--s7);
  font-size:20px; line-height:1.65; color:var(--body);
}
.sec__lead--light{ color:var(--on-navy-2); }

/* the line that introduces a list or a grid */
.kicker{
  margin-bottom:var(--s5);
  font-size:18px; font-weight:600; color:var(--navy);
}
.kicker--light{ color:var(--white); }

/* a closing remark under a grid, in the navy of the running text */
.sec__note{
  margin-top:var(--s6);
  max-width:820px;
  font-size:18px; line-height:1.7; color:var(--body);
}

/* Section level action. A max-content box with auto margin on the
   physical right pushes it to the left edge of the strip, which is the
   end of the line in RTL. Same construction as the card action on the
   contact page. */
.sec__cta{
  display:flex; width:max-content;
  margin-top:var(--s6);
}
/* base.css drops a shadow under a navy pill on hover. Every navy pill
   on this page is an action sitting on a plain surface with nothing to
   lift off, so the colour change carries the response on its own. This
   covers the CTA of a content panel and the CTA of a section alike. */
.btn--navy:hover{ box-shadow:none; }

/* gold dot list, the same list the brand page uses */
.bul{ display:grid; gap:var(--s3); margin-top:var(--s4); max-width:820px; }
.bul li{
  position:relative; padding-right:var(--s5);
  font-size:18px; line-height:1.65; color:var(--body);
}
.bul li::before{
  content:''; position:absolute; right:0; top:12px;
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
}


/* ============================================================
   HERO
   Built to the hero of the live faculty page, measured off it:

     height      min 500, content driven (583 there at 1440)
     media       the physical left half of the band, not full bleed
     gradient    to left, navy solid to 50%, clear at the far edge
     title       44 / 50.6, white
     divider     64 x 4 in #D59F0F, 18 above and below
     description 17 / 27.2, white
     button      16, navy on white, 14 x 30, 26 above it
     crumbs      14.5 / 23.2 at white 85%, 16 under it

   Two values are deliberately not copied. The title and the button
   are 600 and not the 700 used there: this project loads 300, 400,
   500 and 600 of Noto Sans Hebrew, so 700 would be synthesised by
   the browser rather than drawn. And the copy sits in the ordinary
   .wrap, so its reading edge lines up with every section below it
   instead of running to the edge of the screen.
   ============================================================ */
.hero{
  position:relative;
  min-height:500px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:center;
  padding-top:calc(var(--hdr-top) + var(--hdr-h));
  padding-bottom:0;
  background:var(--navy);
}
/* the picture takes the physical left half of the band */
.hero__media{
  position:absolute; z-index:0;
  left:0; top:0; bottom:0; width:50%;
  overflow:hidden;
  background:var(--navy);
}
.hero__layer{
  position:absolute; left:0; right:0; top:-3%; bottom:-3%;
  display:block; overflow:hidden;
  will-change:transform;
}
.hero__media > .hero__layer > img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.07);
}
.hero__media.is-missing .hero__layer > img{ display:none; }
.hero__media.is-missing .hero__layer{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 14px, transparent 14px 28px);
}

/* solid navy across the reading half, clearing off to the far edge */
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to left, var(--navy) 50%, rgba(0,33,71,0) 100%);
}
.hero--noimg .hero__veil{ opacity:.25; }
.hero__media .ph{ inset:var(--s3) var(--s3) auto; padding-block:var(--s5); }

.hero__inner{
  position:relative; z-index:2;
  padding-block:50px;
}
.hero__title{
  max-width:720px;
  color:var(--white);
  font-size:44px; font-weight:600; line-height:1.15;
  letter-spacing:normal; margin:0;
}
/* the divider of the faculty hero, at the same size and the same gold */
.hero__rule{
  display:block;
  width:64px; height:4px;
  margin:18px 0;
  background:#D59F0F;
}
.hero__lede{
  margin-top:var(--s2);
  max-width:720px;
  color:var(--white);
  font-size:17px; font-weight:600; line-height:1.6;
}
.hero__p{
  margin-top:0;
  max-width:720px;
  color:var(--white);
  font-size:17px; font-weight:400; line-height:1.6;
}
.hero__cta{ margin-top:26px; }
.hero__btn{ padding:14px 30px; font-size:16px; gap:8px; }

/* entrance choreography, unchanged */
.hero__media{ clip-path:inset(0 0 100% 0); }
.hero__title,.hero__lede,.hero__p{ opacity:0; transform:translateY(26px); }
.is-ready .hero__p{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) .95s, transform .7s var(--ease) .95s;
}
.is-ready .hero__media > .hero__layer > img{
  transform:scale(1);
  transition:transform 1.8s var(--ease) .1s;
}
.hero__cta{ opacity:0; transform:translateY(26px); }
.is-ready .hero__cta{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) 1.2s, transform .7s var(--ease) 1.2s;
}


/* ============================================================
   BREADCRUMBS
   Same shape, separator and size as the faculty page: the trail
   sits above the title inside the hero, the links are white at
   85% and the current page is solid white.
   ============================================================ */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px;
  margin-bottom:16px;
  font-size:14.5px; line-height:1.6;
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 14px rgba(0,20,45,.5);
}
.crumbs a{
  color:rgba(255,255,255,.85);
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:100% 100%;
  background-size:0 1px;
  transition:color var(--t-fast), background-size var(--t-mid);
}
.crumbs a:hover{ color:var(--white); background-size:100% 1px; }
.crumbs__sep{ color:rgba(255,255,255,.55); }
.crumbs__here{ color:var(--white); }


/* ============================================================
   ANCHOR BAR
   Secondary navigation, so it reads clearly without competing
   with the H1: one translucent rail rather than a row of buttons,
   pill radius like every other interactive element on the site.
   ============================================================ */
/* No margin on this element. It sits in the second grid row and any
   margin here lands outside the row the copy centres in, which throws
   the balance above and below the copy out by exactly that amount. */
.anchors{
  position:relative; z-index:2;
  align-self:end;
  min-width:0;
}
/* The rail is width:max-content, so with a handful of items it is
   exactly as wide as they are and reads as one clean row. It is also
   capped at the container and set to scroll, so a page that carries
   more anchors, or longer labels, keeps that single row and scrolls
   sideways instead of breaking onto a second line. Nothing about the
   look changes while the items fit, and no breakpoint decides it. */
.anchors__list{
  display:flex; flex-wrap:nowrap;
  gap:5px;
  padding:7px;
  border-radius:var(--r-pill);
  width:max-content; max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  background:rgba(255,255,255,.10);
  /* no transform may ever land here or on an ancestor,
     it silently disables the blur */
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 10px 30px -12px rgba(0,20,45,.5);
}
.anchors__list::-webkit-scrollbar{ display:none; }
.anchors__item{
  display:block;
  /* centre, not start: script.js centres the current item, and a start
     aligned snap point drags it straight back to the edge of the track,
     so the two pull against each other */
  scroll-snap-align:center;
  padding:15px 28px;
  border-radius:var(--r-pill);
  color:var(--white);
  font-size:18px; font-weight:500; line-height:1.2;
  white-space:nowrap;
  transition:background-color var(--t-mid), color var(--t-mid);
}
.anchors__item:hover{ background:var(--white); color:var(--navy); }
/* The section the reader is in. Held apart from hover on purpose:
   hover is a solid white face, current is a lit panel, so the two
   never read as the same thing. */
.anchors__item[aria-current]{
  background:rgba(255,255,255,.24);
  font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.anchors__item[aria-current]:hover{
  background:var(--white); color:var(--navy);
  box-shadow:none;
}
.anchors__item:focus-visible{ outline:3px solid var(--white); outline-offset:2px; }


/* ============================================================
   SCROLL CUE
   The circle holds still, only the chevron loops.
   ============================================================ */
.scroller{
  position:absolute; z-index:3;
  left:50%; bottom:0; transform:translate(-50%, 50%);
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:var(--white); color:var(--navy);
  box-shadow:var(--sh-disc);
  transition:background-color var(--t-fast), box-shadow var(--t-mid), transform var(--t-mid);
}
.scroller:hover{
  background:var(--sky);
  box-shadow:var(--sh-disc-up);
  transform:translate(-50%, calc(50% - 2px));
}
.scroller:focus-visible{ outline:3px solid var(--white); outline-offset:3px; }
/* one opacity throughout, first and last frame identical, so the
   loop has no seam and nothing fades */
.scroller__ico{ width:22px; height:22px; animation:cue 1.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes cue{
  0%,100% { transform:translateY(-4px); }
  50%     { transform:translateY(5px); }
}


/* ============================================================
   ADVANTAGE GRID
   Auto fit, so three, four, five or nine items lay themselves out
   with no CSS change. Every tile in a row shares one height, one
   alignment and one padding.
   ============================================================ */
.vgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:var(--s5);
}
.vcard{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:auto 1fr;
  align-items:start; gap:var(--s3);
  height:100%;
  padding:var(--s4);
  border-radius:var(--r-card);
  background:var(--sky);
}
/* The tile does not respond to the pointer. It is not a link and it
   leads nowhere, so nothing here promises otherwise. */
.vcard > *{ position:relative; z-index:1; }

/* The mark stands on its own the way it does on the faculty page:
   no disc behind it, drawn at 40 rather than 26 so it reads as the
   subject of the tile and not as a bullet. */
.vcard__disc{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
}
.vcard__disc .ico{ width:40px; height:40px; }
.vcard__txt{ font-size:18px; line-height:1.55; color:var(--body); }

/* the mark arrives with its own tile, a beat after it */
.vcard.reveal .vcard__disc{ opacity:0; transform:scale(.82); }
.vcard.reveal.is-in .vcard__disc{
  opacity:1; transform:scale(1);
  transition:opacity .45s var(--ease) .12s, transform .5s var(--ease) .12s;
}


/* ============================================================
   TABS
   A tab bar and not a pair of buttons: the labels sit on a rule
   that runs the width of the container and the live one is marked
   by the gold bar the section heads already use, so which panel is
   open is legible at a glance. Two tabs here, and a third is one
   more button.
   ============================================================ */
.tabs{
  display:flex; flex-wrap:wrap;
  gap:0 var(--s7);
  margin-bottom:var(--s7);
  border-bottom:1px solid var(--line);
}
.tabs__btn{
  position:relative;
  /* 53px tall, clear of the 44 minimum for a touch target */
  padding:var(--s1) 0 var(--s3);
  margin-bottom:-1px;              /* the bar sits on the rule, not under it */
  font-size:22px; font-weight:500; line-height:1.3;
  color:var(--blue-mid);
  white-space:nowrap;
  transition:color var(--t-mid);
}
.tabs__btn::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease);
}
.tabs__btn:hover{ color:var(--navy); }
.tabs__btn:focus-visible{ outline:3px solid var(--blue); outline-offset:4px; }
.tabs__btn[aria-selected="true"]{ color:var(--navy); font-weight:600; }
.tabs__btn[aria-selected="true"]::after{ transform:scaleX(1); }

/* The panel swaps rather than jumps. It rides on `translate` and not on
   `transform`: the blocks inside it carry .reveal, and keeping the two
   properties apart means they can never fight over the same value. */
.stage{ opacity:0; translate:0 12px; }
.stage.is-live{
  opacity:1; translate:0 0;
  transition:opacity .42s var(--ease), translate .5s var(--ease);
}


/* ============================================================
   CONTENT SECTION
   One fixed structure for every panel: text on the reading side,
   one large picture in a container of its own on the other. The
   page never mirrors it, and the picture, the list and the CTA are
   each optional.

   The picture takes half the container and stretches to the height
   of the text beside it, with a floor of its own so it stays large
   even under a short panel. It is cropped, never stretched, and it
   keeps the radius and the shadow language of every other surface
   on the site rather than bleeding to the edge of the screen.
   ============================================================ */
/* The picture takes a little under half, and the space it gives up
   goes into the gap rather than into the text, so it sits clearly
   apart from the copy instead of running up against it. */
.cblock{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:72px;
  align-items:start;
}
/* With no picture the block is a single column rather than a column and
   an empty gap. .cblock--full does the same for engines without :has(),
   so a template can also state it outright. */
.cblock:not(:has(.cblock__media)),
.cblock--full{ grid-template-columns:minmax(0,1fr); }
.cblock:not(:has(.cblock__media)) .cblock__body,
.cblock--full .cblock__body{ max-width:820px; }

/* the tab bar carries the gold of this section, so the panel heading
   takes the section title size without a second rule under it */
.cblock__title{
  font-size:48px; font-weight:400; line-height:1.05;
  color:var(--navy);
  margin-bottom:var(--s5);
}
/* A break placed by hand in a display heading, the same device the
   brand page uses on its own H1 with .hero__title2. It is a span and
   not a <br>, so the copy stays one string and a template can drop the
   span without touching anything else. Wide screens only: below 1024
   the heading is narrower and the break the browser finds is the
   better one, so the span goes back to being part of the line. */
.cblock__title2{ display:block; }

.cblock__p{ font-size:18px; line-height:1.7; color:var(--body); }
.cblock__p + .cblock__p{ margin-top:var(--s4); }
.cblock__p + .kicker{ margin-top:var(--s6); }
/* the line that closes a panel, after its list */
.cblock__p--close{ margin-top:var(--s5); }
/* every action on the page starts on the reading edge, like the
   copy above it */
.cblock__cta{
  display:flex; width:max-content;
  margin-top:var(--s6);
}

/* A fixed landscape frame rather than a column that stretches to the
   text beside it. Stretching gave every panel a different picture
   height, 600px under the shorter one and 758 under the longer, and
   the tall one read as a strip rather than as a picture. The ratio is
   the frame now, so a panel of any length gets exactly the same
   picture, and swapping the copy in a template cannot change it. */
.cblock__media{
  position:relative; overflow:hidden; isolation:isolate;
  margin:0;
  aspect-ratio:4 / 3;
  border-radius:var(--r-card);
  background:var(--navy-deep);
  box-shadow:0 28px 64px -18px rgba(0,33,71,.22),
             0 6px 18px -8px rgba(0,33,71,.12);
}
.cblock__img{
  position:absolute; inset:0; z-index:0;
  display:block; overflow:hidden;
  border-radius:inherit;
}
.cblock__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.cblock__media:hover .cblock__img img{ transform:scale(1.04); }
.cblock__media.is-missing .cblock__img img{ display:none; }
.cblock__media.is-missing .cblock__img{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 14px, transparent 14px 28px);
}
.cblock__media .ph{ z-index:2; inset:var(--s3) var(--s3) auto; padding-block:var(--s4); }


/* ============================================================
   LINE ARTWORK
   The decorative artwork of the site, bounded by its own section
   and clipped by it. Same asset and same build as the contact
   page, see script.js and site.js.
   ============================================================ */
.sec--tracks{ position:relative; overflow:hidden; }
.sec--tracks > .wrap{ position:relative; z-index:1; }
.lines{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.lines .lines__svg{
  position:absolute;
  left:6%; top:50%;
  width:88%;
  transform:translateY(-50%);
  will-change:transform;
  height:auto; display:block;
  opacity:.8;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* The source artwork is built from filled arcs, not strokes, so it
   cannot be dashed as it stands. Each path also carries a stroke that
   traces itself, and the stroke then fades while the fill settles in,
   so the finished state is the artwork's own look. pathLength="1" on
   every path normalises the arcs so one duration fits them all. */
.lines .lines__svg path{
  fill-opacity:0;
  stroke:#FFFFFF;
  stroke-opacity:0;
  stroke-width:1.4;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.lines.is-drawn .lines__svg path{
  animation:drawLine 7s cubic-bezier(.22,.61,.36,1) var(--d, 0s) infinite;
}
.lines.is-idle .lines__svg path{ animation-play-state:paused; }
@keyframes drawLine{
  0%   { stroke-dashoffset:1; stroke-opacity:0;   fill-opacity:0; }
  3%   { stroke-dashoffset:1; stroke-opacity:.52; fill-opacity:0; }
  40%  { stroke-dashoffset:0; stroke-opacity:.52; fill-opacity:.06; }
  50%  { stroke-dashoffset:0; stroke-opacity:0;   fill-opacity:.15; }
  80%  { stroke-dashoffset:0; stroke-opacity:0;   fill-opacity:.15; }
  93%  { stroke-dashoffset:0; stroke-opacity:0;   fill-opacity:0; }
  94%  { stroke-dashoffset:1; stroke-opacity:0;   fill-opacity:0; }
  100% { stroke-dashoffset:1; stroke-opacity:0;   fill-opacity:0; }
}
.lines.is-static .lines__svg path{
  fill-opacity:.15; stroke-opacity:0; stroke-dashoffset:0; animation:none;
}


/* ============================================================
   TOPIC GRID
   The same auto fit grid as the advantages, on the dark field and
   with the card treatment that belongs to a navy surface, so the
   two grids never read as the same component twice.
   ============================================================ */
.tgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:var(--s5);
}
/* Bare mark and label, no container and no ring around the mark.
   The section's own field carries the grouping, and the row reads as
   one line of content rather than as a box inside a box. */
.tcard{
  display:grid; grid-template-columns:auto 1fr;
  align-items:center; gap:var(--s3);
}
/* white on the navy field; the two accents belong to the light sections */
.tcard__ico{ width:40px; height:40px; flex:none; color:var(--white); }
.tcard__title{ color:var(--white); font-size:22px; font-weight:600; line-height:1.2; }

/* the mark arrives with its own row, a beat after it */
.tcard.reveal .tcard__ico{ opacity:0; transform:scale(.82); }
.tcard.reveal.is-in .tcard__ico{
  opacity:1; transform:scale(1);
  transition:opacity .45s var(--ease) .12s, transform .5s var(--ease) .12s;
}


/* ============================================================
   INFORMATION LIST
   A plain checklist, the way the faculty page sets one: a turquoise
   check on the reading edge and the line beside it. No marks in
   discs, no rule under every row.
   ============================================================ */
/* Two columns that sit on the tracks of the three column card grid
   higher up the page: the list spans two of those three columns with
   the same 24px gutter, so each check column is exactly one card wide
   and starts where a card starts. The items are short, so this keeps
   the pair close without taking them off the grid. */
.info{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:var(--s5);
  row-gap:var(--s3);
  max-width:calc((100% - 2 * var(--s5)) / 3 * 2 + var(--s5));
}
.info__row{
  display:grid; grid-template-columns:auto 1fr;
  align-items:start; gap:var(--s3);
}
.info__check{
  width:22px; height:22px; flex:none;
  margin-top:3px;
  color:#32B1CA;
}
.info__title{ font-size:18px; line-height:1.65; color:var(--body); }


/* ============================================================
   FAQ ACCORDION
   Built on the accordion of the live faculty page: row padding
   18 and 4, one pale blue hairline under each row.
   The two type sizes are a step up from the 17 and 15 measured
   there: the question takes the 20 of the running lead and the
   answer the 18 of the body, and both step down once on a phone.
   The line heights, 1.5 and 1.6, are the ones measured there and
   hold at every size.

   The mechanics stay ours: the row grows through a grid row size
   and not a height, so nothing is measured and an answer of any
   length behaves. The hover fill and the turning chevron are the
   accordion of the brand page and are left as they are.
   ============================================================ */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__h{ margin:0; font-size:inherit; font-weight:inherit; color:inherit; }
.acc__btn{
  position:relative;
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:var(--s5);
  width:100%; text-align:right;
  padding:18px 4px;
  color:var(--navy);
  transition:padding var(--t-mid);
}
.acc__btn::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--sky);
  transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease);
  border-radius:var(--r-in);
}
.acc__btn > *{ position:relative; z-index:1; }
.acc__btn:hover::before{ transform:scaleX(1); }
.acc__btn:hover{ padding-right:var(--s2); }

.acc__name{ font-size:20px; font-weight:600; line-height:1.5; }
.acc__chev{ color:var(--navy); transition:transform var(--t-mid); }
.acc__btn[aria-expanded="true"] .acc__chev{ transform:rotate(180deg); }

.acc__wrap{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease);
}
.acc__item.is-open .acc__wrap{ grid-template-rows:1fr; }
.acc__body{ min-height:0; overflow:hidden; padding-inline:4px; }
.acc__body > *{
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .45s var(--ease);
}
.acc__item.is-open .acc__body > *{ opacity:1; transform:none; transition-delay:.18s; }
.acc__item.is-open .acc__body{ padding-bottom:20px; }
.acc__p{ max-width:820px; font-size:18px; line-height:1.6; color:var(--body); }


/* ============================================================
   CLOSING CALL TO ACTION
   The end of the page rather than a button on its own: a gold
   hairline opens it, the same rule the section heads carry.
   ============================================================ */
/* the closing strip carries a picture of its own, under a darkening
   built the same way as the hero veil */
.sec--final{ position:relative; overflow:hidden; isolation:isolate; }
.final__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.final__layer{
  position:absolute; left:0; right:0; top:-6%; bottom:-6%;
  display:block; overflow:hidden;
  will-change:transform;
}
.final__layer img{ width:100%; height:100%; object-fit:cover; }
.final__media.is-missing .final__layer img{ display:none; }
.final__media.is-missing .final__layer{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 14px, transparent 14px 28px);
}
.final__media .ph{ z-index:2; inset:var(--s3) var(--s3) auto; padding-block:var(--s4); }
/* While the file is missing the labelled frame sits at the top of the
   strip, which is where the heading is. The block steps down for it,
   and steps back the moment the picture arrives. Sibling selector on
   the class site.js sets, so nothing needs :has() here. */
.final__media.is-missing ~ .wrap .final{ margin-top:104px; }
.final__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to left,
      rgba(0,20,45,.92) 0%,
      rgba(0,20,45,.84) 42%,
      rgba(0,20,45,.62) 72%,
      rgba(0,20,45,.44) 100%),
    linear-gradient(rgba(0,20,45,.24), rgba(0,20,45,.24));
}
.sec--final > .wrap{ position:relative; z-index:2; }

.final{ position:relative; max-width:820px; }
/* the same hairline the section heads carry. It is a real element and
   not a pseudo, so the shared reveal system draws it: .reveal--line in
   base.css already holds the collapsed state and the origin. */
.final__rule{
  display:block; height:1px;
  background:var(--gold);
  margin-bottom:var(--s6);
}
.final__title{
  color:var(--white);
  font-size:48px; font-weight:400; line-height:1.1;
  letter-spacing:-.01em;
}
.final__p{
  margin-top:var(--s4);
  color:var(--on-navy-2);
  font-size:20px; line-height:1.7;
}
.final__cta{
  display:flex; width:max-content;
  margin-top:var(--s6);
}
/* White face, navy label. That is .btn--ivory as base.css declares it,
   and the size is the hero button of the brand page. */
.final__btn{ padding:16px 30px; font-size:17px; }


/* ============================================================
   HIGH CONTRAST
   base.css covers the shell. These are the blocks this page owns.
   ============================================================ */
body.hc .sec--why,body.hc .sec--tabs,body.hc .sec--admission,
body.hc .sec--faq,body.hc .hero,body.hc .hero__media,
body.hc .cblock__media,body.hc .final__media,body.hc .final__veil{ background:#000; }
body.hc .hero__media img,body.hc .cblock__media img,
body.hc .final__media img,body.hc .lines{ display:none; }
body.hc .vcard,body.hc .tcard{ background:#000; border:1px solid #fff; }
body.hc .cblock__media{ border:1px solid #fff; }
body.hc .final__btn{ background:#fff; color:#000; }
body.hc .tabs__btn{ background:#000; color:#fff; border-color:#fff; }
body.hc .tabs__btn[aria-selected="true"]{ background:#fff; color:#000; }
body.hc .vcard::before,body.hc .tcard::before,body.hc .acc__btn::before{ display:none; }
body.hc .vcard__disc .ico,body.hc .tcard__ico,body.hc .info__check{ color:#fff; }
body.hc .sec__lead,body.hc .sec__note,
body.hc .kicker,body.hc .cblock__p,body.hc .cblock__title,body.hc .bul li,body.hc .acc__p,
body.hc .vcard__txt,body.hc .tcard__title,body.hc .info__title,
body.hc .acc__name,body.hc .final__p,body.hc .hero__p{ color:#fff; }
body.hc .bul li::before,body.hc .final__rule{ background:#fff; }
body.hc .acc,body.hc .acc__item{ border-color:#fff; }


/* ============================================================
   MOTION OFF, opt in through ?motion=off
   base.css owns the shell. These are this page's own elements.
   ============================================================ */
body.motion-off .hero__cta,
body.motion-off .hero__p{ opacity:1 !important; transform:none !important; transition:none !important; }
body.motion-off .hero__media > .hero__layer > img,
body.motion-off .final__layer,
body.motion-off .cblock__img img{ transform:none !important; transition:none !important; }
body.motion-off .stage{ opacity:1 !important; translate:none !important; transition:none !important; }
body.motion-off .vcard__disc,
body.motion-off .tcard__ico{ opacity:1 !important; transform:none !important; transition:none !important; }
body.motion-off .acc__wrap,
body.motion-off .acc__body > *{ transition:none !important; }
body.motion-off .anchors__list{ scroll-behavior:auto; }


/* ============================================================
   REDUCED MOTION
   Same policy as the rest of the site, see HANDOFF.md: the
   entrances stay and are only shortened, and the two genuinely
   vestibular effects go. base.css replaces the whole transition
   list of .reveal.is-in inside its own reduced motion block, so
   any element that also needs a second transition has to declare
   it here as well or it snaps.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  body:not(.motion-forced) .hero__media > .hero__layer > img{
    transform:none; transition:none;
  }
  body:not(.motion-forced) .vcard.reveal.is-in{
    transition:opacity .6s var(--ease), transform .6s var(--ease),
               translate var(--t-mid), box-shadow var(--t-mid);
  }
  body:not(.motion-forced) .vcard.reveal.is-in .vcard__disc,
  body:not(.motion-forced) .tcard.reveal.is-in .tcard__ico{
    transition:opacity .4s var(--ease) .08s, transform .4s var(--ease) .08s;
  }
}


/* ============================================================
   TABLET  768 - 1024
   ============================================================ */
@media (max-width:1024px){

  /* Below the split the picture fills the band and the gradient runs
     bottom to top, which is the second state the faculty hero has. */
  .hero{ min-height:0; padding-top:calc(var(--hdr-top) + var(--hdr-h)); }
  .hero__media{ width:auto; right:0; }
  .hero__veil{
    background:linear-gradient(to top, var(--navy) 30%, rgba(0,33,71,.55) 100%);
  }
  .hero__inner{ padding-block:var(--s7); }
  .hero__title{ font-size:40px; }

  /* 13 and not the 12 of the contact page: 12 lands the item on 43px,
     a hair under the 44 minimum, and a tablet is a touch screen */
  .anchors__item{ padding:13px 20px; font-size:16px; }

  .sec--why{ padding-block:80px; }
  .sec--tabs{ padding-block:80px; }
  .sec--tracks{ padding-block:80px 88px; }
  .sec--admission{ padding-block:80px; }
  .sec--faq{ padding-block:80px; }
  .sec--final{ padding-block:64px 72px; }
  .final__media.is-missing ~ .wrap .final{ margin-top:132px; }

  .sec__lead{ font-size:18px; margin-bottom:var(--s6); }
  .final__p,.cblock__p{ font-size:18px; }

  /* The block stacks and the picture leads, so a heading is never
     followed by a wall of text. Every panel stacks the same way, the
     page never alternates. */
  .cblock{ grid-template-columns:minmax(0,1fr); gap:var(--s6); }
  .cblock__media{ order:-1; min-height:0; aspect-ratio:16 / 10; }
  .cblock__body{ max-width:820px; }
  .cblock__title{ font-size:36px; }
  /* the heading fits on one line at this width, so the hand placed
     break goes away and the span rejoins the line */
  .cblock__title2{ display:inline; }

  .tabs{ gap:0 var(--s6); margin-bottom:var(--s6); }
  .tabs__btn{ font-size:20px; }

  /* the card grid is two columns here, so the list takes both of its tracks */
  .info{ max-width:none; }
  .tcard__title{ font-size:20px; }

  .final__title{ font-size:36px; }
  .lines .lines__svg{ width:112%; left:-6%; }
}


/* ============================================================
   MOBILE  <= 767
   ============================================================ */
@media (max-width:767px){

  .hero{ padding-top:calc(var(--hdr-top) + var(--hdr-h) + var(--s2)); }
  /* Extra room under the copy. The scroll cue straddles the bottom edge
     of the band, so with an even padding it lands almost on the button.
     The deeper foot puts real air between the two. */
  .hero__inner{ padding-block:var(--s6) 56px; }
  /* the faculty hero drops its title to 34 on a phone */
  .hero__title{ font-size:34px; }
  /* Headings breathe on a phone: the line heights of the wide screen
     sit the lines of a Hebrew heading almost on top of each other.
     Page level, base.css is untouched. */
  .sec__title,.cblock__title{ line-height:1.2; }
  .final__title{ line-height:1.2; }
  .hero__media .ph{ padding-block:var(--s3); gap:2px; }
  .final__btn{ width:100%; justify-content:center; }

  /* The bar scrolls sideways rather than wrap or shrink. It breaks out
     of .wrap so the track runs edge to edge and the gutter comes back
     as padding inside it, which keeps the first item aligned with the
     copy above and lets the last one run off the screen instead of
     stopping short of it. */
  .anchors > .wrap{ padding-inline:0; }
  .anchors__list{
    width:auto; max-width:none;
    padding:7px var(--gutter);
    border-radius:0;
    border-inline:0;
    border-top:1px solid rgba(255,255,255,.22);
    border-bottom:1px solid rgba(255,255,255,.22);
    box-shadow:none;
  }
  .anchors__item{
    /* 46px tall, above the 44 minimum, and the text is never compressed */
    padding:13px 18px;
    font-size:16px;
  }

  .sec--why{ padding-block:56px; }
  .sec--tabs{ padding-block:56px; }
  .sec--tracks{ padding-block:56px 64px; }
  .sec--admission{ padding-block:56px; }
  .sec--faq{ padding-block:56px; }
  .sec--final{ padding-block:48px 56px; }
  .final__media.is-missing ~ .wrap .final{ margin-top:140px; }

  .sec__lead{ font-size:16px; line-height:1.6; margin-bottom:var(--s5); }
  .cblock__p,.final__p,
  .bul li,.vcard__txt,.sec__note{ font-size:16px; }
  /* the accordion steps down once on a phone */
  .acc__name{ font-size:18px; }
  .acc__p{ font-size:16px; }
  .kicker{ font-size:17px; margin-bottom:var(--s4); }

  .vgrid,.tgrid{ gap:var(--s3); }
  .vcard{ padding:var(--s4); gap:var(--s3); align-items:center; }
  .vcard__disc,.vcard__disc .ico,.tcard__ico{ width:34px; height:34px; }

  .cblock__media{ aspect-ratio:4 / 3; }
  .cblock__cta{ margin-top:var(--s5); }
  .cblock__p + .kicker{ margin-top:var(--s5); }
  .cblock__title{ font-size:30px; margin-bottom:var(--s4); }
  /* the break comes back on a phone: without it the heading wraps to
     "...בלב לימודי" and leaves one word stranded on the second line */
  .cblock__title2{ display:block; }
  .tabs{ gap:0 var(--s5); margin-bottom:var(--s5); }
  .tabs__btn{ font-size:18px; padding-bottom:var(--s2); }

  /* the section is nearly square here, so the artwork needs a much
     wider crop to clear the fade band of its own mask */
  .lines .lines__svg{ width:150%; left:-25%; opacity:.56; }

  .info{ grid-template-columns:minmax(0,1fr); }
  .tcard__title{ font-size:20px; line-height:1.25; }


  .final__title{ font-size:30px; }
  .final__cta{ margin-top:var(--s5); }
  .sec__cta{ margin-top:var(--s5); }
  .sec__note{ margin-top:var(--s5); }
}