/* ═══════════════════════════════════════════════════════════════
   מסע האוצר — מרכז המדריכים
   Shared stylesheet for /guides and every /guides/* article.
   Palette mirrors index.html ("יומן המסע" / Expedition Journal).
   To add a new guide: copy an existing guide HTML file, swap the
   content + metadata. No styles need to change.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --paper:#F2E7CE;
  --paper-hi:#F9F1DD;
  --ink:#2E2014;
  --ink-soft:#6F5A3B;
  --sienna:#9C3F16;
  --sienna-deep:#71290B;
  --gold:#C8962A;
  --gold-hi:#EFC670;
  --teal:#1F6468;
  --band:#164549;
  --rule:#C4A876;
  --font-display:'Suez One',serif;
  --font:'Noto Sans Hebrew',system-ui,sans-serif;
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{
  min-height:100%;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;line-height:1.7;
  overflow-x:hidden;
}
body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='540'%3E%3Cg fill='none' stroke='%232E2014' stroke-opacity='0.045' stroke-width='1.2'%3E%3Cellipse cx='128' cy='118' rx='68' ry='40' transform='rotate(-14 128 118)'/%3E%3Cellipse cx='128' cy='118' rx='98' ry='62' transform='rotate(-14 128 118)'/%3E%3Cellipse cx='128' cy='118' rx='128' ry='86' transform='rotate(-14 128 118)'/%3E%3Cellipse cx='418' cy='400' rx='58' ry='36' transform='rotate(11 418 400)'/%3E%3Cellipse cx='418' cy='400' rx='88' ry='58' transform='rotate(11 418 400)'/%3E%3Cpath d='M300 40 q20 18 46 12 M290 62 q30 26 70 16'/%3E%3C/g%3E%3C/svg%3E");
}
img{max-width:100%}

/* ── BANNER (matches homepage) ── */
.g-banner{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:center;
  padding:11px 22px;
  background:rgba(242,231,206,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1.5px solid rgba(46,32,20,.72);
}
.g-banner a{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.g-banner-mark{width:24px;height:24px;flex-shrink:0;align-self:center}
.g-banner-word{font-family:var(--font-display);font-size:19px;color:var(--ink);line-height:1.1}
.g-banner-tag{font-size:10.5px;color:var(--ink-soft);font-weight:500}

/* ── BREADCRUMB ── */
.g-crumb{
  max-width:700px;margin:0 auto;padding:16px 22px 0;
  font-size:12.5px;color:var(--ink-soft);
}
.g-crumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid rgba(111,90,59,.35)}
.g-crumb a:hover{color:var(--sienna);border-bottom-color:var(--sienna)}
.g-crumb span{opacity:.55;margin:0 6px}

/* ── ARTICLE ── */
.g-article{max-width:700px;margin:0 auto;padding:20px 22px 40px}
.g-article h1{
  font-family:var(--font-display);
  font-size:clamp(27px,5.4vw,36px);line-height:1.32;
  color:var(--ink);margin-bottom:14px;text-wrap:balance;
}
.g-meta{
  font-size:12.5px;color:var(--ink-soft);
  padding-bottom:22px;margin-bottom:26px;
  border-bottom:1px solid var(--rule);
}
.g-meta span{opacity:.5;margin:0 7px}

.g-article h2{
  font-family:var(--font-display);
  font-size:clamp(19px,3.4vw,23px);line-height:1.4;
  color:var(--sienna);margin:38px 0 12px;text-wrap:balance;
}
.g-article p{font-size:16.5px;color:var(--ink);margin-bottom:16px;max-width:64ch}
.g-article ul{padding-inline-start:20px;margin:0 0 18px}
.g-article li{font-size:16.5px;color:var(--ink);margin-bottom:8px;max-width:62ch}
.g-article a{color:var(--sienna);text-decoration:underline;text-underline-offset:2px}
.g-article a:hover{color:var(--sienna-deep)}

/* opening paragraph — sets the tone, slightly larger */
.g-lede{font-size:18px!important;color:var(--ink-soft)!important;line-height:1.75}

/* the "מתי מגיעים?" beat */
.g-quote{
  font-family:var(--font-display);
  font-size:clamp(21px,4vw,26px);color:var(--sienna);
  text-align:center;margin:6px 0 22px;line-height:1.4;
}

/* ── TIP BOX — a parent's note pinned into the journal ──
   Selectors are scoped under .g-article so they outrank the
   article's own p / ul / li rules (see the CTA note below). */
.g-tip{
  position:relative;
  background:var(--paper-hi);
  background-image:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(46,32,20,.055) 27px 28px);
  border:1.5px dashed var(--teal);
  border-radius:var(--r);
  padding:22px 24px 20px;
  margin:40px 0;
  box-shadow:0 2px 5px rgba(46,32,20,.07);
}
.g-tip::before{
  content:'';position:absolute;top:-7px;inset-inline-start:26px;
  width:52px;height:14px;
  background:rgba(200,150,42,.42);
  border:1px solid rgba(46,32,20,.16);
  transform:rotate(-2.5deg);
  border-radius:1px;
}
.g-article .g-tip h2{
  font-family:var(--font-display);
  font-size:clamp(18px,3.2vw,21px);line-height:1.4;
  color:var(--teal);margin:0 0 4px;
}
.g-article .g-tip p{font-size:14.5px;color:var(--ink-soft);margin:0 0 14px;max-width:52ch}
.g-article .g-tip p.g-tip-end{margin:14px 0 0;font-style:italic}
.g-article .g-tip ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.g-article .g-tip li{
  position:relative;padding-inline-start:26px;margin:0;
  font-size:15.5px;line-height:1.6;color:var(--ink);max-width:54ch;
}
.g-article .g-tip li::before{
  content:'';position:absolute;inset-inline-start:2px;top:8px;
  width:11px;height:6px;
  /* physical borders on purpose — logical ones mirror under RTL
     and turn the checkmark into a chevron */
  border-left:2.2px solid var(--gold);border-bottom:2.2px solid var(--gold);
  transform:rotate(-45deg);
}
.g-tip li b{font-weight:700}
.g-tip li span{color:var(--ink-soft);font-size:14.5px}

