/* ============================================================
   הספר הדיגיטלי של מגדלי הים התיכון — the Migdalei pilot (ADR-060).
   Brand book 22590_11 (2026): navy, blue, purple, terracotta, sand,
   white; font FB Booster; the wave mark and the "five elements" circle
   chain as motifs.
   Two scopes, one file:
   - .mht-site      the public pilot pages in site/mht/ (light, as the
                    brand's own ads are), which load this file alone;
   - [data-brand="mht"]  the family home and members page, which load
                    archive.css first; this repaints its tokens.
   No text under 16 px (type_size.test.ts): many readers are older.
   ============================================================ */

/* FB Booster is a licensed Fontbit face and is not bundled. When Migdalei
   supply the webfont files, put them in site/mht/fonts/ and uncomment these;
   until then Rubik (Hebrew, geometric, softly rounded) stands in.
@font-face { font-family: 'FB Booster'; font-weight: 400; font-display: swap; src: url('../fonts/FbBooster-Regular.woff2') format('woff2'); }
@font-face { font-family: 'FB Booster'; font-weight: 700; font-display: swap; src: url('../fonts/FbBooster-Bold.woff2') format('woff2'); }
*/

:root {
  --navy: #001c3d;
  --blue: #3a86ff;
  --purple: #8338ec;
  --terra: #c86a49;
  --sand: #d3ba78;
  --white: #ffffff;
  --navy-deep: #00142c;
  /* blue and terracotta carrying text or white text: the brand's own are
     3.6:1 on white, these are 6.1:1 and 5.3:1 */
  --blue-ink: #1d5bd0;
  --terra-ink: #a24f31;
  --bg: #f2f4f7;
  --ink-soft: rgba(0, 28, 61, .78);
  --on-navy-soft: rgba(255, 255, 255, .82);
  --rule: rgba(0, 28, 61, .12);
  --font: 'FB Booster', 'Rubik', 'Heebo', system-ui, sans-serif;
  --radius: 22px;
  --radius-sm: 12px;
  --shadow: 0 14px 40px rgba(0, 28, 61, .10);
}

/* ============================================================
   PUBLIC PILOT PAGES
   ============================================================ */
.mht-site * { margin: 0; padding: 0; box-sizing: border-box; }
.mht-site { font-family: var(--font); background: var(--bg); color: var(--navy); line-height: 1.7; min-height: 100vh; overflow-x: hidden; font-size: 18px; }
.mht-site img { display: block; max-width: 100%; }
.mht-site a { color: inherit; }
.mht-site h1, .mht-site h2, .mht-site h3 { font-weight: 700; line-height: 1.2; }
.mht-site .wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.mht-site :focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; border-radius: 4px; }
.mht-site main:focus { outline: none; }
.mht-site .r { opacity: 0; animation: mht-rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes mht-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mht-site .r { animation: none; opacity: 1; } }

.mht-site .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 48px; background: var(--navy); color: var(--white); font-weight: 700; font-size: 17px; padding: 10px 20px; text-decoration: none; }
.mht-site .skip-link:focus { inset-inline-start: 12px; top: 12px; }
.mht-site .vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- header ---------- */
.mht-site .bar { background: var(--white); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50; }
.mht-site .bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 10px; flex-wrap: wrap; }
.mht-site .logo { display: inline-flex; min-height: 44px; align-items: center; }
.mht-site .logo img { height: 52px; width: auto; }
.mht-site .bar nav { display: flex; gap: 0 22px; flex-wrap: wrap; font-size: 16px; font-weight: 500; align-items: center; }
.mht-site .bar nav a { text-decoration: none; color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 44px; }
.mht-site .bar nav a:hover { color: var(--blue-ink); }
.mht-site .bar nav a.enter { color: var(--white); background: var(--navy); border-radius: 999px; padding: 0 20px; font-weight: 700; }
.mht-site .bar nav a.enter:hover { background: var(--navy-deep); color: var(--white); }

