@charset "UTF-8";
/* Phone layer (2.7.2). templates/layout.php loads this file with
     media="(max-width:680px),(max-width:1000px) and (max-height:500px) and (pointer:coarse)"
   - phones upright, and phones held sideways - so nothing here reaches tablets or desktops. It is loaded after the
   other stylesheets and only adds or overrides. Motion follows the site setting (html.a11y-reduced-motion) and the
   system preference; both already switch every animation and transition off (site.css, preferences.css), and the
   scripts never wait for an animation that cannot run. */

:root{--menu-ease:cubic-bezier(.22,.61,.36,1);--menu-ease-out:cubic-bezier(.4,0,.75,.35);--menu-in:280ms;--menu-out:240ms}

/* ---------- compact header: brand, language picker and menu on one row --------------------------------------- */
/* system.css placed the utilities (languages and the reading-tools shortcut) on a second row under the brand; the
   header now keeps one row: the brand, the language picker, the menu. The reading tools stay one tap away on the
   floating button; search stays in the menu. */
.header-inner{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-height:60px;padding-block:6px}
.header-inner>.brand{flex:1 1 auto;min-width:0;margin-inline-end:4px}
.header-utilities{flex:none;margin:0;margin-inline-start:auto;gap:0}
.header-utilities>.preferences-shortcut,.header-utilities>.search-link,.header-utilities>.languages{display:none}
.mobile-menu{flex:none}
/* the open panels never run past the bottom of the screen: they hang from the sticky header, so on a short screen
   (sideways, or with a larger text size) the menu's last links could not be reached; they scroll inside instead
   (found in the 2.7.2 sweep) */
.mobile-menu nav,.language-picker-list{max-height:calc(100vh - var(--header-block,61px) - 12px);max-height:calc(100dvh - var(--header-block,61px) - 12px);overflow-y:auto;overscroll-behavior:contain}
.brand-name{white-space:nowrap}
.brand-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the Russian name is the longest: a smaller name and no tagline keep the row single */
html:lang(ru) .brand-name{font-size:calc(var(--display-scale)*1.45rem)}
html:lang(ru) .brand-tag{display:none}
@media(max-width:370px){html:lang(ru) .brand-name{font-size:calc(var(--display-scale)*1.2rem)}html:lang(he) .brand-name,html:lang(en) .brand-name{font-size:calc(var(--display-scale)*1.6rem)}}

/* ---------- language picker: the active language, the three on a tap -------------------------------------------- */
.language-picker{display:block;position:relative;flex:none}
.language-picker>summary{list-style:none;display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:0 9px;border-radius:999px;font-family:var(--font-ui);font-weight:var(--ui-weight);letter-spacing:var(--ui-tracking);font-size:calc(var(--ui-scale)*.82rem);line-height:1.2;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.language-picker>summary::-webkit-details-marker{display:none}
.language-picker>summary:hover,.language-picker[open]>summary{color:var(--primary)}
.language-picker>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.language-picker-chevron{width:15px;height:15px;flex:none;transition:transform var(--menu-in) var(--menu-ease)}
.language-picker[open]:not(.is-closing) .language-picker-chevron{transform:rotate(180deg)}
.language-picker-list{list-style:none;margin:0;padding:6px;position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:-6px;min-width:176px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:0 18px 34px -14px rgba(63,39,22,.4);z-index:45}
.language-picker-list a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;padding:0 14px;border-radius:var(--radius-s);font-family:var(--font-ui);font-size:1rem;color:var(--ink)}
.language-picker-list a:hover,.language-picker-list a:focus-visible{background:var(--surface-2)}
.language-picker-list a[aria-current]{color:var(--primary-hover);font-weight:600}
.language-picker-check{width:18px;height:18px;flex:none}

/* ---------- opening and closing: the menu and the language picker ----------------------------------------------- */
/* Opening: the panel drops in by a few pixels while it fades in. Closing: site.js keeps the details open while the
   panel leaves (is-closing, the panel inert and click-through), then removes [open]. */
@keyframes atiqot-menu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes atiqot-menu-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
.mobile-menu[open]>nav,.language-picker[open]>.language-picker-list{animation:atiqot-menu-in var(--menu-in) var(--menu-ease) both}
.mobile-menu.is-closing>nav,.language-picker.is-closing>.language-picker-list{animation:atiqot-menu-out var(--menu-out) var(--menu-ease-out) both;pointer-events:none}
/* the button says what it does: three lines while closed, a cross while open (cross-faded with the panel) */
.mobile-menu summary{position:relative;-webkit-tap-highlight-color:transparent}
.mobile-menu summary .menu-icon-close{display:block;position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:0;transform:rotate(-45deg)}
.mobile-menu summary .menu-icon-open,.mobile-menu summary .menu-icon-close{transition:opacity var(--menu-in) var(--menu-ease),transform var(--menu-in) var(--menu-ease)}
.mobile-menu[open]:not(.is-closing) summary .menu-icon-open{opacity:0;transform:rotate(45deg)}
.mobile-menu[open]:not(.is-closing) summary .menu-icon-close{opacity:1;transform:none}