/* ── TIP BOX, warm variant ──
   Lets a guide carry two callouts without them looking identical. */
.g-tip.g-tip--idea{border-color:var(--sienna);border-style:solid}
.g-tip.g-tip--idea::before{background:rgba(156,63,22,.28)}
.g-article .g-tip--idea h2{color:var(--sienna)}
.g-article .g-tip--idea li::before{border-color:var(--sienna)}

/* ── PICKER — "pick one for me", situation-first entry point ──
   Reusable for any guide long enough that a reader arrives
   mid-problem rather than at the top. */
.g-picker{
  background:var(--band);
  border-radius:var(--r);
  padding:20px 20px 12px;
  margin:34px 0 40px;
  box-shadow:0 3px 10px rgba(46,32,20,.16);
}
.g-article .g-picker h2{
  font-family:var(--font-display);font-size:19px;
  color:var(--gold-hi);margin:0 0 3px;
}
.g-article .g-picker p{font-size:13.5px;color:rgba(242,231,206,.7);margin:0 0 12px;max-width:46ch}
.g-picker-list{display:grid;gap:2px}
.g-article a.g-pick{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:13px 12px;border-radius:7px;
  text-decoration:none;color:var(--paper);
  border-bottom:1px solid rgba(242,231,206,.13);
  transition:background .12s ease;
}
.g-picker-list a.g-pick:last-child{border-bottom:none}
.g-article a.g-pick:hover{background:rgba(242,231,206,.09);color:var(--paper)}
.g-article a.g-pick:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-2px}
.g-pick-q{font-size:15.5px;font-weight:500;flex:1 1 auto;min-width:60%}
.g-pick-a{
  font-size:15px;font-weight:700;color:var(--gold-hi);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(239,198,112,.4);
}
.g-article a.g-pick:hover .g-pick-a{text-decoration-color:var(--gold-hi)}

/* ── GAME CARD — a spec card: title, meta row, then the explanation.
   Deliberately generic (.g-game / .g-game-meta) so route stops,
   printables and anything else with "how long / who for / what you
   need" can reuse it without a second component. */
.g-game{
  border-top:1px solid var(--rule);
  padding:22px 0 4px;
  /* clears the sticky banner when jumped to from the picker */
  scroll-margin-top:86px;
}
.g-article .g-game h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(18px,3.2vw,21px);line-height:1.4;
  color:var(--ink);margin:0 0 10px;
}
.g-game-meta{
  display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:13px;
}
.g-game-meta span{
  display:inline-block;
  background:var(--paper-hi);border:1px solid var(--rule);
  border-radius:100px;padding:3px 11px;
  font-size:12.5px;color:var(--ink-soft);line-height:1.6;
}
.g-article .g-game p{font-size:16px;margin-bottom:11px}
.g-article .g-game p.g-game-eg{
  font-size:14.5px;color:var(--ink-soft);
  border-inline-start:2px solid var(--gold);
  padding:1px 12px;margin:0 0 11px;
}

/* ── SECTION NOTE — orientation line under a section heading.
   For geographic guides: where you are, how far in, what's ahead. */