/* ---------- buttons ---------- */
.mht-site .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; font-family: inherit; font-weight: 700; font-size: 18px; text-decoration: none; border: none; cursor: pointer; border-radius: 999px; padding: 12px 30px; transition: transform .15s ease, background .15s ease; text-align: center; }
.mht-site .btn:hover { transform: translateY(-1px); }
.mht-site .btn-navy { background: var(--navy); color: var(--white); }
.mht-site .btn-navy:hover { background: var(--navy-deep); }
.mht-site .btn-blue { background: var(--blue-ink); color: var(--white); }
.mht-site .btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.mht-site .btn-outline:hover { background: var(--navy); color: var(--white); }
.mht-site .btn-white { background: var(--white); color: var(--navy); }

/* ---------- hero ---------- */
.mht-site .hero { background: var(--white); padding-block: 56px 72px; position: relative; overflow: hidden; }
.mht-site .kicker { font-size: 17px; font-weight: 700; color: var(--blue-ink); margin-bottom: 14px; }
.mht-site .hero h1 { font-size: clamp(36px, 6vw, 66px); color: var(--navy); max-width: 860px; text-wrap: balance; }
.mht-site .hero h1 em { font-style: normal; color: var(--blue-ink); }
.mht-site .hero .sub { font-size: 20px; color: var(--ink-soft); max-width: 660px; margin-top: 22px; line-height: 1.8; }
.mht-site .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; align-items: center; }
.mht-site .hero .mark { position: absolute; inset-inline-end: -40px; top: 40px; width: 380px; opacity: .07; pointer-events: none; }

/* the "five elements" circle chain: decorative */
.mht-chain { display: flex; list-style: none; padding: 0; margin: 40px 0 0; }
.mht-chain li { width: 54px; height: 54px; border-radius: 50%; border: 4px solid; margin-inline-end: -8px; background: transparent; }
.mht-chain li:nth-child(even) { transform: translateY(26px); }
.mht-chain li:nth-child(1) { border-color: var(--terra); }
.mht-chain li:nth-child(2) { border-color: var(--purple); }
.mht-chain li:nth-child(3) { border-color: var(--sand); }
.mht-chain li:nth-child(4) { border-color: var(--blue); }
.mht-chain li:nth-child(5) { border-color: var(--navy); }
.mht-site .band .mht-chain li:nth-child(5), [data-brand="mht"] .mht-chain li:nth-child(5) { border-color: var(--white); }
.mht-chain.sm li { width: 22px; height: 22px; border-width: 3px; margin-inline-end: -4px; }
.mht-chain.sm li:nth-child(even) { transform: translateY(10px); }

/* ---------- sections ---------- */
.mht-site section.sec { padding-block: 64px; }
.mht-site .sec-head { max-width: 700px; margin-bottom: 30px; }
.mht-site .sec-head .kicker { color: var(--terra-ink); }
.mht-site .sec-head h2 { font-size: clamp(28px, 4vw, 40px); color: var(--navy); }
.mht-site .sec-head p { font-size: 18px; color: var(--ink-soft); margin-top: 10px; }

.mht-site .cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
.mht-site .card { background: var(--white); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); position: relative; }
.mht-site .card h3 { font-size: 22px; color: var(--navy); margin-bottom: 8px; }
.mht-site .card p { font-size: 17px; color: var(--ink-soft); line-height: 1.75; }
.mht-site .card .n { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--white); font-weight: 700; font-size: 20px; display: grid; place-items: center; margin-bottom: 16px; }
.mht-site .card:nth-child(2) .n { background: var(--blue-ink); }
.mht-site .card:nth-child(3) .n { background: var(--terra-ink); }
.mht-site .card .ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; margin-bottom: 16px; background: rgba(58, 134, 255, .12); }
.mht-site .card:nth-child(2) .ic { background: rgba(131, 56, 236, .12); }
.mht-site .card:nth-child(3) .ic { background: rgba(200, 106, 73, .14); }
.mht-site .card:nth-child(4) .ic { background: rgba(211, 186, 120, .28); }
.mht-site .card .soon { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--terra-ink); border: 1px dashed var(--terra-ink); border-radius: 999px; padding: 2px 14px; }
.mht-site .card.navy { background: var(--navy); color: var(--white); }
.mht-site .card.navy h3 { color: var(--white); }
.mht-site .card.navy p { color: var(--on-navy-soft); }