/* ---------- anchors and sticky bars under the compact header --------------------------------------------------- */
/* site.js keeps --header-block equal to the header's height (it grows with the reading scale); the fallback is the
   compact header's height at the default scale. */
html{scroll-padding-top:calc(var(--header-block,61px) + 12px)}
.period-bar{inset-block-start:calc(var(--header-block,61px) - 1px)}
.timeline-period,.trail-end{scroll-margin-top:8px}
/* an article with a period bar: its headings also clear the bar that sticks under the header */
main:has(.period-bar) .prose :is(h2,h3)[id]{scroll-margin-top:54px}
/* the article's table of contents scrolls with the page: sideways (two columns) it stuck at 28px under the header
   and was taller than the screen, so its last links could not be reached while it stuck */
.toc{position:static}

/* ---------- map keys: a key line wraps inside the map's frame ------------------------------------------------- */
/* (found in the 2.7.2 sweep: a long English or Russian label - "Newe Yam and the Carmel coast: ..." - kept to one line,
   ran past the frame and was cut off by it; the dot now stays beside the label's first line) */
.map-key li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:baseline}
.map-key-label{white-space:normal;overflow-wrap:break-word}
.map-key-note{grid-column:2}

/* ---------- the photograph's zoom view ----------------------------------------------------------------------- */
/* (found in the 2.7.2 sweep) the controls get their own band above the picture: sideways a fitted photograph ran
   under them, and over a light photograph the buttons - the close button included - were barely visible. The view
   also follows the visible screen height (100dvh; under a phone browser's own toolbar 100vh is taller than what is
   seen), as the privacy sheet and the reading-tools panel already do. */
.zoom-dialog{height:100dvh;max-height:100dvh}
.zoom-stage{inset-block-start:64px}

/* ---------- covers: an editorial cover instead of a repeated photograph ---------------------------------------- */
/* A repeat (.has-repeat-cover): the photograph gives way to a panel - tone and a line motif, decorative and hidden
   from assistive technology - and the card's own eyebrow and heading (still its one link) are set over the panel;
   summary, meta and reason follow below it. The card body becomes transparent to the grid for this. */
