/* ============================================================
   MULTI-PAGE COMPONENTS — loaded alongside site.css
   ============================================================ */

/* ---------- brand mark in the nav ---------- */
.mark img{height:34px;width:auto;display:block;flex:none}
.mark .wm{display:flex;flex-direction:column;line-height:1.1;gap:2px}
.mark .wm b{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.25vw,18px);letter-spacing:-.02em}
.mark .wm i{font-family:var(--label);font-style:normal;font-size:10px;letter-spacing:.15em;opacity:.7}
@media (max-width:560px){.mark img{height:27px}.mark .wm i{display:none}}

/* ---------- mobile nav drawer ---------- */
.nav-toggle{display:none;background:none;border:1px solid currentColor;border-radius:8px;color:inherit;
  width:42px;height:38px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav-toggle span{display:block;width:17px;height:1.5px;background:currentColor;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;inset-inline:0;height:1.5px;background:currentColor}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav-links{display:none}
}
.nav-drawer{position:fixed;inset:0;z-index:95;background:var(--text-primary);
  display:grid;place-content:center;gap:6px;text-align:center;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.nav-drawer[data-open="1"]{opacity:1;visibility:visible}
.nav-drawer a{display:block;padding:10px 20px;font-family:var(--display);font-size:clamp(21px,5vw,29px);
  color:#F5EEE2;text-decoration:none;transition:color .3s var(--ease)}
.nav-drawer a:hover{color:var(--accent)}
.nav-drawer a.dcta{margin-top:14px;font-family:var(--label);font-size:15px;color:var(--accent);letter-spacing:.08em}
body.locked{overflow:hidden}

/* ---------- sound toggle ---------- */
.sound{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid currentColor;
  border-radius:999px;padding:6px 13px;cursor:pointer;color:inherit;font-family:var(--label);
  font-size:11px;letter-spacing:.1em;opacity:.82;transition:opacity .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.sound:hover{opacity:1}
.sound svg{width:13px;height:13px;flex:none}
.sound .wave{opacity:.25;transition:opacity .3s var(--ease)}
.sound[data-on="1"]{background:var(--accent);border-color:var(--accent);color:#FFF8F1;opacity:1}
.sound[data-on="1"] .wave{opacity:1}
@media (max-width:760px){.sound .sl{display:none}.sound{padding:7px 10px}}

/* ---------- interior page hero ---------- */
.phero{position:relative;min-height:clamp(400px,60vh,600px);display:flex;align-items:flex-end;overflow:hidden;background:#1A1611}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .pscrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(18,11,4,.9) 0%,rgba(18,11,4,.42) 48%,rgba(18,11,4,.62) 100%)}
.phero .pin{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:140px var(--gut) clamp(36px,5vw,62px);color:var(--hero-ink);text-shadow:var(--tshadow)}
.phero .kick{color:rgba(247,242,232,.78)}
.phero h1{font-size:clamp(30px,5.6vw,64px);font-weight:500;margin-top:14px;text-wrap:balance}
.phero .plede{margin-top:16px;max-width:52ch;font-weight:300;font-size:clamp(15px,1.35vw,19px);color:rgba(247,242,232,.9)}
.phero .prule{height:2px;width:60px;background:var(--accent);margin-top:22px}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--label);font-size:12px;letter-spacing:.09em;color:rgba(247,242,232,.66)}
.crumb a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.crumb a:hover{border-bottom-color:currentColor}
.crumb i{font-style:normal;opacity:.45;margin:0 7px}

/* ---------- project filter + grid ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.filters button{font-family:var(--label);font-size:13px;letter-spacing:.05em;padding:9px 17px;border-radius:999px;
  border:1px solid var(--stone);background:transparent;color:var(--text-secondary);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.filters button:hover{border-color:var(--sage);color:var(--text-primary)}
.filters button[aria-pressed="true"]{background:var(--text-primary);border-color:var(--text-primary);color:var(--canvas)}
.prj-meta{margin-top:20px;font-family:var(--label);font-size:12px;letter-spacing:.11em;color:var(--text-secondary)}
.prj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:clamp(14px,1.8vw,26px);margin-top:26px}
.prj{background:var(--panel);border:1px solid var(--stone);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.prj:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(35,32,28,.13);border-color:var(--sage)}
.prj .ph{aspect-ratio:16/10;overflow:hidden;background:var(--stone);position:relative}
.prj .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.prj:hover .ph img{transform:scale(1.05)}
.prj .ph.none{display:grid;place-items:center;background:var(--canvas-deep)}
.prj .ph.none span{font-family:var(--label);font-size:11px;letter-spacing:.19em;color:var(--sage-deep)}
.prj .body{padding:17px clamp(15px,1.5vw,22px) 19px;display:flex;flex-direction:column;gap:9px;flex:1}
.prj h3{font-size:clamp(17px,1.5vw,21px);font-weight:500;line-height:1.24}
.prj .cat{font-family:var(--label);font-size:11px;letter-spacing:.13em;color:var(--sage-deep)}
.prj p{font-size:14.5px;font-weight:300;color:var(--text-secondary);line-height:1.55}
.prj .row{display:flex;flex-wrap:wrap;gap:13px;font-family:var(--label);font-size:11.5px;letter-spacing:.05em;
  color:var(--text-secondary);margin-top:auto;padding-top:11px;border-top:1px solid var(--stone)}
.prj .row b{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.prj a.more{text-decoration:none;color:var(--accent);font-family:var(--label);font-size:12px;letter-spacing:.07em}

/* ---------- voiceover player ---------- */
.vo{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--stone);
  padding:13px 18px;border-radius:999px;max-width:540px}
.vo.on-dark{background:rgba(247,242,232,.07);border-color:rgba(201,188,168,.24)}
.vo-btn{flex:none;width:46px;height:46px;border-radius:50%;border:none;background:var(--accent);color:#FFF8F1;
  cursor:pointer;display:grid;place-items:center;transition:background .3s var(--ease),transform .3s var(--ease)}
.vo-btn:hover{background:var(--accent-hover);transform:scale(1.06)}
.vo-btn svg{width:14px;height:14px;fill:currentColor}
.vo-btn .pz{display:none}
.vo[data-playing="1"] .vo-btn .pl{display:none}
.vo[data-playing="1"] .vo-btn .pz{display:block}
.vo .vo-txt{flex:1;min-width:0}
.vo .vo-lbl{font-family:var(--label);font-size:12px;letter-spacing:.09em;color:var(--sage-deep)}
.vo.on-dark .vo-lbl{color:var(--sage)}
.vo .vo-bar{height:3px;background:var(--stone);border-radius:2px;margin-top:8px;overflow:hidden}
.vo.on-dark .vo-bar{background:rgba(201,188,168,.25)}
.vo .vo-bar i{display:block;height:100%;background:var(--accent);transform-origin:right center;transform:scaleX(0);
  transition:transform .2s linear}
.vo .vo-time{font-family:var(--label);font-size:11px;color:var(--text-secondary);margin-top:6px;font-variant-numeric:tabular-nums}
.vo.on-dark .vo-time{color:rgba(239,232,220,.6)}
.vo[data-error="1"] .vo-lbl::after{content:" · יעלה בקרוב";opacity:.7}

/* ---------- the 360 viewer ---------- */
.orb{position:relative;aspect-ratio:16/9;background:var(--text-primary);overflow:hidden;cursor:grab;
  touch-action:pan-y;border:1px solid var(--stone)}
.orb[data-drag="1"]{cursor:grabbing}
.orb video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .7s var(--ease)}
.orb[data-ready="1"] video{opacity:1}
.orb .orb-hint{position:absolute;inset-block-end:18px;inset-inline:0;text-align:center;z-index:2;pointer-events:none;
  font-family:var(--label);font-size:12px;letter-spacing:.13em;color:rgba(247,242,232,.85);
  text-shadow:0 2px 10px rgba(10,6,2,.85);transition:opacity .4s var(--ease)}
.orb[data-drag="1"] .orb-hint{opacity:0}
.orb .orb-track{position:absolute;inset-block-end:0;inset-inline:0;height:3px;background:rgba(247,242,232,.18);z-index:2}
.orb .orb-track::after{content:"";position:absolute;inset-block:0;inset-inline:0;
  background:var(--accent);transform-origin:right center;transform:scaleX(var(--op,0))}
.orb .orb-load{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  font-family:var(--label);font-size:12px;letter-spacing:.15em;color:rgba(247,242,232,.5)}
.orb[data-ready="1"] .orb-load{display:none}

/* ---------- timeline ---------- */
.tl{margin:50px 0 0;padding:0}
.tl li{list-style:none;position:relative;padding:0 clamp(22px,3vw,42px) clamp(26px,3.2vw,42px) 0;
  border-inline-end:1px solid var(--stone)}
.tl li:last-child{border-inline-end-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;inset-inline-end:-5px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--canvas);border:2px solid var(--sage)}
.tl li:first-child::before{border-color:var(--accent);background:var(--accent)}
.tl b{display:block;font-family:var(--display);font-size:clamp(23px,3vw,36px);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.tl p{margin-top:9px;max-width:58ch;font-weight:300;color:var(--text-secondary)}

/* ---------- bullet list ---------- */
.blist{margin:34px 0 0;padding:0;list-style:none;display:grid;gap:1px;background:var(--stone);border:1px solid var(--stone)}
.blist li{background:var(--canvas);padding:16px clamp(16px,2vw,26px);display:flex;gap:14px;align-items:baseline}
.blist li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}

