/* Miles With Sheri - shared blocks.
   Loaded on every generated page, before the per-page-type design CSS.

   The four mockups each style their own sections, but several blocks are
   reused across page types - blog cards on the continent page, city pills on
   the country page, hero stats on the city page, and so on. Those live here so
   every page type gets them. The palette matches the mockups; a design file
   loaded afterwards always wins, so nothing here overrides your designs. */

.mws-page {
  --mws-green: #2D4F3E;
  --mws-green-light: #3A6B52;
  --mws-terra: #C8553D;
  --mws-cream: #FAF7F2;
  --mws-dark: #1A1A1A;
  --mws-gray: #6B7280;
  --mws-gray-light: #E5E7EB;
  --mws-gray-bg: #F3F4F6;
  --mws-shadow: 0 2px 16px rgba(0, 0, 0, .08);
  --mws-radius: 12px;
  line-height: 1.7;
}

.mws-page img { max-width: 100%; height: auto; }
.mws-page .section { scroll-margin-top: 90px; }

/* ---- Pexels attribution. Required by their terms - don't remove. ---- */
.mws-page .photo-credit {
  font-size: .78rem;
  color: var(--mws-gray);
  margin: .4rem 0 1.2rem;
}
.mws-page .photo-credit a { color: inherit; text-decoration: underline; }

/* ---- hero (country design has its own; this covers the others) ---- */
.mws-page .hero {
  position: relative;
  border-radius: var(--mws-radius);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background: var(--mws-green);
}
.mws-page .hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mws-page .hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2.4rem 2rem 1.6rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .25) 65%, transparent);
  color: #fff;
}
.mws-page .hero-overlay h1 { color: #fff; margin: 0 0 .4rem; }
.mws-page .hero-tagline { color: #f2f2f2; font-size: 1.05rem; margin: 0 0 1rem; }
.mws-page .hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.mws-page .hero-stat {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #d8d8d8;
}
.mws-page .hero-stat strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.mws-page .hero-img {
  width: 100%;
  border-radius: var(--mws-radius);
  display: block;
}

/* ---- blog cards (continent, country, city, blog) ---- */
.mws-page .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
  margin: 1.2rem 0;
}
.mws-page .blog-card {
  display: block;
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .16s, transform .16s;
}
.mws-page a.blog-card:hover { box-shadow: var(--mws-shadow); transform: translateY(-2px); }
.mws-page .blog-card-body { padding: 1.1rem 1.2rem 1.3rem; }
.mws-page .blog-card-body h4 { margin: .5rem 0 .4rem; }
.mws-page .blog-card-body p { margin: 0 0 .7rem; color: #444; font-size: .92rem; }
.mws-page .bc-tag {
  display: inline-block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--mws-terra);
}
.mws-page .bc-link { font-size: .85rem; font-weight: 600; color: var(--mws-green); }

/* ---- pills: nearby cities, other continents, similar destinations ---- */
.mws-page .city-pills,
.mws-page .tag-row,
.mws-page .map-pins,
.mws-page .map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}
.mws-page .city-pill,
.mws-page .pin-tag,
.mws-page .ml-tag {
  display: inline-block;
  padding: .45rem 1.05rem;
  border-radius: 999px;
  background: var(--mws-cream);
  border: 1px solid var(--mws-gray-light);
  font-size: .88rem;
  text-decoration: none;
  color: var(--mws-green);
}
.mws-page a.city-pill:hover { background: #fff; border-color: var(--mws-green); }

/* ---- packing checklist ---- */
.mws-page .check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .5rem;
  margin: 1rem 0;
}
.mws-page .check-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--mws-cream);
  border: 1px solid var(--mws-gray-light);
  border-radius: 8px;
  padding: .6rem .9rem;
  font-size: .92rem;
}
.mws-page .check-box {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid var(--mws-green);
  border-radius: 3px;
}

/* ---- map embed ---- */
.mws-page .map-container,
.mws-page .map-wrap {
  border-radius: var(--mws-radius);
  overflow: hidden;
  border: 1px solid var(--mws-gray-light);
  margin: 1rem 0;
}
.mws-page .map-container iframe { display: block; width: 100%; border: 0; }

