/**
 * Snippet Name: AMM: Hosh model (CSS)
 * Generated: 2026-11-10 12:43:03
 * Source: Custom
 * AUTO-GENERATED FILE — DO NOT EDIT.
 */

/* AMM: Hosh model (CSS) for the interactive section on At Home in the Levant.
   Pairs with "AMM: Hosh model (JS)". Styles only .am-hm markup, which the JS
   builds inside [data-am-hosh]. Always drawn on the night cistern, in both site themes. */

.am-hm{--hm-bg:#071a26;--hm-panel:#0c2838;--hm-line:#5d7d86;--hm-ink:#e2eeeb;--hm-ink-2:#a9c9c3;
  position:relative;margin:8px 0 56px;padding:18px;border-radius:18px;background:var(--hm-bg);color:var(--hm-ink);
  border:1px solid rgba(98,242,227,.22);font-family:var(--f-kufi,system-ui,sans-serif)}
.am-hm button{font:inherit;cursor:pointer}
.am-hm__bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:12px}
.am-hm__group{display:flex;flex-wrap:wrap;gap:6px}
.am-hm__chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid rgba(226,238,235,.22);
  background:transparent;color:var(--hm-ink);font-size:14px;line-height:1.1}
.am-hm__chip:hover{border-color:rgba(226,238,235,.5);background:rgba(255,255,255,.04)}
.am-hm__chip[aria-pressed="true"]{background:rgba(255,255,255,.1);border-color:var(--c,#62f2e3);box-shadow:inset 0 0 0 1px var(--c,#62f2e3)}
.am-hm__dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.am-hm__chip--all{--c:#62f2e3}
.am-hm__chip--apart{--c:#efb021}
.am-hm__seg{gap:0;border:1px solid rgba(226,238,235,.22);border-radius:999px;overflow:hidden}
.am-hm__seg-btn{padding:7px 14px;border:0;background:transparent;color:var(--hm-ink-2);font-size:14px;line-height:1.1}
.am-hm__seg-btn+.am-hm__seg-btn{border-left:1px solid rgba(226,238,235,.16)}
.am-hm__seg-btn[aria-pressed="true"]{background:#efb021;color:#071a26}
.am-hm__scen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.am-hm__scen[hidden]{display:none}
.am-hm__scen .am-hm__seg-btn{border:1px solid rgba(226,238,235,.22);border-radius:999px}
.am-hm__scen .am-hm__seg-btn+.am-hm__seg-btn{border-left:1px solid rgba(226,238,235,.22)}
.am-hm__scen-label{font-size:13px;color:var(--hm-ink-2);margin-right:4px}

.am-hm__body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.am-hm__stage{position:relative;border-radius:12px;overflow:hidden}
.am-hm__svg{display:block;width:100%;height:auto}

/* drawing */
.am-hm__sky{fill:#0b2433}
.am-hm__earth{fill:#08151d}
.am-hm__hill{fill:#10303f}
.am-hm__town{fill:#163b4c}
.am-hm__sea{fill:#123a5a}
.am-hm__wave{fill:none;stroke:#2f6f93;stroke-width:1.2}
.am-hm__vine{fill:none;stroke:#3c6b45;stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
.am-hm__bd{opacity:0;transition:opacity .4s}
.am-hm[data-city="jerusalem"] .am-hm__bd[data-city="jerusalem"],
.am-hm[data-city="haifa"] .am-hm__bd[data-city="haifa"],
.am-hm[data-city="hebron"] .am-hm__bd[data-city="hebron"]{opacity:1}
.am-hm.is-apart .am-hm__bds{opacity:0}
.am-hm__wall{fill:#1a3c4b;stroke:#cdb994;stroke-width:1.4}
.am-hm__slab{stroke:#cdb994;stroke-width:3}
.am-hm__col{stroke:#cdb994;stroke-opacity:.45;stroke-width:1.2}
.am-hm__ground{stroke:#cdb994;stroke-opacity:.6;stroke-width:1.5}
.am-hm__screen{fill:none;stroke:#62f2e3;stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:3 3}
.am-hm__rail{stroke:#62f2e3;stroke-opacity:.6;stroke-width:1.4}
.am-hm__pv{stroke:#2346a8;stroke-width:8;stroke-linecap:round}
.am-hm__pvcell{stroke:#5c7fe0;stroke-width:3}
.am-hm__riser{stroke:#7f99a1;stroke-width:2;stroke-dasharray:6 4}
.am-hm__room{fill:#0f2a37;stroke:#5d7d86;stroke-width:1}
.am-hm__roomlabel{fill:#a9c9c3;font-size:12px;font-family:var(--f-kufi,system-ui,sans-serif)}
.am-hm__home{fill:#f0c46a;fill-opacity:.16}
.am-hm__hosh{fill:#8fd16f;fill-opacity:.16}
.am-hm__part{stroke:#cdb994;stroke-opacity:.5;stroke-width:1.2}
.am-hm__pergola{stroke:#8fd16f;stroke-width:3;stroke-dasharray:1 5;stroke-linecap:round}
.am-hm__glass{fill:#62f2e3;fill-opacity:.12;stroke:#62f2e3;stroke-opacity:.6}
.am-hm__trunk{fill:none;stroke:#9a7b52;stroke-width:6;stroke-linecap:round}
.am-hm__crown{fill:#3f7a4b;fill-opacity:.85}
.am-hm__furn{fill:#cdb994;fill-opacity:.55}
.am-hm__plant{fill:#5f9f5c}
.am-hm__layer{transform-box:view-box;transform-origin:0 0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.am-hm__layer-labels{opacity:0;transition:opacity .3s}
.am-hm.is-apart .am-hm__layer-labels{opacity:1;transition-delay:.4s}
.am-hm__ll-name{fill:#e2eeeb;font-size:17px;font-family:var(--f-kufi,system-ui,sans-serif)}
.am-hm__ll-life{fill:#efb021;font-size:14px;font-family:var(--f-kufi,system-ui,sans-serif)}
.am-hm.has-systems .am-hm__building{opacity:.55;transition:opacity .3s}
.am-hm.is-apart .am-hm__earth{fill:#0b2433}
.am-hm.is-apart .am-hm__ground{opacity:0}
.am-hm.is-apart .am-hm__layer *{vector-effect:non-scaling-stroke}

/* flows */
.am-hm__flow{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 9;opacity:0;transition:opacity .3s}
.am-hm__flow.is-on{opacity:1;animation:am-hm-flow 1.6s linear infinite}
@keyframes am-hm-flow{to{stroke-dashoffset:-19}}
.am-hm[data-scenario="midday"] .am-hm__flow[data-s="pv"]{stroke-width:5}
.am-hm[data-scenario="winter"] .am-hm__flow[data-s="pv"]{opacity:.35}
.am-hm[data-scenario="winter"] .am-hm__flow[data-s="cheat"],
.am-hm[data-scenario="winter"] .am-hm__flow[data-s="hot"]{stroke-width:5}
.am-hm[data-scenario="lowbat"] .am-hm__flow[data-s="pv"],
.am-hm[data-scenario="lowbat"] .am-hm__flow[data-s="gpu"],
.am-hm[data-scenario="lowbat"] .am-hm__flow[data-s="cheat"]{opacity:.12;animation:none}

/* points, zones, city tags */
.am-hm__pt{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border-radius:50%;
  border:2px solid var(--c);background:#071a26;box-shadow:0 0 0 4px rgba(7,26,38,.6),0 0 14px var(--c)}
.am-hm__pt::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.am-hm__pt::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--c)}
.am-hm__pt:hover,.am-hm__pt[aria-current="true"]{transform:scale(1.2)}
.am-hm__pt[hidden],.am-hm__zone[hidden],.am-hm__tag[hidden]{display:none}
.am-hm__zone{position:absolute;transform:translate(-50%,-50%);padding:5px 11px;border-radius:999px;border:1px solid rgba(239,176,33,.6);
  background:rgba(7,26,38,.82);color:#f3efe2;font-size:13px;line-height:1.1;white-space:nowrap}
.am-hm__zone:hover{background:#efb021;color:#071a26}
.am-hm__tag{position:absolute;transform:translate(-50%,-50%);max-width:46%;white-space:normal;padding:4px 9px;border-radius:6px;background:rgba(98,242,227,.14);
  border:1px solid rgba(98,242,227,.4);color:#c9fff8;font-size:12px;line-height:1.15;pointer-events:none}
.am-hm__tag[data-align="start"]{transform:translate(0,-50%)}
.am-hm__tag[data-align="end"]{transform:translate(0,-50%)}

/* card */
.am-hm__card{min-height:220px;padding:18px;border-radius:12px;background:var(--hm-panel);border:1px solid rgba(98,242,227,.18)}
.am-hm__card-sys{display:inline-flex;align-items:center;gap:7px;margin:0 0 8px;font-size:13px;color:var(--hm-ink-2)}
.am-hm__card-sys::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.am-hm__card-sys[hidden]{display:none}
.am-hm__card-title{font-family:var(--f-kufi,system-ui,sans-serif);font-size:22px;font-weight:500;color:#f3efe2;margin:0 0 8px}
.am-hm__card-text{font-family:var(--f-serif,Georgia,serif);font-size:16px;line-height:1.55;color:var(--hm-ink);margin:0 0 12px}
.am-hm__card-list{margin:0 0 12px;padding:0 0 0 18px;font-family:var(--f-serif,Georgia,serif);font-size:15px;line-height:1.5;color:var(--hm-ink)}
.am-hm__card-list[hidden]{display:none}
.am-hm__card-link{margin:0;font-size:14px}
.am .am-hm a.am-hm__plate,.am-hm a.am-hm__plate{color:#62f2e3}
.am .am-hm a.am-hm__plate:hover{color:#b6fff6}

/* keep the theme's generic button:hover/focus colors off the model's controls */
.am-hm .am-hm__chip:hover,.am-hm .am-hm__chip:focus{background:rgba(255,255,255,.04);color:var(--hm-ink)}
.am-hm .am-hm__chip[aria-pressed="true"]{background:rgba(255,255,255,.1)}
.am-hm .am-hm__seg-btn:hover,.am-hm .am-hm__seg-btn:focus{background:rgba(255,255,255,.06);color:#e2eeeb}
.am-hm .am-hm__seg-btn[aria-pressed="true"]{background:#efb021;color:#071a26}
.am-hm .am-hm__pt:hover,.am-hm .am-hm__pt:focus{background:#071a26}
.am-hm .am-hm__zone:focus{background:rgba(7,26,38,.82);color:#f3efe2}
.am-hm .am-hm__zone:hover{background:#efb021;color:#071a26}

@media (max-width:900px){
  .am-hm{padding:12px}
  .am-hm__body{grid-template-columns:1fr}
  .am-hm__card{min-height:0}
  .am-hm__tag{display:none}
  .am-hm__zone{font-size:10px;padding:2px 7px}
  .am-hm__chip,.am-hm__seg-btn{font-size:13px;padding:6px 10px}
  .am-hm__pt{width:18px;height:18px;margin:-9px 0 0 -9px}
}
@media (prefers-reduced-motion:reduce){
  .am-hm__flow.is-on{animation:none}
  .am-hm__layer{transition:none}
}

/* hub page: intro and the plate index */
.am-hub-intro{max-width:720px;margin:0 0 32px}
.am-plates{list-style:none;margin:0 0 56px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 16px}
.am-plates a{display:block;text-decoration:none;color:inherit}
.am-plates img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:10px;border:1px solid rgba(35,70,168,.16);transition:transform .2s}
.am-plates a:hover img,.am-plates a:focus-visible img{transform:translateY(-3px)}
.am-plates b{display:block;margin-top:8px;font-family:var(--f-kufi,system-ui,sans-serif);font-weight:500;font-size:13px;color:var(--saffron-ink,#8a5d00)}
.am-plates span{display:block;font-family:var(--f-kufi,system-ui,sans-serif);font-size:15px;line-height:1.25;color:var(--ink,#0f2029)}
html.am-night .am .am-plates b{color:var(--saffron,#efb021)}
html.am-night .am .am-plates span{color:#e2eeeb}
html.am-night .am .am-plates img{border-color:rgba(98,242,227,.18)}
.am-hosh-fallback img{display:block;max-width:420px;width:100%;height:auto;border-radius:12px}
@media (prefers-reduced-motion:reduce){.am-plates img{transition:none}}