.entity-card.has-repeat-cover{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(112px,auto) auto auto;align-content:start}
.entity-card.has-repeat-cover>.entity-card-media{display:none}
.entity-card.has-repeat-cover>.entity-card-cover{display:block;grid-area:1/1/4/2;aspect-ratio:auto;min-height:0;padding:0}
/* the motif keeps to the free band above the eyebrow, whatever the title's length */
.entity-card.has-repeat-cover>.entity-card-cover .cover-motif{height:96px}
.entity-card.has-repeat-cover>.entity-card-body{display:contents}
.entity-card.has-repeat-cover>.entity-card-body>*{margin-inline:18px;min-width:0}
.entity-card.has-repeat-cover>.entity-card-body>.eyebrow{grid-area:2/1;z-index:1;margin-block:0 7px;color:var(--cover-ink)}
.entity-card.has-repeat-cover>.entity-card-body>h3{grid-area:3/1;z-index:1;margin-block:0;padding-block-end:16px;color:var(--cover-text);font-size:calc(var(--display-scale)*1.4rem);line-height:1.2;max-width:28ch;text-wrap:balance}
.entity-card.has-repeat-cover>.entity-card-body>h3 a,.entity-card.has-repeat-cover>.entity-card-body>h3 a:hover{color:inherit}
.entity-card.has-repeat-cover>.entity-card-body>h3~*{margin-block-start:8px}
.entity-card.has-repeat-cover>.entity-card-body>h3+*{margin-block-start:18px}
.entity-card.has-repeat-cover>.entity-card-body>:last-child{margin-block-end:20px}
/* both kinds of cover (a repeat, and the text-only cover of a card without any picture) */
.entity-card-cover{isolation:isolate;min-height:204px;justify-content:flex-end;gap:7px;padding:18px 18px 16px;border-block-end:1px solid var(--line)}
.entity-card-cover .cover-icon{display:none}
.entity-card-cover .eyebrow{color:var(--cover-ink,var(--primary-hover))}
.entity-card-cover h3{font-size:calc(var(--display-scale)*1.4rem);line-height:1.2;max-width:28ch}
.entity-card-cover .cover-range{color:inherit;opacity:.82}
.cover-motif{display:block;position:absolute;z-index:-1;inset-block-start:14px;inset-inline-end:14px;width:min(86%,340px);height:62%;color:var(--motif-colour,var(--primary));opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
.cover-motif path{vector-effect:non-scaling-stroke}
.cover-motif .motif-accent{opacity:.9}
.cover-motif .motif-dot{fill:var(--cover-tint,#f1e7d6);stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
[dir=rtl] .cover-motif{transform:scaleX(-1)}
/* three tones of the site's palette: sand, clay (terracotta) and ink; neighbouring covers never share one. A repeat
   carries its tone on the card too, for the eyebrow and heading set over the panel. */
:is(.entity-card,.entity-card-cover).tone-sand{--cover-tint:#f2e8d8;--cover-tint-2:#e6d6bc;--cover-ink:#86361a;--motif-colour:#a74824;--cover-text:var(--ink)}
:is(.entity-card,.entity-card-cover).tone-clay{--cover-tint:#f3ddcc;--cover-tint-2:#e8c5ab;--cover-ink:#7a2f15;--motif-colour:#8f3b1c;--cover-text:var(--ink-deep)}
:is(.entity-card,.entity-card-cover).tone-ink{--cover-tint:#2d231c;--cover-tint-2:#1b1410;--cover-ink:#f0b08c;--motif-colour:#e9d6b8;--cover-text:#f4ecdf}
.entity-card-cover:is(.tone-sand,.tone-clay,.tone-ink){color:var(--cover-text)}
.entity-card-cover.tone-ink .cover-motif{opacity:.42}
.entity-card-cover.tone-ink h3 a:focus-visible{outline:2px solid #f0b08c;outline-offset:3px}
/* a period keeps its own colour in the cover's top rule and motif (text stays in the tone's ink for contrast) */
.entity-card.card-period .entity-card-cover{--motif-colour:var(--period-colour,#a74824);border-block-start:4px solid var(--period-colour,var(--line-strong))}
.entity-card.card-period.is-text{--cover-ink:#86361a}
.entity-card.card-period .entity-card-cover.tone-clay{--cover-ink:#7a2f15}
html.a11y-contrast .entity-card-cover{color:#111!important;--cover-ink:#111}
html.a11y-contrast .entity-card.has-repeat-cover{--cover-ink:#111;--cover-text:#111}
html.a11y-contrast .cover-motif{color:#555;opacity:.6}

/* ---------- the story's entrance (arriving from the home page's first button) ---------------------------------- */
@keyframes atiqot-story-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* fill "backwards": the start state covers the short delays; once played, nothing of the animation stays on the page
   (no lasting transform or stacking context on the article's layout) */
html.story-entrance .article-header>*,html.story-entrance main>.article-figure,html.story-entrance .article-layout{animation:atiqot-story-in 360ms var(--menu-ease) backwards}
html.story-entrance .article-header>:nth-child(2){animation-delay:40ms}
html.story-entrance .article-header>:nth-child(3){animation-delay:80ms}
html.story-entrance .article-header>:nth-child(n+4){animation-delay:120ms}
html.story-entrance main>.article-figure,html.story-entrance .article-layout{animation-delay:150ms}

/* ---------- motion off: the site setting and the system preference ------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .mobile-menu[open]>nav,.language-picker[open]>.language-picker-list,.mobile-menu.is-closing>nav,.language-picker.is-closing>.language-picker-list,html.story-entrance *{animation:none!important}
  .language-picker-chevron,.mobile-menu summary .icon{transition:none}
}
html.a11y-reduced-motion .mobile-menu>nav,html.a11y-reduced-motion .language-picker-list,html.a11y-reduced-motion.story-entrance *{animation:none!important}
html.a11y-reduced-motion .language-picker-chevron,html.a11y-reduced-motion .mobile-menu summary .icon{transition:none}

/* 2.8.0: the period directory now lists seven regions, and Russian sub-period titles carry long words
   ("задокументированный", "Раннехристианский"). On a phone the title column may shrink below its longest word:
   the word is hyphenated where the browser can, and broken at the edge otherwise, instead of widening the page. */
.period-directory-link{grid-template-columns:minmax(0,1fr) auto}
.period-directory-link :is(h3,h4){font-size:clamp(1.125rem,6.4vw,1.5625rem)}
.period-directory-link :is(h3,h4),.period-directory-link .subperiod-context{min-width:0;overflow-wrap:anywhere;hyphens:auto}