/* ---------- person card ---------- */
.person{margin-top:44px;display:flex;gap:clamp(18px,2.4vw,32px);align-items:center;background:var(--panel);
  border:1px solid var(--stone);padding:clamp(22px,3vw,38px);max-width:640px}
.person .init{flex:none;width:76px;height:76px;border-radius:50%;background:var(--text-primary);color:var(--canvas);
  display:grid;place-items:center;font-family:var(--display);font-size:26px;font-weight:700}
.person h3{font-size:clamp(21px,2.2vw,28px);font-weight:500}
.person .role{margin-top:6px;font-family:var(--label);font-size:12px;letter-spacing:.11em;color:var(--sage-deep)}
.person .since{margin-top:9px;font-size:15px;font-weight:300;color:var(--text-secondary)}

/* ---------- spec table ---------- */
.spec{width:100%;border-collapse:collapse;margin-top:34px;font-size:clamp(14px,1.05vw,16px)}
.spec th,.spec td{text-align:right;padding:16px 14px;border-bottom:1px solid var(--stone);vertical-align:top}
.spec th{width:34%;font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--sage-deep)}
.spec td b{font-variant-numeric:tabular-nums;font-family:var(--label);font-weight:700}
.spec td.soon{font-family:var(--label);font-size:.87em;letter-spacing:.03em;color:var(--sage-deep)}