.mht-site .pilot-note { background: rgba(211, 186, 120, .22); border: 1px solid rgba(211, 186, 120, .7); border-radius: var(--radius); padding: 28px; max-width: 860px; }
.mht-site .pilot-note h2 { font-size: 26px; margin-bottom: 8px; }
.mht-site .pilot-note p { font-size: 18px; color: var(--ink-soft); }

/* ---------- call band ---------- */
.mht-site .band { background: var(--navy); color: var(--white); text-align: center; padding-block: 64px; }
.mht-site .band h2 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 14px; }
.mht-site .band p { color: var(--on-navy-soft); font-size: 18px; max-width: 620px; margin: 0 auto 24px; }
.mht-site .band .mht-chain { justify-content: center; margin: 0 auto 30px; }

/* ---------- sign-in card ---------- */
.mht-site .login-shell { min-height: calc(100vh - 260px); display: grid; place-items: center; padding: 48px 20px; }
.mht-site .login-card { width: min(460px, 100%); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 38px 34px 28px; }
.mht-site .login-card .label { font-size: 16px; font-weight: 700; color: var(--terra-ink); margin-bottom: 10px; }
.mht-site .login-card h1 { font-size: 32px; color: var(--navy); margin-bottom: 8px; }
.mht-site .login-card .lead { font-size: 18px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 18px; }
.mht-site .login-card label { display: block; font-size: 17px; font-weight: 700; margin: 12px 0 6px; }
.mht-site .login-card input { width: 100%; min-height: 50px; font-family: inherit; font-size: 18px; color: var(--navy); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 11px 14px; }
.mht-site .login-card button { width: 100%; min-height: 54px; margin-top: 20px; font-family: inherit; font-weight: 700; font-size: 19px; background: var(--navy); color: var(--white); border: none; border-radius: 999px; padding: 12px; cursor: pointer; }
.mht-site .login-card button:hover { background: var(--navy-deep); }
.mht-site .login-card button:disabled { opacity: .6; cursor: default; }
.mht-site #msg { font-size: 17px; line-height: 1.7; margin-top: 14px; display: none; padding: 10px 14px; border-radius: var(--radius-sm); }
.mht-site #msg.ok { display: block; background: #e4f3e8; color: #1f6b3a; }
.mht-site #msg.err { display: block; background: #fbe5e1; color: #8a2a24; }
.mht-site #msg a { display: inline-block; min-height: 44px; line-height: 44px; color: inherit; font-weight: 700; }
.mht-site .help { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 17px; color: var(--ink-soft); text-align: center; }
.mht-site .help a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 6px; color: var(--blue-ink); font-weight: 700; }

/* ---------- demo page (site/demo.html) ---------- */
.mht-site #demo-msg, .mht-site #presenter-msg { font-size: 17px; line-height: 1.7; margin-top: 14px; display: none; padding: 10px 14px; border-radius: var(--radius-sm); }
.mht-site #demo-msg.err, .mht-site #presenter-msg.err { display: block; background: #fbe5e1; color: #8a2a24; }
.mht-site .roles { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 17px; color: var(--ink-soft); text-align: center; line-height: 1.8; }
.mht-site .roles a, .mht-site .demo-note a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 4px; color: var(--blue-ink); font-weight: 700; }
.mht-site .demo-note { margin-top: 12px; font-size: 17px; color: var(--ink-soft); line-height: 1.7; text-align: center; }
.mht-site .presenter { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--rule); }
.mht-site .presenter summary { cursor: pointer; min-height: 44px; line-height: 44px; font-size: 17px; font-weight: 700; color: var(--blue-ink); text-align: center; }
.mht-site .login-card .presenter button { background: var(--blue-ink); }

