/* hc-m-home.css — phone-first fixes (home); owned by one workstream, see docs
   Scope: the home page `/` (HomeV5.astro) and the Japan route map (JapanMap.astro, also on /יפן/).
   Loaded after hc-v5-1..5 and hc-m-base. Phone rules live in max-width queries, so desktop is unchanged.
   Elements that exist only for phones (.hero-sub, .pin) are hidden by default. */

.hero-sub,.umap .pin{display:none}

/* ================= Home "עכשיו אמריקה" — new-post cards (all widths; demo cards on preview builds) ================= */
.usa .ucards{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;max-width:470px}
.usa .ucard{display:flex;align-items:center;gap:12px;padding:8px;padding-inline-end:12px;background:var(--cream);color:var(--ink);text-decoration:none;border-radius:16px;box-shadow:0 12px 24px -18px rgba(0,0,0,.7);transition:transform .15s,box-shadow .15s}
.usa .ucard:hover{transform:translateY(-2px);box-shadow:0 16px 28px -18px rgba(0,0,0,.8)}
.usa .ucard:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.usa .ucard::after{content:"";flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.usa .ucard-img{flex:none;align-self:stretch;width:84px;min-height:84px;border-radius:11px;overflow:hidden;background:var(--line)}
.usa .ucard-img img{display:block;width:100%;height:100%;object-fit:cover}
.usa .ucard-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-block:2px}
.usa .ucard-t{font:600 16px/1.35 var(--ui);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.usa .ucard-x{font:400 14px/1.45 var(--ui);color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.usa .tags{display:flex;flex-wrap:wrap;gap:6px}
.usa .tag,.usa .gtag{font:600 13px/1.25 var(--ui);font-style:normal;letter-spacing:0}
.usa .tag{padding:2px 8px;border-radius:999px}
.usa .tag.demo{background:var(--ink);color:#fff}
.usa .tag.guest{background:var(--marker);color:var(--ink)}
.usa .bub .gtag{display:block;color:var(--marker);font-size:13px}
.usa .bub b:has(.gtag){border-radius:12px;padding:3px 10px;text-align:center;line-height:1.1}
@media (prefers-reduced-motion:reduce){.usa .ucard{transition:none}.usa .ucard:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.bub.home i{animation:none}}

/* ================= Japan route map (JapanMap.astro) — all widths =================
   Owner round 2: stations must look clickable, the panel must obviously lead to the posts, light panel
   (not black) on desktop, and map/panel balanced on desktop for 1 or 4 chapters. Text in the component is
   unchanged (it is inside [data-hc-main] on /יפן/); "לקריאת הפרק" is CSS generated content. */
.mapbox .map h3 span{display:inline-flex;align-items:center;gap:6px;margin-inline-start:10px;padding:4px 12px 4px 10px;border-radius:999px;background:#FFF3C4;border:1px solid #EBCB63;color:var(--ink);font:600 14px/1.3 var(--ui);vertical-align:middle}
.mapbox .map h3 span::before{content:"";flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2 2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2 2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2 2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-6-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E") center/contain no-repeat}
.mapbox .stn{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mapbox .stn .hit{fill:transparent;stroke:none;pointer-events:all}
.mapbox .stn text{pointer-events:all;stroke:transparent;stroke-width:9px;stroke-linejoin:round;paint-order:stroke;transition:fill .15s}
.mapbox .stn .halo{fill:var(--marker);opacity:0;transition:opacity .15s}
.mapbox .stn .o{transition:fill .15s,stroke .15s}
.mapbox .stn:hover .halo{opacity:.5}
.mapbox .stn:hover .o{stroke:var(--pen);fill:#FFF3C4}
.mapbox .stn:hover text:not(.ch){fill:var(--pen-2)}
.mapbox .stn:active .o{fill:var(--marker)}
.mapbox .stn:focus-visible .halo{opacity:1;fill:none;stroke:var(--pen-2);stroke-width:3}
.mapbox .stn[aria-pressed="true"] .halo{opacity:.6}
.mapbox .stn[aria-pressed="true"] .o{fill:var(--marker);stroke:var(--pen);stroke-width:4}
.mapbox .stn[aria-pressed="true"] text:not(.ch){fill:var(--ink);stroke:var(--marker)}
/* station panel: light card; photo + title link to the station's first chapter; chapter rows are link rows */
.mapbox .panel{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.mapbox .pimg{display:block;overflow:hidden;background:var(--surface)}
.mapbox .pimg img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s}
.mapbox .pimg:hover img{transform:scale(1.03)}
.mapbox .panel .in{padding:16px 20px 14px}
.mapbox .panel .pn{display:flex}
.mapbox .pn-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);text-decoration:none}
.mapbox .pn-link b{font:400 30px/1.1 var(--display)}
.mapbox .pn-link::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .15s,background-color .15s}
.mapbox .pn-link:hover b{color:var(--pen-2)}
.mapbox .pn-link:hover::after{background-color:var(--pen-2);transform:translateX(-3px)}
.mapbox .panel blockquote{font:400 16px/1.6 var(--ui);color:var(--ink-2);margin:8px 0 4px;padding-inline-start:12px;border-inline-start:3px solid var(--marker)}
.mapbox .panel .qsrc{font:400 13px/1.4 var(--ui);color:var(--muted);padding-inline-start:15px}
.mapbox .panel ul{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.mapbox .panel li a{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"t t t" "n . c";align-items:center;gap:6px 10px;min-height:48px;padding:11px 6px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background-color .15s}
.mapbox .panel li .t{grid-area:t;font:600 16px/1.45 var(--ui);white-space:normal}
.mapbox .panel li .n{grid-area:n;font:600 13px/1 var(--ui);color:#B53219;background:var(--pen-soft);padding:5px 9px;border-radius:999px;white-space:nowrap}
.mapbox .panel li a::after{grid-area:c;content:"לקריאת הפרק ←";font:600 13px/1 var(--ui);color:#B53219;white-space:nowrap}
.mapbox .panel li a:hover{background:var(--surface)}
.mapbox .panel li a:hover .t{text-decoration:underline;text-decoration-color:var(--pen);text-underline-offset:3px}
.mapbox .panel li a:active{background:var(--surface)}
.mapbox .panel a:focus-visible,.mapbox .stn:focus-visible,.mapbox .chip:focus-visible,.mapbox .to-map:focus-visible{outline:3px solid var(--pen-2);outline-offset:2px}
.mapbox .stn:focus-visible{outline:none}
.mapbox .panel ul::-webkit-scrollbar{width:6px}
.mapbox .panel ul::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* desktop: the panel takes the map's height (it does not size the row); the photo gives way first,
   then the chapter list scrolls inside the panel with a fade at the bottom while rows are hidden */
@media (min-width:901px){
  .mapbox{align-items:stretch}
  .mapbox .panel{height:0;min-height:100%;display:flex;flex-direction:column}
  .mapbox .pimg{flex:1 1 0;min-height:110px}
  .mapbox .pimg img{aspect-ratio:auto}
  .mapbox .panel .in{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
  .mapbox .panel ul{flex:0 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .mapbox .panel ul.more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent)}
}

/* phones & small tablets: chips are the main picker (>=44px); stations stay tappable too */
@media (max-width:900px){
  .mapbox{gap:14px}
  .mapbox .map{display:flex;flex-direction:column;padding:14px 12px 14px;border-radius:20px}
  .mapbox .map h3{order:0;font:600 16px/1.4 var(--ui);margin:0 0 6px;padding-inline:4px}
  .mapbox .map h3 span{display:flex;width:max-content;margin:6px 0 0}
  .mapbox .map svg{order:1}
  .mapbox .legend{order:2;font-size:13px;gap:6px 16px;flex-wrap:wrap;padding-inline:4px;margin-top:4px}
  .mapbox .chips{order:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin:14px 0 0;padding:0;mask-image:none;-webkit-mask-image:none}
  .mapbox .chip{min-height:46px;padding:6px 4px;font:600 15px/1.2 var(--ui);color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:12px;cursor:pointer;transition:background .15s,color .15s}
  .mapbox .chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:inset 0 -4px 0 var(--marker)}
  .mapbox .chip:active{transform:translateY(1px)}
  .mapbox .panel{border-radius:20px}
  .mapbox .panel .in{padding:14px 16px 14px}
  .mapbox .pn-link b{font-size:26px}
  .mapbox .to-map{min-height:48px;margin:14px 0 2px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;font:600 15px var(--ui);border-radius:999px}
}

/* phones: zoomed viewBox (set in hc-v5.js from data-vb-phone), bigger labels, no tiny chapter/sea labels */
@media (max-width:700px){
  .mapbox .stn text{font-size:22px}
  .mapbox .stn .ch,.mapbox .sea{display:none}
  .mapbox .stn .o{r:12px}
  .mapbox .stn[aria-pressed="true"] .o{r:15px;stroke-width:4}
}
@media (prefers-reduced-motion:reduce){.mapbox .pimg img,.mapbox .pn-link::after{transition:none}.mapbox .pimg:hover img{transform:none}}

/* ================= Home page — phones ================= */
@media (max-width:700px){
  #usa,#dest,#about{scroll-margin-top:64px}
  /* ---- hero: say what the site is + three obvious entry buttons, photo below ---- */
  .hero{padding-block:22px 30px}
  .hero-g{gap:22px}
  .hero-t{order:0}
  .hero-p{order:1}
  .hero-t .d1{font-size:34px;line-height:1.12}
  .hero-sub{display:block;margin:12px 0 0;font:400 17px/1.65 var(--ui);color:var(--ink-2);max-width:36ch}
  .hero-links{margin-top:18px;gap:0;justify-items:stretch;border-top:1px solid var(--line)}
  .hlink{display:flex;width:auto;max-width:none;align-items:center;gap:14px;min-height:56px;padding:10px 2px;box-sizing:border-box;
    font:400 20px/1.3 var(--display);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;-webkit-tap-highlight-color:transparent}
  .hlink .doodle{display:block;width:58px;height:15px;stroke-width:2.6}
  .hlink:hover,.hlink:active{color:var(--pen-2)}
  .hlink:active .doodle{transform:translateX(-6px)}
  .hlink:focus-visible{outline:3px solid var(--pen-2);outline-offset:2px}
  .stack{min-height:0;position:relative;margin-bottom:10px}
  .stack figure{position:relative}
  .ph1{inset:auto;transform:none}
  .ph1 img{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:18px}
  .ph1 figcaption{bottom:12px;right:12px;padding:4px 14px;font-size:21px;line-height:1.2;color:var(--ink)}
  .stack .ph2{position:absolute;width:27%;left:-4px;bottom:-12px;transform:rotate(-5deg)}
  .ph2 img{display:block;width:100%;height:auto;border-width:5px}

  /* ---- "עכשיו אמריקה" ---- */
  .usa{padding-block:36px 36px}
  .usa-g{gap:18px}
  .hand-new{font:700 21px/1.1 var(--note);color:var(--ink);background:var(--marker);padding:3px 14px;border-radius:999px;transform:rotate(-4deg);margin:0}
  .hand-new svg{display:none}
  .usa-t .d1{font-size:34px;line-height:1.1;margin-top:12px}
  .usa-t .d1 br{display:none}
  .usa-t .lead{font-size:17px;line-height:1.65;margin:10px 0 0;color:#2a1714;max-width:none}
  /* placeholders ("בקרוב") must not look like cards */
  .usa .notes{display:flex;flex-wrap:nowrap;gap:8px;margin-top:18px}
  .usa .notes li.soon{flex:1 1 0;width:auto;min-width:0;aspect-ratio:auto;transform:none;box-shadow:none;background:rgba(255,255,255,.14);border:1.5px dashed rgba(33,24,22,.6);border-radius:12px;
    padding:8px 12px;flex-direction:row;align-items:center;justify-content:space-between;gap:6px}
  .usa .notes li.soon>b{font:600 14px/1.2 var(--ui);letter-spacing:0;opacity:1;color:#211816}
  .usa .notes li.soon>span{margin:0;font:400 22px/1 var(--display);opacity:.55}
  .usa .ucards{margin-top:20px;max-width:none}
  .usa .ucard-img{width:88px}
  .usa .ucard-x{font-size:15px;-webkit-line-clamp:2}
  /* Roni 2026-10-07: the full post title, never cut with "…" — a touch smaller so it fits in 2–3 lines */
  .usa .ucard-t{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:15px;line-height:1.3}
  /* map is an illustration with labelled pins; the city buttons below are the links */
  .umap{margin:4px 0 0}
  .umap .bub:not(.home){display:none}
  .umap .pin{display:block;position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);border:2px solid var(--cream);z-index:2}
  .umap .pin b{position:absolute;right:calc(100% + 5px);top:50%;transform:translateY(-50%);white-space:nowrap;direction:rtl;font:600 13px/1.5 var(--ui);color:#fff;background:var(--ink);padding:0 8px;border-radius:999px}
  .umap .bub.home b{font:600 13px/1.5 var(--ui);padding:0 8px}
  .usa .usa-also{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
  .usa-also a{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 8px 6px 10px;box-sizing:border-box;background:var(--cream);color:var(--ink);border:0;border-radius:14px;font:600 16px/1.25 var(--ui);text-decoration:none;box-shadow:0 2px 0 rgba(33,24,22,.35)}
  .usa-also a img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--line)}
  .usa-also a span{flex:1;min-width:0}
  .usa-also .gtag{display:table;margin-top:4px;padding:2px 7px;border-radius:999px;background:var(--marker);color:var(--ink)}
  .usa-also a::after{content:"";flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
  .usa-also a:active{transform:translateY(2px);box-shadow:none}
  .usa-also a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

  /* ---- Japan ---- */
  .jp.sec{padding-block:40px}
  .jp-head{gap:6px;margin-bottom:18px}
  .jp-head h2{font-size:40px;line-height:1}
  .jp-head .big-note{font-size:23px;color:var(--pen-2)}
  .jp-head p.lead{font-size:17px;line-height:1.65;margin-top:8px}
  .jp-head .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .jp-head .btn{flex:1 1 auto;justify-content:center;min-height:48px;box-sizing:border-box;padding:10px 16px;font-size:15px}

  /* ---- "איפה עוד היינו?" — whole tile is the link, name on the photo ---- */
  .dests.sec{padding-block:40px}
  .dests-head{display:block;margin-bottom:16px}
  .dests-head .kicker,.about-home .kicker{color:var(--pen-2)}
  .dests-head h2{font:400 28px/1.15 var(--display);margin:6px 0 14px}
  .dfilter{gap:10px}
  .dfilter input{width:100%;box-sizing:border-box;min-height:48px;padding:10px 16px;padding-inline-start:44px;font:500 16px var(--ui);color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F675C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") right 15px center/19px no-repeat;border:1.5px solid var(--ink);border-radius:999px}
  .dfilter input::placeholder{color:var(--muted)}
  .dfilter input:focus-visible{outline:3px solid var(--pen-2);outline-offset:2px}
  .dchips{gap:8px;flex-wrap:nowrap}
  .dchips button{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:44px;padding:0 10px;font:600 15px var(--ui);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:999px}
  .dchips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .dchips button:focus-visible{outline:3px solid var(--pen-2);outline-offset:2px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile,.tile.big{position:relative;display:block;grid-column:auto;aspect-ratio:3/2;transform:none;overflow:hidden;border-radius:14px;background:var(--ink-2);text-decoration:none;box-shadow:0 8px 18px -14px rgba(30,27,24,.7);-webkit-tap-highlight-color:transparent}
  .tile.big{aspect-ratio:4/5}
  .tiles>.tile:nth-child(odd):last-child{grid-column:span 2;aspect-ratio:3/1}
  .tile img,.tile.big img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0;box-shadow:none;background:var(--ink-2)}
  .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,12,.78) 0,rgba(20,16,12,.25) 45%,rgba(20,16,12,0) 70%)}
  .tile .tn,.tile.big .tn{position:absolute;z-index:1;inset-inline:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:10px 12px;text-align:start;font:400 19px/1.15 var(--display);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
  .tile.big .tn{font-size:23px;padding:12px 14px}
  .tile .tn::after{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B18' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/15px no-repeat}
  .tile:hover{transform:none}
  .tile:active{transform:scale(.98)}
  .tile:focus-visible{outline:3px solid var(--pen-2);outline-offset:3px}
  .dempty{margin:18px 0 0}

  /* ---- "מי אנחנו" ---- */
  .about-home.sec{padding-block:40px 48px}
  .about-grid{gap:20px}
  .about-grid figure{transform:none}
  .about-grid figure img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border:0;border-radius:18px;box-shadow:none}
  .about-grid h2{font-size:26px;line-height:1.25;margin:8px 0 10px}
  .about-grid p{font-size:17px;line-height:1.7;margin:0 0 18px}
  .about-grid .btn{min-height:48px;box-sizing:border-box;padding:10px 22px}
  .about-grid .btn:focus-visible,.jp-head .btn:focus-visible{outline:3px solid var(--pen-2);outline-offset:2px}
}
@media (max-width:380px){
  .hero-t .d1,.usa-t .d1{font-size:31px}
  .jp-head h2{font-size:38px}
  .hlink{font-size:16px}
  .tile .tn{font-size:17px}
  .mapbox .chip{font-size:14px}
  .dchips button{font-size:14px;padding:0 6px}
}

/* ================= QA pass (2026-10-02) ================= */
@media (max-width:900px){
}
@media (max-width:700px){
  /* the labelled map pins looked like chips but did nothing: they now open the same city post as the
     buttons below (duplicate links, out of the tab order and hidden from AT); 44px hit area */
  .umap a.pin{text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .umap a.pin{width:44px;height:44px;margin:-22px 0 0 -22px;background:none;border:0;border-radius:0}
  .umap a.pin::before{content:"";position:absolute;left:16px;top:16px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:var(--ink);border:2px solid var(--cream)}
  .umap a.pin b{right:calc(100% - 17px)}
  .umap a.pin b::before{content:"";position:absolute;inset:-10px -6px}
  .umap a.pin:active b{background:var(--pen-2)}
  /* filtered destination grid: no half-empty rows (the two "big" tiles and the odd-last rule assume all 17) */
  .tiles.is-filtered>.tile,.tiles.is-filtered>.tile.big,
  .tiles.is-filtered>.tile:nth-child(odd):last-child{grid-column:auto;aspect-ratio:3/2}
  .tiles.is-filtered>.tile.big .tn{font-size:19px;padding:10px 12px}
  .tiles.is-filtered>.tile.wide{grid-column:span 2;aspect-ratio:3/1}
}

/* ================= Display headings: punctuation (round 2, item 8) =================
   Was a fix for Secular One (Hebrew-only). Since 2026-10-06 the display font is Fredoka (one static 600 file,
   Hebrew + Latin, declared for every weight), so this only stops the browser from faking bold. */
:is(.d1,.about-grid h2,.dests-head h2,.sec-head h2,.mapbox .pn-link b,.panel .pn b,.prose h2,.prow h3,.story h3,.tile .tn,.brand b){font-weight:700;font-synthesis:none}
/* the old dark-panel rule ".panel li span{color:#bbb}" also hit the chapter title span on the light panel */
.mapbox .panel li .t{color:var(--ink)}
.hlink{font-synthesis:none}
@media (max-width:700px){.hlink{font-weight:700}}

/* ================= Japan map: the route draws itself when the map scrolls into view (round 3) =================
   The draw used to lose its dash pattern the moment .pre was removed, so the line appeared at once.
   Keep the dash = path length while drawing (segments one after another), then restore the car dashes. */
.mapbox.draw .seg{stroke-dasharray:var(--len);stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.3,1);transition-delay:calc(var(--i,0) * .14s)}
.mapbox.draw .stn{animation:hc-stn-in .45s both;animation-delay:calc(.2s + var(--si,0) * .1s)}
.mapbox.drawn .seg{stroke-dasharray:none;transition:none}
.mapbox.drawn .seg.car{stroke-dasharray:8 10}
@keyframes hc-stn-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.mapbox .stn{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.mapbox.draw .seg{transition:none}.mapbox.draw .stn{animation:none}}

/* ================= "עכשיו אמריקה": map first, new-post cards as a row under it (round 3) =================
   Desktop: heading + lead beside the map at the top of the section; the 3 cards span the full width below.
   Phones/tablets keep the round-2 order (text, cards, map, city buttons) through grid order. */
@media (min-width:901px){
  .usa .usa-g{align-items:center;row-gap:clamp(22px,3vw,40px)}
  .usa .usa-g>.ucards,.usa .usa-g>.notes{grid-column:1/-1;margin:0}
  .usa .usa-g>.ucards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:none}
  .usa .usa-g>.ucards .ucard{height:100%;box-sizing:border-box}
  .usa .usa-g>.ucards .ucard-x{-webkit-line-clamp:2}
  .usa .usa-g>.notes{display:flex;justify-content:center}
}
@media (max-width:900px){
  /* owner note 2026-10-03: on phones the map comes first, its city list right under it, the post cards after */
  .usa .usa-g>.usa-t{order:0}
  .usa .usa-g>.umap{order:1}
  .usa .usa-g>.usa-also{order:2}
  .usa .usa-g>.ucards,.usa .usa-g>.notes{order:3;margin:10px 0 4px}
  /* Roni's note 2026-10-04: the city list must not look like the post cards below it — it reads as the map's
     legend: outlined pills with the map's pin dot, no photos, no arrows, no tags */
  /* Roni 2026-10-07: 3 + 1 pills on a phone looked broken — an even 2x2 grid, each pill fills its cell */
  .usa .usa-also{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 0}
  .usa-also a{min-height:44px;padding:0 16px;gap:8px;background:transparent;border:1.5px solid rgba(33,24,22,.55);border-radius:999px;box-shadow:none;font:600 15px/1 var(--ui)}
  .usa-also a::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--cream)}
  .usa-also a img,.usa-also a::after,.usa-also .gtag{display:none}
  .usa-also a{justify-content:center}
  .usa-also a span{flex:none;white-space:nowrap}
  .usa-also a:active{transform:none;background:rgba(255,255,255,.18)}
}

/* ================= Desktop hero: entry links in proportion to the headline (round 3) ================= */
@media (min-width:901px){
  .hero-t .d1{font-size:clamp(52px,5.4vw,80px);line-height:1.02}
  .hero-links{margin-top:30px;gap:6px;justify-items:stretch;max-width:520px;border-top:1px solid var(--line)}
  .hlink{display:flex;justify-content:space-between;gap:18px;padding:14px 2px;border-bottom:1px solid var(--line);
    font:700 clamp(22px,1.9vw,27px)/1.25 var(--display);font-synthesis:none;color:var(--ink);text-decoration:none}
  .hlink .doodle{width:78px;height:18px}
  .hlink:hover,.hlink:focus-visible{color:var(--pen-2)}
}

/* ================= Desktop: no thin hand-written font for names (round 3, "איפה עוד היינו?") =================
   Destination tile names and US-map city names in the site's display/UI fonts instead of Amatic. */
@media (min-width:901px){
  .tile .tn{font:700 19px/1.2 var(--display);font-synthesis:none;margin-top:12px;color:var(--ink)}
  .tile.big .tn{font-size:24px}
  .tile:hover .tn{color:var(--pen-2)}
  .usa .bub b{font:600 15px/1.2 var(--ui)}
  .usa .bub .gtag{font:600 12px/1.2 var(--ui)}
  .dests-head h2{font-size:clamp(40px,4.2vw,64px)}
}

/* ================= Japan map panel on phones — calmer (Roni's note 2026-10-04: too busy, too many fonts) =========
   One type family in the panel body, one accent; the chapter number is quiet text, the whole row is the link. */
@media (max-width:900px){
  .mapbox .pn-link b{font-size:24px}
  .mapbox .panel blockquote{font:400 15px/1.55 var(--ui);color:var(--ink-2);border-inline-start-width:2px}
  .mapbox .panel .qsrc{display:none}
  .mapbox .panel li a{grid-template-columns:1fr auto;grid-template-areas:"t c" "n c";gap:2px 12px;min-height:52px;padding:10px 4px}
  .mapbox .panel li .t{font:600 15px/1.45 var(--ui)}
  .mapbox .panel li .n{background:none;padding:0;border-radius:0;font:400 13px/1.3 var(--ui);color:var(--muted)}
  .mapbox .panel li a::after{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
}