/* ---------- dark CTA strip ---------- */
.strip{background:var(--text-primary);color:#EFE8DC;padding:clamp(40px,5vw,66px) var(--gut);position:relative;z-index:2}
.strip .wrap{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);align-items:center;justify-content:space-between}
.strip h3{font-size:clamp(22px,3vw,36px);font-weight:500;color:#F5EEE2;max-width:22ch;text-wrap:balance}
.strip p{margin-top:11px;font-weight:300;color:rgba(239,232,220,.74);max-width:46ch}

/* ---------- textarea + dark form ---------- */
.field textarea{width:100%;padding:14px 16px;font-family:var(--body);font-size:16px;color:var(--text-primary);
  background:var(--panel);border:1px solid var(--sage);border-radius:2px;min-height:94px;resize:vertical}
.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.on-dark .field label{color:var(--sage)}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{
  background:rgba(247,242,232,.06);border-color:rgba(201,188,168,.3);color:#F5EEE2}
.on-dark .thanks{background:rgba(247,242,232,.07);border-color:rgba(201,188,168,.3);color:#F5EEE2}

/* ---------- youtube card ---------- */
.tube{margin-top:42px;aspect-ratio:16/9;background:var(--text-primary);border:1px solid var(--stone);
  display:grid;place-items:center;text-align:center;padding:26px;position:relative;overflow:hidden}
.tube a{position:relative;z-index:1;font-family:var(--label);font-size:13px;letter-spacing:.09em;color:#F5EEE2;
  text-decoration:none;display:inline-flex;flex-direction:column;align-items:center;gap:14px;
  transition:color .3s var(--ease)}
.tube a:hover{color:var(--accent)}
.tube svg{width:56px;height:56px}

/* ---------- footer logo ---------- */
footer .flogo{height:76px;width:auto;margin-bottom:18px;display:block}

/* ---------- reduced motion for the new parts ---------- */
@media (prefers-reduced-motion:reduce){
  .prj:hover{transform:none}
  .prj:hover .ph img{transform:none}
  .vo-btn:hover{transform:none}
  .orb video{opacity:1!important}
}

/* nav right cluster */
.nav-right{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.nav-links a[aria-current="page"]{color:var(--accent);opacity:1}
.nav.solid .nav-links a[aria-current="page"]{color:var(--accent)}

/* ---------- brand library ---------- */
.book-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(18px,2.6vw,34px);margin-top:clamp(44px,5vw,70px)}
.book-card{position:relative;display:flex;flex-direction:column;text-decoration:none;
  border:1px solid var(--gold-hair);background:linear-gradient(160deg,#14120D,#0B0B09);
  transition:transform .5s var(--ease-lux),border-color .5s var(--ease-lux),box-shadow .5s var(--ease-lux)}
.book-card:hover{transform:translateY(-8px);border-color:var(--gold);
  box-shadow:0 30px 60px rgba(0,0,0,.5)}
.book-card .spine{position:absolute;inset-block:0;inset-inline-start:0;width:7px;
  background:linear-gradient(to bottom,var(--gold-deep),var(--gold),var(--gold-deep))}
.book-card .face{display:grid;place-content:center;gap:16px;text-align:center;
  aspect-ratio:4/3.4;border-bottom:1px solid var(--gold-hair);padding:20px}
.book-card .face img{margin-inline:auto;max-height:110px;width:auto}
.book-card .face b{font-family:var(--label);font-size:13px;letter-spacing:.3em;color:var(--gold)}
.book-card .face i{font-style:normal;font-family:var(--display);font-weight:300;
  font-size:clamp(17px,1.7vw,21px);color:var(--off)}
.book-card .meta{padding:18px 20px 22px;display:flex;flex-direction:column;gap:14px}
.book-card .meta p{margin:0;font-size:14px;font-weight:300;line-height:1.65;color:rgba(242,238,230,.72)}
.book-card .open{font-family:var(--label);font-size:11px;letter-spacing:.16em;color:var(--gold)}