/* ---- intro ---- */
.mws-page .intro { margin: 1.4rem 0; }
.mws-page .intro p { font-size: 1.08rem; color: #333; }

/* ---- weather rating colours, shared by the grid and the pills ---- */
.mws-page .good { background: #E8F3EC; }
.mws-page .mixed { background: #FDF4E3; }
.mws-page .poor { background: #FBEAE5; }

/* ---- numbered lists used on country + topic pages ---- */
.mws-page .todo-list { margin: 1rem 0; }
.mws-page .todo-img {
  width: 150px;
  flex: 0 0 150px;
  border-radius: 8px;
  object-fit: cover;
  align-self: flex-start;
}

/* ---- itinerary list (country) ---- */
.mws-page .itin-list { margin: .6rem 0 1.4rem; }
.mws-page .itin-day {
  border-left: 3px solid var(--mws-green-light);
  padding: .2rem 0 .2rem 1rem;
  margin: .7rem 0;
}
.mws-page .itin-day p { margin: .25rem 0 0; color: #444; }

/* ---- continent route + festival cards ---- */
.mws-page .itin-card,
.mws-page .fest-item {
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: 1.1rem 1.2rem;
  margin: .7rem 0;
  background: #fff;
}
.mws-page .fest-list { margin: 1rem 0; }
.mws-page .fest-item { display: flex; gap: 1rem; align-items: flex-start; }
.mws-page .fest-item p { margin: .3rem 0 0; color: #444; }
.mws-page .fest-month {
  flex: 0 0 auto;
  background: var(--mws-green);
  color: #fff;
  border-radius: 6px;
  padding: .25rem .7rem;
  font-size: .78rem;
  font-weight: 700;
}

/* ---- blog sidebar cards rendered inline in the body ---- */
.mws-page .sidebar-card {
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  background: var(--mws-cream);
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
}
.mws-page .sidebar-card h4 { margin: 0 0 .7rem; }
.mws-page .pack-list { display: grid; gap: .45rem; }
.mws-page .pack-item {
  background: #fff;
  border: 1px solid var(--mws-gray-light);
  border-radius: 8px;
  padding: .55rem .85rem;
  font-size: .9rem;
}
.mws-page .toc-link {
  display: block;
  padding: .3rem 0;
  font-size: .9rem;
  color: var(--mws-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.mws-page .toc-link:hover { color: var(--mws-terra); }

/* ---- breadcrumb ---- */
.mws-page .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .85rem;
  color: var(--mws-gray);
  margin-bottom: 1rem;
}
.mws-page .breadcrumb a { color: var(--mws-green); text-decoration: none; }

@media (max-width: 640px) {
  .mws-page .hero { min-height: 260px; }
  .mws-page .hero-overlay { padding: 1.6rem 1.2rem 1.2rem; }
  .mws-page .hero-stats { gap: 1rem; }
  .mws-page .todo-img { display: none; }
}

/* ==========================================================================
   Cross-design fallbacks.

   Each mockup styles its own sections, but the templates reuse a few blocks
   across page types: the country page's fact groups appear on the continent
   page, the city page's fact cards appear on the country page, and so on.
   These are plain fallbacks so nothing ever renders unstyled. They load
   before the per-page-type design CSS, so your designs always win.
   ========================================================================== */

.mws-page .section { margin: 2.6rem 0; }
.mws-page .section-divider {
  width: 54px;
  height: 3px;
  background: var(--mws-terra);
  border-radius: 2px;
  margin-bottom: .9rem;
}
.mws-page .sec-label,
.mws-page .sec-eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mws-terra);
  margin-bottom: .3rem;
}
.mws-page .section > h2 { margin: .2rem 0 .6rem; }

/* table of contents */
.mws-page .toc {
  background: var(--mws-cream);
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: 1.3rem 1.5rem;
  margin: 1.6rem 0;
}
.mws-page .toc h3 { margin: 0 0 .8rem; }
.mws-page .toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .4rem .9rem;
}
.mws-page .toc-grid a {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  color: var(--mws-dark);
  text-decoration: none;
  padding: .2rem 0;
}
.mws-page .toc-grid a:hover { color: var(--mws-terra); }
.mws-page .toc-num { font-size: .72rem; font-weight: 700; color: var(--mws-terra); }
.mws-page .toc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mws-terra);
  flex: 0 0 6px;
}

/* stats bar */
.mws-page .stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .8rem;
  background: var(--mws-cream);
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0;
}
.mws-page .stat-item { text-align: center; }
.mws-page .stat-item strong { display: block; font-size: 1.05rem; }
.mws-page .stat-item span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mws-gray);
}

