*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ink:       #111010;
      --ink2:      #444240;
      --ink3:      #7A7875;
      --paper:     #F8F6F2;
      --surface:   #FFFFFF;
      --line:      #E8E5E0;
      --gold:      #B07D3A;
      --gold-bg:   #F5EDD8;
      --accent:    #2D2926;
      --r:         12px;
      --max:       1080px;
    }

    html { scroll-behavior: smooth; }
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Typography ── */
    .display {
      font-family: 'Fraunces', serif;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
    }
    .serif { font-family: 'Fraunces', serif; }
    a { color: var(--gold); text-decoration: none; }
    a:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* ── Layout ── */
    .wrap { max-width: var(--max); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

    /* ── Header ── */
    .site-header {
      background: var(--surface);
      border-bottom: 1px solid var(--line);
      position: sticky; top: 0; z-index: 50;
    }
    .header-inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 60px;
    }
    .logo {
      font-family: 'Fraunces', serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--ink);
      letter-spacing: -0.02em;
    }
    .logo em { color: var(--gold); font-style: italic; }
    .breadcrumb {
      font-size: 0.75rem; color: var(--ink3);
      display: flex; gap: 5px; align-items: center;
    }
    .breadcrumb a { color: var(--ink3); }
    .breadcrumb a:hover { color: var(--gold); text-decoration: none; }

    /* ── Hero ── */
    .hero {
      background: var(--accent);
      padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 60px);
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 80% at 80% 50%, rgba(176,125,58,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(176,125,58,0.08) 0%, transparent 60%);
      pointer-events: none;
    }
    .hero-inner { position: relative; }
    .hero-pill {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(176,125,58,0.2);
      color: #D4A055;
      font-size: 0.72rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.1em;
      padding: 5px 12px; border-radius: 100px;
      margin-bottom: 20px;
    }
    .hero-pill-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #D4A055; flex-shrink: 0;
    }
    .hero h1 {
      font-size: clamp(1.9rem, 5vw, 3.2rem);
      color: #FFFFFF;
      margin-bottom: 14px;
    }
    .hero-meta {
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
      font-size: 0.85rem; color: rgba(255,255,255,0.55);
    }
    .hero-meta-item {
      display: flex; align-items: center; gap: 6px;
    }
    .hero-meta-item svg { opacity: 0.6; }

    /* ── Grid ── */
    .content-grid {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 24px;
      padding-block: 36px;
      align-items: start;
    }

    /* ── Section titles ── */
    .section-label {
      font-size: 0.7rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--ink3); margin-bottom: 14px;
    }

    /* ── Cards ── */
    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r);
      overflow: hidden;
    }
    .card + .card, .card + section { margin-top: 16px; }
    .card-body { padding: 20px 24px; }

    /* ── Info card ── */
    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }
    .info-cell {
      padding: 16px 0;
      border-bottom: 1px solid var(--line);
    }
    .info-cell:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--line); }
    .info-cell:nth-child(even) { padding-left: 24px; }
    .info-cell:nth-last-child(-n+2) { border-bottom: none; }
    .info-label {
      font-size: 0.7rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--ink3); margin-bottom: 4px;
    }
    .info-value {
      font-size: 0.9rem; font-weight: 500; color: var(--ink);
    }
    .info-value a { color: var(--ink); font-weight: 500; }
    .info-value a:hover { color: var(--gold); }

    /* ── Description ── */
    .desc-text {
      font-size: 0.9rem; line-height: 1.75; color: var(--ink2);
    }
    .desc-text a { color: var(--gold); font-weight: 500; }

    /* ── Sidebar ── */
    .sidebar { display: flex; flex-direction: column; gap: 16px; }

    /* ── Address card ── */
    .addr-name {
      font-family: 'Fraunces', serif;
      font-size: 1rem; font-weight: 700;
      color: var(--ink); margin-bottom: 12px;
    }
    .addr-row {
      display: flex; gap: 10px; align-items: flex-start;
      font-size: 0.85rem; color: var(--ink2);
      margin-bottom: 8px;
    }
    .addr-row svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); }
    .addr-divider {
      height: 1px; background: var(--line); margin: 14px 0;
    }
    .badge-year {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--gold-bg); color: var(--gold);
      font-size: 0.75rem; font-weight: 600;
      padding: 4px 10px; border-radius: 6px;
    }
    .btn-map {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      background: var(--ink); color: #fff;
      font-size: 0.82rem; font-weight: 600;
      padding: 11px 16px; border-radius: 8px;
      margin-top: 14px; transition: background 0.15s;
      letter-spacing: 0.01em;
    }
    .btn-map:hover { background: var(--gold); color: #fff; text-decoration: none; }

    /* ── Map placeholder ── */
    .map-box {
      margin-top: 14px; height: 180px;
      background: var(--paper); border-radius: 8px;
      border: 1px solid var(--line);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 8px; color: var(--ink3); font-size: 0.78rem;
		overflow:hidden;
    }

    /* ── Region links ── */
    .region-links { display: flex; flex-direction: column; gap: 10px; }
    .region-link {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px;
      border: 1px solid var(--line); border-radius: 8px;
      background: var(--surface);
      font-size: 0.82rem; font-weight: 500; color: var(--ink2);
      transition: border-color 0.15s, color 0.15s;
    }
    .region-link:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
    .region-link svg { flex-shrink: 0; color: var(--gold); opacity: 0.7; }

    /* ── Nearby ── */
    .nearby-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .nearby-item {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 10px; padding: 14px 16px;
      transition: border-color 0.15s, transform 0.15s;
    }
    .nearby-item:hover { border-color: var(--gold); transform: translateY(-1px); }
    .nearby-name {
      font-size: 0.85rem; font-weight: 600; color: var(--ink);
      display: block; margin-bottom: 4px;
    }
    .nearby-name:hover { color: var(--gold); text-decoration: none; }
    .nearby-addr { font-size: 0.77rem; color: var(--ink3); display: block; }
    .nearby-dist {
      display: inline-block; margin-top: 8px;
      font-size: 0.7rem; font-weight: 600;
      color: var(--gold); background: var(--gold-bg);
      padding: 2px 8px; border-radius: 20px;
    }

    /* ── Cities ── */
    .cities-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
    .city-chip {
      display: inline-block;
      background: var(--surface); border: 1px solid var(--line);
      color: var(--ink2); font-size: 0.8rem; font-weight: 500;
      padding: 6px 14px; border-radius: 100px;
      transition: all 0.15s;
    }
    .city-chip:hover {
      background: var(--ink); color: #fff;
      border-color: var(--ink); text-decoration: none;
    }

    /* ── More paragraph ── */
    .more-para {
      font-size: 0.82rem; color: var(--ink3); line-height: 1.8;
      margin-top: 28px; padding: 18px 20px;
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--r);
    }
    .more-para a { color: var(--ink3); font-weight: 500; }
    .more-para a:hover { color: var(--gold); }

    /* ── Footer ── */
    .site-footer {
      background: var(--accent); color: rgba(255,255,255,0.4);
      text-align: center; padding: 24px 20px;
      font-size: 0.8rem; margin-top: 56px;
    }
    .site-footer a { color: rgba(255,255,255,0.6); }
    .site-footer a:hover { color: var(--gold); text-decoration: none; }

    /* ── Responsive ── */
    @media (max-width: 800px) {
      .content-grid { grid-template-columns: 1fr; }
      .sidebar { order: -1; }
      .breadcrumb { display: none; }
      .nearby-list { grid-template-columns: 1fr; }
      .info-grid { grid-template-columns: 1fr; }
      .info-cell:nth-child(odd) { padding-right: 0; border-right: none; }
      .info-cell:nth-child(even) { padding-left: 0; }
      .info-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
      .info-cell:last-child { border-bottom: none; }
    }
.solocalbloc {
	margin-top:15px;
}