/* ---------- footer ---------- */
.mht-site .foot { background: var(--navy); color: var(--on-navy-soft); padding-block: 36px; font-size: 16px; }
.mht-site .foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.mht-site .foot img { height: 60px; width: auto; }
.mht-site .foot a { color: var(--sand); display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 900px) {
  .mht-site .cards { grid-template-columns: repeat(3, 1fr); }
  .mht-site .cards.four { grid-template-columns: repeat(4, 1fr); }
  .mht-site .hero { padding-block: 84px 96px; }
}
@media (max-width: 899px) {
  .mht-site .hero .mark { display: none; }
  .mht-site .bar .wrap { justify-content: center; }
  .mht-site .bar nav { justify-content: center; }
  .mht-site .cta-row .btn { width: 100%; }
}

/* ============================================================
   SIGNED-IN PAGES — archive.css repainted in the brand
   (family home, members page). Same layout, same contrast
   polarity: a navy wall, white cards, sand and blue accents.
   ============================================================ */
[data-brand="mht"] {
  --wall: #001c3d; --wall-deep: #00142c;
  --paper: #ffffff; --paper-soft: #eef2f8;
  --gold: #d3ba78; --gold-deep: #3a86ff;
  --gold-btn: #1d5bd0;
  --gold-ink: #1d5bd0;
  --majorelle: #8338ec; --terra: #c86a49;
  --ink: #001c3d; --mist: rgba(255, 255, 255, .8);
  --line: rgba(211, 186, 120, .32);
  --font-display: var(--font);
  --font-body: var(--font);
  --font-ui: var(--font);
}
[data-brand="mht"]::before { display: none; }
[data-brand="mht"]::after { background: radial-gradient(120% 90% at 50% 0%, transparent 60%, rgba(0, 10, 25, .45) 100%); }
[data-brand="mht"] h1.display, [data-brand="mht"] .shelf-head h2, [data-brand="mht"] .sec > h2, [data-brand="mht"] .room h3 { font-weight: 700; }
[data-brand="mht"] .bar .brand { gap: 16px; color: var(--paper); font-weight: 500; }
[data-brand="mht"] .brand img { height: 46px; width: auto; }
[data-brand="mht"] .artifact::before { border-color: rgba(0, 28, 61, .14); }
[data-brand="mht"] .artifact { border-radius: 14px; transform: none; }
[data-brand="mht"] .artifact .row, [data-brand="mht"] .gal figcaption { color: rgba(0, 28, 61, .75); }
[data-brand="mht"] .artifact .cta:hover { background: #00142c; }
[data-brand="mht"] .spine.full { background: linear-gradient(180deg, #e3d3a6, #d3ba78); border-color: var(--gold); box-shadow: 0 8px 26px rgba(211, 186, 120, .25); }
[data-brand="mht"] .spine.part { background: linear-gradient(180deg, rgba(211, 186, 120, .45) 40%, rgba(255, 255, 255, .05) 40%); }
[data-brand="mht"] .ledge { background: linear-gradient(180deg, #0b2a52, #00142c); }
[data-brand="mht"] .room { border-radius: 16px; }
[data-brand="mht"] .room.photo::after { background: linear-gradient(180deg, rgba(0, 20, 44, .15), rgba(0, 20, 44, .92) 78%); }
[data-brand="mht"] .badge { background: rgba(0, 20, 44, .6); }
[data-brand="mht"] .chat-msg.q { background: #3a86ff; color: #00142c; }
[data-brand="mht"] .chat-input-row button, [data-brand="mht"] .dl-btn { background: var(--gold); color: #00142c; border-radius: 999px; }
[data-brand="mht"] .chat-input-row button:hover { background: #e3d3a6; }
[data-brand="mht"] .dl-btn.ghost { background: transparent; color: var(--gold); }
[data-brand="mht"] .foot .mht-chain { margin: 0; }
@media (max-width: 600px) {
  [data-brand="mht"] .shelf { background: repeating-linear-gradient(180deg, transparent 0 160px, #0b2a52 160px 168px, transparent 168px 174px); }
}