/* fact groups (country style) and fact cards (city style) */
.mws-page .facts-grid,
.mws-page .fact-cards,
.mws-page .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
  margin: 1.1rem 0;
}
.mws-page .fact-group,
.mws-page .fact-card {
  background: #fff;
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: 1.2rem 1.3rem;
}
.mws-page .fact-group h3,
.mws-page .fact-card h3 { margin: 0 0 .7rem; font-size: 1rem; }
.mws-page .fact-row,
.mws-page .fr {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  font-size: .9rem;
}
.mws-page .fact-row:last-child,
.mws-page .fr:last-child { border-bottom: 0; }
.mws-page .fact-label,
.mws-page .fr-label { color: var(--mws-gray); flex: 0 0 40%; }
.mws-page .fact-value,
.mws-page .fr-val { text-align: right; font-weight: 500; }
.mws-page .fr-val:only-child { text-align: left; font-weight: 400; }

/* callout */
.mws-page .callout {
  background: #FDF4E3;
  border-left: 4px solid #E0A33E;
  border-radius: 8px;
  padding: .9rem 1.2rem;
  margin: 1rem 0;
  font-size: .93rem;
}

/* FAQ */
.mws-page .faq-item {
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: 1rem 1.2rem;
  margin: .6rem 0;
  background: #fff;
}
.mws-page .faq-q { font-weight: 700; margin-bottom: .4rem; }
.mws-page .faq-a { color: #444; font-size: .93rem; }

/* tables */
.mws-page .visa-table,
.mws-page .budget-compare {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .92rem;
}
.mws-page .visa-table th,
.mws-page .budget-compare th {
  text-align: left;
  background: var(--mws-cream);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mws-gray);
  padding: .6rem .7rem;
}
.mws-page .visa-table td,
.mws-page .budget-compare td {
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--mws-gray-light);
}
.mws-page .budget-compare .cheap { color: var(--mws-green); font-weight: 600; }

/* budget tier cards */
.mws-page .budget-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.1rem 0;
}
.mws-page .budget-card {
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: 1.2rem;
  background: #fff;
}
.mws-page .budget-card h4 { margin: 0 0 .3rem; }
.mws-page .budget-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--mws-green);
  margin-bottom: .5rem;
}
.mws-page .budget-card p { margin: 0; font-size: .9rem; color: #444; }

/* weather, all three shapes */
.mws-page .weather-grid,
.mws-page .weather-pills,
.mws-page .weather-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: .5rem;
  margin: 1.1rem 0;
}
.mws-page .weather-month,
.mws-page .wp,
.mws-page .ws-month {
  border: 1px solid var(--mws-gray-light);
  border-radius: 10px;
  padding: .7rem .5rem;
  text-align: center;
  font-size: .82rem;
}
.mws-page .month-name,
.mws-page .wp-month,
.mws-page .m-name { font-weight: 700; margin-bottom: .2rem; }
.mws-page .temp,
.mws-page .wp-temp { font-size: 1rem; }
.mws-page .rain,
.mws-page .wp-rain,
.mws-page .m-note { color: var(--mws-gray); font-size: .76rem; }
.mws-page .ws-month.best { background: #E8F3EC; border-color: var(--mws-green-light); }

/* style chips */
.mws-page .style-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0; }
.mws-page .style-chip {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  border: 1px solid var(--mws-gray-light);
  border-radius: 999px;
  padding: .5rem 1.05rem;
  font-size: .88rem;
}
.mws-page .sc-emoji { font-size: 1.05rem; }

