.blog-hero { background: #024d8e; color: #fff; padding: 42px 0 46px; text-align: center; }
.blog-hero .sailing-shell { display: grid; justify-items: center; gap: 22px; }
.blog-hero h1 { margin: 0; font: 700 clamp(38px, 5vw, 58px)/1.05 "Trebuchet MS", Arial, sans-serif; }
.blog-hero a { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 11px 24px; border: 2px solid #fff; border-radius: 6px; color: #fff; font: 700 16px/1.25 "Trebuchet MS", Arial, sans-serif; transition: background-color .2s ease, color .2s ease; }
.blog-hero a:hover, .blog-hero a:focus-visible { background: #fff; color: #024d8e; }
.blog-archive { background: rgba(224, 224, 224, .99); }
.blog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; row-gap: 35px; padding-block: 50px 72px; }
.blog-card { min-width: 0; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 3px 14px rgba(25, 42, 56, .17); transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(25, 42, 56, .22); }
.blog-card__image { display: block; aspect-ratio: 1.515/1; overflow: hidden; background: #024d8e; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__image img { transition: transform .35s ease, filter .35s ease; }
.blog-card:hover .blog-card__image img { transform: scale(1.035); filter: brightness(.82); }
.blog-card__image > span { display: grid; height: 100%; place-items: center; color: #fff; font-size: 54px; }
.blog-card__body { display: flex; min-height: 210px; flex-direction: column; align-items: flex-start; padding: 20px 24px 24px; }
.blog-card h2 { width: 100%; margin: 0 0 13px; color: #024d8e; font: 700 25px/1.18 "Trebuchet MS", Arial, sans-serif; }
.blog-card h2 a { display: block; color: inherit; }
.blog-card p { margin: 0 0 20px; color: #3d4b57; font-size: 16px; }
.blog-more { margin-top: auto; color: #024d8e; font: 500 20px/1.2 "Trebuchet MS", Arial, sans-serif; }
.blog-more:hover, .blog-more:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.blog-pagination { display: flex; grid-column: 1/-1; align-items: center; justify-content: center; gap: 10px; padding-top: 8px; }
.blog-pagination a, .blog-pagination span { display: inline-grid; min-width: 42px; height: 42px; padding: 0 8px; place-items: center; border-radius: 6px; background: #fff; color: #024d8e; font: 700 16px/1 "Trebuchet MS", Arial, sans-serif; box-shadow: 0 2px 8px rgba(25, 42, 56, .12); }
.blog-pagination a:hover, .blog-pagination a:focus-visible, .blog-pagination .is-current { background: #024d8e; color: #fff; }
.blog-pagination .is-disabled { opacity: .4; }
.blog-empty { grid-column: 1/-1; text-align: center; }
.blog-detail { padding: 1px 0; border-block: 1px solid #024d8e; background: #024d8e; }
.blog-detail__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 20px; padding-block: 20px; background: rgba(224, 224, 224, .99); }
.blog-detail__article, .blog-detail__sidebar { min-width: 0; padding: 20px; background: rgba(224, 224, 224, .99); }
.blog-detail__breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: #024d8e; font: 700 20px/1.25 "Trebuchet MS", Arial, sans-serif; }
.blog-detail__breadcrumb a { color: inherit; }
.blog-detail__title { margin: 20px 0 25px; padding: 12px 16px; border-radius: 6px; background: #024d8e; color: #fff; text-align: center; }
.blog-detail__title time { display: block; margin-bottom: 5px; color: #d9e9f6; font-size: 14px; }
.blog-detail__title h1 { margin: 0; color: #fff; font: 700 clamp(25px, 3.3vw, 38px)/1.15 "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; }
.blog-detail__title p { margin: 9px auto 0; max-width: 760px; color: #fff; font-size: 17px; }
.blog-featured { display: block; width: 100%; max-height: 600px; margin: 0 0 25px; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: #fff; cursor: zoom-in; }
.blog-featured img { display: block; width: 100%; max-height: 600px; object-fit: cover; }
.blog-prose { padding: 25px; border-radius: 6px; background: #fff; color: #000; font-size: 17px; line-height: 1.7; }
.blog-prose img { width: auto; max-width: 100%; height: auto; border-radius: 6px; }
.blog-prose h2, .blog-prose h3 { color: #045796; }
.blog-prose h4 { color: #024d8e; font: 700 21px/1.3 "Trebuchet MS", Arial, sans-serif; }
.blog-detail__club { display: flex; min-height: 48px; align-items: center; justify-content: center; margin-top: 24px; padding: 11px 18px; border-radius: 6px; background: #024d8e; color: #fff; text-align: center; font: 700 16px/1.25 "Trebuchet MS", Arial, sans-serif; }
.blog-detail__club:hover, .blog-detail__club:focus-visible { background: #063c69; }
.blog-detail__sidebar > h2 { margin: 0 0 20px; padding: 11px 14px; border-radius: 6px; background: #024d8e; color: #fff; font: 700 25px/1.2 "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; }
.blog-detail__sidebar > h2 a { color: inherit; }
.blog-detail__latest { display: grid; gap: 22px; }
.blog-detail__latest article { overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 3px 12px rgba(25, 42, 56, .13); }
.blog-detail__latest-image { display: block; aspect-ratio: 2/1; overflow: hidden; background: #024d8e; }
.blog-detail__latest-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, filter .3s ease; }
.blog-detail__latest article:hover .blog-detail__latest-image img { transform: scale(1.035); filter: brightness(.85); }
.blog-detail__latest h3 { margin: 15px 18px 8px; color: #024d8e; font: 700 22px/1.25 "Trebuchet MS", Arial, sans-serif; }
.blog-detail__latest h3 a { color: inherit; }
.blog-detail__latest p { margin: 0 18px 10px; color: #465663; }
.blog-detail__read-more { display: inline-block; margin: 0 18px 18px; color: #024d8e; font: 700 16px/1.2 "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; }
.blog-detail__read-more:hover, .blog-detail__read-more:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.blog-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.blog-gallery button { aspect-ratio: 4/3; padding: 0; overflow: hidden; border: 0; border-radius: 6px; cursor: zoom-in; }
.blog-gallery img { width: 100%; height: 100%; object-fit: cover; }
.mile-converter { margin-top: 28px; padding: 25px; border: 1px solid #024d8e; border-radius: 6px; background: #fff; }
.mile-converter > h2 { margin: 0 0 8px; color: #024d8e; font: 700 28px/1.2 "Trebuchet MS", Arial, sans-serif; }
.mile-converter > p { margin: 0 0 20px; }
.mile-converter__section { padding: 18px 0; border-top: 1px solid #ccd7df; }
.mile-converter__section h3 { margin: 0 0 13px; color: #024d8e; font: 700 21px/1.2 "Trebuchet MS", Arial, sans-serif; }
.mile-converter__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.mile-converter__fields--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mile-converter label { display: grid; gap: 7px; color: #1b2c38; font-weight: 700; }
.mile-converter input { width: 100%; min-height: 46px; padding: 9px 12px; border: 2px solid #024d8e; border-radius: 6px; background: #fff; color: #10212e; font: 600 18px/1.2 "Segoe UI", Arial, sans-serif; }
.mile-converter input:focus { outline: 3px solid rgba(2, 77, 142, .2); outline-offset: 1px; }
.mile-converter small { display: block; margin-top: 10px; color: #586a78; }
.mile-converter__error { min-height: 22px; margin: 0; color: #b42318; font-weight: 700; }
.blog-lightbox { width: min(1100px, 94vw); height: min(820px, 92vh); padding: 44px 70px; border: 0; border-radius: 6px; background: #101820; color: #fff; }
.blog-lightbox::backdrop { background: rgba(0,0,0,.82); }
.blog-lightbox figure { display: grid; height: 100%; margin: 0; place-items: center; }
.blog-lightbox figure img { max-width: 100%; max-height: calc(100% - 36px); object-fit: contain; }
.blog-lightbox figcaption { padding-top: 10px; }
.blog-lightbox button { position: absolute; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 30px; }
.blog-lightbox__close { top: 12px; right: 16px; }
.blog-lightbox__prev { top: 48%; left: 18px; }
.blog-lightbox__next { top: 48%; right: 18px; }
@media (max-width: 900px) { .blog-list { grid-template-columns: repeat(2, 1fr); } .blog-detail__grid { grid-template-columns: 1fr; } .blog-detail__sidebar { padding-top: 0; } }
@media (max-width: 620px) { .blog-hero { padding-block: 34px 38px; } .blog-list { grid-template-columns: 1fr; padding-block: 30px 48px; } .blog-card__image { aspect-ratio: 2/1; } .blog-detail__grid { gap: 0; padding-block: 10px; } .blog-detail__article, .blog-detail__sidebar { padding: 12px; } .blog-detail__title { margin-top: 12px; } .blog-prose, .mile-converter { padding: 18px; } .mile-converter__fields, .mile-converter__fields--three { grid-template-columns: 1fr; } .blog-gallery { grid-template-columns: repeat(2, 1fr); } .blog-lightbox { padding-inline: 42px; } }