.g-article p.g-section-note{
  font-size:13.5px;color:var(--ink-soft);
  margin:-4px 0 16px;padding-bottom:12px;
  border-bottom:1px solid var(--line,rgba(196,168,118,.5));
  max-width:60ch;
}
.g-article p.g-section-note b{color:var(--teal);font-weight:700}

/* ── WARN — short, unmissable practical warning.
   Opening hours, heat, fuel: things that ruin a trip if missed. */
.g-warn{
  display:flex;gap:11px;align-items:flex-start;
  background:rgba(156,63,22,.07);
  border:1px solid rgba(156,63,22,.3);
  border-radius:var(--r);
  padding:14px 16px;margin:24px 0;
}
.g-warn-mark{font-size:16px;line-height:1.5;flex-shrink:0}
.g-article .g-warn p{font-size:14.5px;color:var(--ink);margin:0;max-width:60ch}
.g-article .g-warn p + p{margin-top:7px}
.g-article .g-warn b{color:var(--sienna-deep)}

/* ── CTA (deliberately quiet) ── */
.g-cta{
  background:var(--paper-hi);
  border:1.5px solid var(--rule);border-radius:var(--r);
  padding:26px 24px;margin:44px 0 0;text-align:center;
  box-shadow:0 2px 5px rgba(46,32,20,.06);
}
.g-cta h2{
  font-family:var(--font-display);font-size:21px;color:var(--ink);
  margin:0 0 10px;line-height:1.4;
}
.g-cta p{font-size:15.5px;color:var(--ink-soft);margin:0 auto 20px;max-width:44ch}
/* NOTE: selectors are scoped to .g-cta so they outrank `.g-article a`,
   which would otherwise repaint the button label sienna-on-sienna. */
.g-cta a.g-cta-btn{
  display:inline-block;
  background:var(--sienna);color:var(--paper-hi);
  font-family:var(--font);font-size:16px;font-weight:700;
  padding:13px 34px;border-radius:100px;text-decoration:none;
  border:1.5px solid var(--sienna-deep);
  box-shadow:0 3px 0 var(--sienna-deep);
  transition:transform .12s ease,box-shadow .12s ease;
}
.g-cta a.g-cta-btn:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--sienna-deep);color:var(--paper-hi)}
.g-cta a.g-cta-btn:active{transform:translateY(3px);box-shadow:none}
.g-cta a.g-cta-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── first-person credibility note ── */
.g-note{
  font-size:14.5px;color:var(--ink-soft);line-height:1.75;
  border-inline-start:3px solid var(--gold);
  padding:2px 16px;margin:38px 0 0;max-width:60ch;
}

/* ── RELATED GUIDES ── */
.g-related{max-width:700px;margin:0 auto;padding:0 22px 56px}
.g-related h2{
  font-family:var(--font-display);font-size:20px;color:var(--ink);
  margin:48px 0 16px;padding-top:30px;border-top:1px solid var(--rule);
}
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.g-card{
  display:block;background:var(--paper-hi);
  border:1.5px solid var(--rule);border-radius:var(--r);
  padding:16px 18px;text-decoration:none;
  transition:transform .12s ease,border-color .12s ease;
}
a.g-card:hover{transform:translateY(-2px);border-color:var(--sienna)}
a.g-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.g-card-title{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.45;margin-bottom:5px}
a.g-card:hover .g-card-title{color:var(--sienna)}
.g-card-sub{font-size:13px;color:var(--ink-soft);line-height:1.55}
.g-card.soon{opacity:.62;cursor:default}
.g-soon-flag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--teal);background:rgba(31,100,104,.1);
  border-radius:3px;padding:1px 7px;margin-bottom:7px;
}

/* ── INDEX PAGE ── */
.g-index{max-width:700px;margin:0 auto;padding:26px 22px 56px}
.g-index h1{
  font-family:var(--font-display);
  font-size:clamp(28px,5.4vw,36px);line-height:1.3;
  color:var(--ink);margin-bottom:12px;text-wrap:balance;
}
.g-index-sub{font-size:17px;color:var(--ink-soft);line-height:1.75;max-width:52ch;margin-bottom:32px}

/* ── FOOTER ── */
.g-footer{
  text-align:center;padding:26px 16px 34px;
  font-size:12px;color:var(--ink-soft);
  border-top:1px solid var(--rule);
  max-width:700px;margin:0 auto;
}
.g-footer a{color:var(--ink-soft);text-decoration:none;margin:0 8px}
.g-footer a:hover{color:var(--sienna)}

@media (max-width:520px){
  .g-cards{grid-template-columns:1fr}
  .g-article p,.g-article li{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}