/* image cards: continent country cards, country city cards, highlight cards */
.mws-page .country-grid,
.mws-page .highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem;
  margin: 1.1rem 0;
}
.mws-page .country-card,
.mws-page .city-card,
.mws-page .highlight-card {
  display: block;
  position: relative;
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  min-height: 180px;
}
.mws-page .country-card img,
.mws-page .city-card img,
.mws-page .highlight-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.mws-page .country-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 1rem .9rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
  color: #fff;
}
.mws-page .country-card-overlay h4 { margin: 0; color: #fff; }
.mws-page .cc-sub { font-size: .78rem; color: #e2e2e2; }
.mws-page .city-card-body,
.mws-page .highlight-card-body { padding: 1rem 1.1rem 1.2rem; }
.mws-page .city-card-body h4,
.mws-page .highlight-card-body h4 { margin: .3rem 0 .4rem; }
.mws-page .guides-count { margin: 0; font-size: .84rem; color: var(--mws-terra); }
.mws-page .hl-tag {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mws-terra);
}
.mws-page .highlight-card-body p { margin: 0; font-size: .9rem; color: #444; }

/* icon + text rows (continent things to do) */
.mws-page .hfact-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin: 1.1rem 0;
}
.mws-page .hfact {
  display: flex;
  gap: .9rem;
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: 1.1rem;
  background: #fff;
}
.mws-page .hfact-icon { font-size: 1.6rem; line-height: 1; }
.mws-page .hfact-text h4 { margin: 0 0 .3rem; }
.mws-page .hfact-text p { margin: 0; font-size: .9rem; color: #444; }

/* food rows */
.mws-page .food-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .8rem;
  margin: 1.1rem 0;
}
.mws-page .food-item,
.mws-page .food-card {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: .9rem 1rem;
  background: #fff;
}
.mws-page .food-card { flex-direction: column; }
.mws-page .food-card h4 { margin: .3rem 0 .2rem; }
.mws-page .food-card p { margin: 0; font-size: .88rem; color: #444; }
.mws-page .f-emoji,
.mws-page .fe { font-size: 1.4rem; line-height: 1; }
.mws-page .f-origin { display: block; font-size: .78rem; color: var(--mws-gray); }

/* numbered rows */
.mws-page .todo-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--mws-gray-light);
  padding: 1.1rem 0;
}
.mws-page .todo-item:last-child { border-bottom: 0; }
.mws-page .todo-num {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mws-green);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mws-page .todo-content { flex: 1 1 auto; }
.mws-page .todo-content h4 { margin: 0 0 .35rem; }
.mws-page .todo-content p { margin: 0 0 .5rem; color: #444; }

/* neighbourhoods, day trips, shops, practical info, hotels, attractions */
.mws-page .hood-grid,
.mws-page .daytrip-grid,
.mws-page .shop-grid,
.mws-page .prac-grid,
.mws-page .hotel-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.1rem 0;
}
.mws-page .hood-card,
.mws-page .daytrip-card,
.mws-page .shop-item,
.mws-page .prac-item,
.mws-page .hotel-card,
.mws-page .attr-item {
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: 1.1rem 1.2rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: block;
}
.mws-page .hood-card h4,
.mws-page .daytrip-card h4 { margin: 0 0 .35rem; }
.mws-page .hood-card p,
.mws-page .daytrip-card p,
.mws-page .shop-item p { margin: 0 0 .5rem; font-size: .9rem; color: #444; }
.mws-page .hood-for { display: flex; flex-wrap: wrap; gap: .35rem; }
.mws-page .hood-tag {
  font-size: .72rem;
  background: var(--mws-cream);
  border: 1px solid var(--mws-gray-light);
  border-radius: 999px;
  padding: .2rem .6rem;
}
.mws-page .dt-dist { font-size: .8rem; color: var(--mws-terra); margin-bottom: .35rem; }
.mws-page .si, .mws-page .pi-icon { font-size: 1.3rem; display: block; margin-bottom: .4rem; }
.mws-page .prac-item strong { display: block; font-size: .88rem; }
.mws-page .prac-item span { font-size: .88rem; color: #444; }

/* attractions list (city) */
.mws-page .attr-list { display: grid; gap: 1rem; margin: 1.1rem 0; }
.mws-page .attr-item { display: flex; gap: 1.1rem; align-items: flex-start; padding: 0; overflow: hidden; }
.mws-page .attr-img { width: 210px; flex: 0 0 210px; height: 150px; object-fit: cover; }
.mws-page .attr-body { padding: 1.1rem 1.2rem 1.1rem 0; }
.mws-page .attr-body h4 { margin: 0 0 .35rem; }
.mws-page .attr-body p { margin: 0 0 .5rem; color: #444; font-size: .93rem; }
.mws-page .attr-meta { font-size: .82rem; color: var(--mws-terra); }

/* hotels */
.mws-page .hotel-card { padding: 0; overflow: hidden; }
.mws-page .hotel-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.mws-page .hotel-card-body { padding: 1rem 1.1rem 1.2rem; }
.mws-page .hotel-tier {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mws-terra);
}
.mws-page .hotel-card-body h4 { margin: .3rem 0 .2rem; }
.mws-page .hotel-price { font-weight: 700; color: var(--mws-green); margin-bottom: .4rem; }
.mws-page .hotel-card-body p { margin: 0; font-size: .89rem; color: #444; }

/* city itinerary timeline */
.mws-page .itin-timeline { margin: .8rem 0 1.6rem; }
.mws-page .itin-step { display: flex; gap: 1rem; align-items: flex-start; }
.mws-page .itin-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 16px;
  align-self: stretch;
}
.mws-page .itin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mws-terra);
  margin-top: .4rem;
}
.mws-page .itin-step-body { padding: 0 0 1.1rem; }
.mws-page .is-label { font-weight: 700; display: block; margin-bottom: .2rem; }
.mws-page .itin-step-body p { margin: 0; color: #444; }

/* tag pills */
.mws-page .tag,
.mws-page .ptag {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .82rem;
  background: var(--mws-cream);
  border: 1px solid var(--mws-gray-light);
}
.mws-page .tag-green { color: var(--mws-green); }

/* blog post header */
.mws-page .post-header { margin-bottom: 1.4rem; }
.mws-page .post-cat {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mws-terra);
}
.mws-page .post-subtitle { font-size: 1.1rem; color: #444; margin: .5rem 0 .8rem; }
.mws-page .post-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--mws-gray);
}
.mws-page .meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mws-gray-light);
}

