* { box-sizing: border-box; }
    body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f5f7fa; color: #0f1b2d; line-height: 1.6; }
    header { background: #07111f; border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 5%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
    .logo { text-decoration: none; }
    nav a { color: #c9d5e3; text-decoration: none; margin-left: 12px; font-weight: 600; }
    main { padding: 40px 24px 64px; max-width: 1008px; margin: 0 auto; }
    h1 { font-size: clamp(28px, 5vw, 42px); margin: 0 0 12px; line-height: 1.15; }
    h2 { font-size: clamp(22px, 3.2vw, 28px); margin: 48px 0 10px; }
    h3 { font-size: 17px; margin: 0 0 4px; }
    .lede { color: #5b6b80; margin: 0 0 10px; font-size: 18px; }
    .updated { color: #5b6b80; font-size: 14px; margin: 0 0 24px; }
    p, li { color: #334155; }
    a { color: #b4500b; }
    .hero-photo { width: 100%; border-radius: 14px; overflow: hidden; margin: 8px 0 28px; background: #e3e8ef; aspect-ratio: 16 / 9; }
    .hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .photo-cap { font-size: 13px; color: #5b6b80; margin: 6px 0 0; }
    .toc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; }
    .toc a { display: inline-block; padding: 7px 12px; border: 1px solid #cfd8e3; border-radius: 999px; text-decoration: none; color: #0f1b2d; font-weight: 600; font-size: 14px; background: #fff; }
    .toc a:hover { border-color: #ff7a18; }
    .area { margin: 8px 0 0; }
    main section.area { padding: 0; margin: 0; }
    .area-photo { width: 100%; border-radius: 12px; overflow: hidden; margin: 12px 0 16px; background: #e3e8ef; aspect-ratio: 21 / 9; }
    .area-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .place-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0 0; }
    .place { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(15,27,45,.05); }
    .place p { margin: 0; font-size: 14px; color: #5b6b80; }
    .place a.site { font-size: 13px; font-weight: 700; text-decoration: none; }
    .place a.site:hover { text-decoration: underline; }
    .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5b6b80; background: #f1f4f8; border-radius: 6px; padding: 2px 7px; margin-bottom: 8px; }
    .note { background: #fff3e8; border: 1px solid #f5d4b0; border-radius: 10px; padding: 14px 16px; font-size: 14px; color: #5b3a12; margin: 20px 0; }
    .button { display: inline-block; background: #ff7a18; color: #07111f; text-decoration: none; font-weight: 700; padding: 12px 20px; border-radius: 10px; margin: 6px 10px 6px 0; }
    .button.secondary { background: #fff; border: 1px solid #cfd8e3; color: #0f1b2d; }
    .sources li { font-size: 14px; color: #5b6b80; }
    .credits { font-size: 13px; color: #5b6b80; }
    .credits li { margin: 4px 0; }
    footer { border-top: 1px solid #22324a; padding: 30px 5%; text-align: center; color: #8193aa; font-size: 14px; background: #07111f; }
    footer a { color: #e2e8f0; }
    .logo-img { display: block; height: 38px; width: auto; }
    @media (max-width: 600px) {
      nav a { margin: 0 8px 0 0; }
      main { padding: 28px 5% 48px; }
      .area-photo { aspect-ratio: 16 / 9; }
      .logo-img { height: 32px; }
    }