/* blog numbered entries */
.mws-page .attraction-entry { margin: 2.4rem 0; scroll-margin-top: 90px; }
.mws-page .attraction-entry h2 { display: flex; gap: .6rem; align-items: baseline; }
.mws-page .attr-num { color: var(--mws-terra); font-weight: 800; }
.mws-page .attraction-entry .attr-img {
  width: 100%;
  flex: none;
  height: auto;
  max-height: 430px;
  border-radius: var(--mws-radius);
  margin: .8rem 0 1rem;
}
.mws-page .prac-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .7rem;
  background: var(--mws-cream);
  border: 1px solid var(--mws-gray-light);
  border-radius: var(--mws-radius);
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.mws-page .pb-item { display: flex; gap: .6rem; align-items: flex-start; }
.mws-page .pb-icon { font-size: 1.1rem; line-height: 1.3; }
.mws-page .pb-text { font-size: .86rem; }
.mws-page .pb-text strong {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mws-gray);
}
.mws-page .pro-tip {
  display: flex;
  gap: .7rem;
  background: #E8F3EC;
  border-left: 4px solid var(--mws-green);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  margin: 1rem 0;
  font-size: .93rem;
}
.mws-page .pt-icon { font-size: 1.1rem; line-height: 1.3; }
.mws-page .page-w { margin: 1.2rem 0; }

@media (max-width: 640px) {
  .mws-page .attr-item { flex-direction: column; }
  .mws-page .attr-img { width: 100%; flex: none; height: 200px; }
  .mws-page .attr-body { padding: 0 1.1rem 1.1rem; }
}