/* =================================================================
   Antigua Car Rentals Caribbean Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: "Sky" over Antigua & Barbuda — the rising sun of the
   national flag in a wide Caribbean sky. Colours from the flag, used
   as accents: sun gold, red, black, blue, white, on a pale sky.
   Type: Big Shoulders Display (tall, bold, road-sign-like capitals —
   a nod to the car-rental roots) for headings, Big Shoulders Text for
   labels/menu/buttons, Instrument Sans for text.
   Motifs: a rising sun (--sun: gold half-disc with rays on a blue
   horizon) as the brand mark, kicker, section-title ornament and
   current-menu marker; a huge faint sunburst rising behind the heroes
   and the Top 10 band (--sun-big); a row of little flag "V" pennants
   (--vstrip: red with black/blue/white chevrons) under the header and
   over the footer; feature images cut with a shallow "V" along the
   bottom edge, like the flag; the Top 10 as numbered cards with big
   outlined numbers on a night-sky band.
   Photos: royalty-free Antigua & Barbuda photos from Unsplash (owner's
   request), not the shared blog pictures.
   Deliberately different from the other network sites (oceansidebistro.net
   waves, asianrestaurantvi.com lacquer frames, baznotik.com sail slants,
   bowlingvi.com retro marquee, chenaybay.com cabana stripes, chinchillasskb.com
   volcano domes, greenervi.com leaf cuts, istanbulturkishrestaurant.com
   Iznik tiles, lapausemartinique.com lanterns, laoboutique.com gold rings,
   laplacesxm.com enamel street signs, mokpropertiespr.com site-plan grid,
   nohayliga.com checkered flags, northsidebistro.com veranda railings,
   paradiserentalspr.com bike lanes, sanjuanwatertours.com signal flags,
   racersclubpr.com runway markings, saffronhouseexuma.com Exuma shallows,
   seaplanesinparadise.com flight paths, secrethavenvilla.com palm shade).
   ================================================================= */

:root{
  --sky:     #E3F2FB;   /* hero sky */
  --sky-2:   #BFE2F6;
  --blue:    #0072C6;   /* flag blue: links, accents */
  --night:   #0B2545;   /* Top 10 band, footer */
  --night-2: #13315C;
  --red:     #CE1126;   /* flag red: primary buttons */
  --red-2:   #A80D1F;
  --sun:     #FCD116;   /* flag sun */
  --black:   #111111;
  --ink:     #1A2230;
  --muted:   #5A6577;
  --line:    rgba(11,37,69,.14);

  --font-display: 'Big Shoulders Display', 'Oswald', 'Arial Narrow', sans-serif;
  --font-label:   'Big Shoulders Text', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --vcut: polygon(0 0, 100% 0, 100% 94%, 50% 100%, 0 94%);
  --sunrise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 34'%3E%3Cpath d='M44.0 33.0L62.0 32.0L44.0 31.0ZM43.9 30.7L61.4 26.1L43.5 28.7ZM43.4 28.4L59.7 20.5L42.7 26.5ZM42.5 26.2L56.9 15.3L41.4 24.5ZM41.2 24.3L53.2 10.8L39.7 22.8ZM39.5 22.6L48.7 7.1L37.8 21.5ZM37.5 21.3L43.5 4.3L35.6 20.6ZM35.3 20.5L37.9 2.6L33.3 20.1ZM33.0 20.0L32.0 2.0L31.0 20.0ZM30.7 20.1L26.1 2.6L28.7 20.5ZM28.4 20.6L20.5 4.3L26.5 21.3ZM26.2 21.5L15.3 7.1L24.5 22.6ZM24.3 22.8L10.8 10.8L22.8 24.3ZM22.6 24.5L7.1 15.3L21.5 26.2ZM21.3 26.5L4.3 20.5L20.6 28.4ZM20.5 28.7L2.6 26.1L20.1 30.7ZM20.0 31.0L2.0 32.0L20.0 33.0Z' fill='%23FCD116'/%3E%3Cpath d='M20 32a12 12 0 0 1 24 0Z' fill='%23FCD116'/%3E%3Crect x='4' y='31' width='56' height='3' fill='%230072C6'/%3E%3C/svg%3E");
  --sunrise-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath d='M269.9 203.5L395.0 200.0L269.9 196.5ZM269.7 193.5L393.0 172.2L268.7 186.6ZM268.1 183.7L387.1 145.1L266.1 176.9ZM265.0 174.1L377.4 119.0L262.1 167.8ZM260.7 165.1L364.0 94.6L256.9 159.3ZM255.1 156.9L347.4 72.3L250.5 151.6ZM248.4 149.5L327.7 52.6L243.1 144.9ZM240.7 143.1L305.4 36.0L234.9 139.3ZM232.2 137.9L281.0 22.6L225.9 135.0ZM223.1 133.9L254.9 12.9L216.3 131.9ZM213.4 131.3L227.8 7.0L206.5 130.3ZM203.5 130.1L200.0 5.0L196.5 130.1ZM193.5 130.3L172.2 7.0L186.6 131.3ZM183.7 131.9L145.1 12.9L176.9 133.9ZM174.1 135.0L119.0 22.6L167.8 137.9ZM165.1 139.3L94.6 36.0L159.3 143.1ZM156.9 144.9L72.3 52.6L151.6 149.5ZM149.5 151.6L52.6 72.3L144.9 156.9ZM143.1 159.3L36.0 94.6L139.3 165.1ZM137.9 167.8L22.6 119.0L135.0 174.1ZM133.9 176.9L12.9 145.1L131.9 183.7ZM131.3 186.6L7.0 172.2L130.3 193.5ZM130.1 196.5L5.0 200.0L130.1 203.5Z' fill='%23FCD116'/%3E%3Cpath d='M130 200a70 70 0 0 1 140 0Z' fill='%23FCD116'/%3E%3C/svg%3E");
  --vstrip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16' preserveAspectRatio='none'%3E%3Crect width='32' height='16' fill='%23CE1126'/%3E%3Cpath d='M1 0H31L16 15Z' fill='%23fff'/%3E%3Cpath d='M1.00 0H31.00L22.00 9H10.00Z' fill='%230072C6'/%3E%3Cpath d='M1.00 0H31.00L26.00 5H6.00Z' fill='%23111'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--blue); }
a:hover{ color: var(--red); }
:focus-visible{ outline: 3px solid var(--sun); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 800; line-height: 1.02; margin: 0; color: var(--night); text-transform: uppercase; letter-spacing: .01em; }
h1 em, h2 em{ font-style: normal; color: var(--red); }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--night); color: #fff; padding: 10px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus{ top: 12px; }

.sun{ display: inline-block; width: 34px; height: 18px; margin-right: 10px; vertical-align: -2px; background: var(--sunrise) 0 0 / 100% 100% no-repeat; }

/* ---------- Brand (header + footer): rising sun + "Antigua Car Rentals" ---------- */
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--night); }
.brand:hover{ color: var(--night); }
.brand__mark{ flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--black) var(--sunrise) center 62% / 78% auto no-repeat; box-shadow: inset 0 -7px 0 var(--blue); }
.brand__text{ display: flex; flex-direction: column; line-height: 1; }
.brand__name{ font: 900 30px/0.95 var(--font-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.brand__tag{ margin-top: 4px; font: 700 12.5px/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.site-footer .brand{ color: #fff; }
.site-footer .brand__tag{ color: var(--sun); }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; gap: 10px; }
  .site-header .brand__mark{ width: 44px; height: 44px; }
  .site-header .brand__name{ font-size: 22px; white-space: normal; }
  .site-header .brand__text{ min-width: 0; }
  .site-footer .brand{ max-width: 100%; }
  .site-footer .brand__text{ min-width: 0; }
  .site-footer .brand__name{ white-space: normal; font-size: 26px; }
  .site-header .brand__tag{ font-size: 10.5px; letter-spacing: .1em; white-space: normal; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(6px); }
.site-header::after{ content: ""; display: block; height: 12px; background: var(--vstrip) 0 0 / 24px 12px repeat-x; }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 800 16px/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: var(--red); border: 0; border-radius: 6px; padding: 13px 20px; cursor: pointer;
}
html:not(.js) .nav-toggle{ display: none; }

.site-nav{ flex-basis: 100%; }
.js .site-nav{ display: none; }
.js .site-nav.is-open{ display: block; }

.bnet-menu{ list-style: none; margin: 0; padding: 6px 0 12px; }
.bnet-menu a{
  display: block; padding: 11px 2px;
  font: 800 18px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--night); text-decoration: none;
  border-top: 1px solid var(--line);
}
.bnet-menu a:hover{ color: var(--red); }

/* active page: body page-* class + li bnet-* class */
.page-home .bnet-home a,
.page-website-solutions .bnet-website-solutions a,
.page-thrive .bnet-thrive a,
.page-directory .bnet-directory a,
.page-photos .bnet-photos a,
.page-free-stuff .bnet-free-stuff a,
.page-blog-network .bnet-blog-network a{ color: var(--red); }

@media (min-width: 1260px){
  /* full menu only when logo + menu fit side by side (header can be a little wider than the page content) */
  .site-header__inner{ max-width: 1260px; flex-wrap: nowrap; }
  .site-header .brand{ flex: none; }
  .site-nav, .js .site-nav{ display: block; flex-basis: auto; margin-left: auto; min-width: 0; }
  .nav-toggle{ display: none; }
  .bnet-menu{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding: 0; }
  .bnet-menu a{ border-top: 0; padding: 8px 8px 22px; font-size: 16px; letter-spacing: .05em; white-space: nowrap; position: relative; }
  /* the current page gets a little rising sun */
  .page-home .bnet-home a::after,
  .page-website-solutions .bnet-website-solutions a::after,
  .page-thrive .bnet-thrive a::after,
  .page-directory .bnet-directory a::after,
  .page-photos .bnet-photos a::after,
  .page-free-stuff .bnet-free-stuff a::after,
  .page-blog-network .bnet-blog-network a::after{
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 30px; height: 16px; margin-left: -15px;
    background: var(--sunrise) 0 0 / 100% 100% no-repeat;
  }
  .page-home .bnet-home a,
  .page-website-solutions .bnet-website-solutions a,
  .page-thrive .bnet-thrive a,
  .page-directory .bnet-directory a,
  .page-photos .bnet-photos a,
  .page-free-stuff .bnet-free-stuff a,
  .page-blog-network .bnet-blog-network a{ color: var(--night); }
}

/* ---------- Heroes: a wide sky with the sun rising behind ---------- */
.hero{ position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky) 0%, #fff 100%); }
.hero::before{
  content: ""; position: absolute; right: -60px; top: 40px; width: 640px; height: 320px; pointer-events: none; opacity: .22;
  background: var(--sunrise-big) center bottom / contain no-repeat;
}
.hero__inner{ position: relative; max-width: var(--wrap); margin: 0 auto; padding: 54px var(--gutter) 72px; }
.hero__copy{ max-width: 920px; }
.hero__kicker{ margin: 0 0 14px; font: 800 16px/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.hero__title{
  font-size: clamp(44px, 7vw, 92px);
  text-wrap: balance;
}
.hero__lede{ margin: 20px 0 0; max-width: 58ch; font-size: clamp(17.5px, 1.6vw, 20px); color: var(--muted); }
.hero__lede a{ color: var(--blue); }
.hero__actions{ margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(42px, 6vw, 76px); }
.hero--page .hero__inner{ padding-top: 46px; padding-bottom: 62px; }
@media (max-width: 700px){ .hero::before{ width: 380px; height: 190px; right: -110px; top: 20px; } }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 24px; border-radius: 6px;
  font: 800 17px/1.15 var(--font-label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.btn--red{ background: var(--red); color: #fff; }
.btn--red:hover{ background: var(--red-2); color: #fff; transform: translateY(-2px); }
.btn--sun{ background: var(--sun); color: var(--black); }
.btn--sun:hover{ background: #fff; color: var(--black); transform: translateY(-2px); }
.btn--line{ color: var(--night); box-shadow: inset 0 0 0 2px var(--night); }
.btn--line:hover{ background: var(--night); color: #fff; }
.btn--line-light{ color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.btn--line-light:hover{ background: #fff; color: var(--night); }

/* the feature image with a shallow flag "V" cut along its bottom edge (includes/banner.incl.php) */
.banner{ margin: 40px 0 0; filter: drop-shadow(0 22px 26px rgba(11,37,69,.28)); }
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; border-radius: 14px 14px 0 0; clip-path: var(--vcut); }
.hero--page .banner{ margin-top: 34px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 45%; }
@media (max-width: 600px){
  .banner img{ border-radius: 10px 10px 0 0; }
  .hero--page .banner img{ aspect-ratio: 1280 / 500; }
}

/* ---------- Generic sections ---------- */
.section{ padding: 64px 0 80px; }
.section__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section__title{ font-size: clamp(40px, 5vw, 60px); margin-bottom: 28px; }
.section__title::before, .about-blog h2::before, .explore h2::before, .topten h2::before, .kite h2::before, .focus h2::before{
  content: ""; display: block; width: 52px; height: 28px; margin-bottom: 10px; background: var(--sunrise) 0 0 / 100% 100% no-repeat;
}
.embed{ min-height: 320px; }

/* page content runs the full content width, same as "Keep exploring";
   the gandor.tv widgets cap themselves at 920px in their own styles */
.network-embed > div[class^="gtv-"]{ max-width: none; margin-top: 0; margin-bottom: 0; }

/* Third-party embeds paint their own white/cream panels; let the page
   background show through (cards inside keep theirs). !important
   because these widgets inject their CSS after ours. */
.page-home .eapps-facebook-feed-inner,
.page-photos .eapps-instagram-feed-header,
.page-thrive .cc-thrive-widget,
.page-directory .network-embed .ui-tabs,
.page-directory .network-embed .ui-tabs-nav,
.page-directory .network-embed .ui-tabs-panel,
.page-directory .network-embed .directory-card{ background: transparent !important; }

/* ---------- Top 10 things to do (home): numbered cards on a night sky ---------- */
.topten{ position: relative; overflow: hidden; background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); color: rgba(255,255,255,.86); padding: 84px 0 92px; }
.topten::before{
  content: ""; position: absolute; left: 50%; bottom: -10px; width: 1100px; height: 550px; margin-left: -550px; pointer-events: none; opacity: .09;
  background: var(--sunrise-big) center bottom / contain no-repeat;
}
.topten__inner{ position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.topten__kicker{ margin: 0 0 4px; font: 800 16px/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--sun); }
.topten h2{ color: #fff; font-size: clamp(42px, 6vw, 76px); margin-bottom: 36px; }
.topten h2 em{ color: var(--sun); }
.topten__list{ list-style: none; counter-reset: top; margin: 0; padding: 0; display: grid; gap: 18px; }
.topten__item{
  counter-increment: top; position: relative; padding: 22px 22px 22px 98px; min-height: 120px;
  background: rgba(255,255,255,.06); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  border-top: 4px solid var(--red);
}
.topten__item:nth-child(3n+2){ border-top-color: var(--sun); }
.topten__item:nth-child(3n+3){ border-top-color: var(--blue); }
.topten__item::before{
  /* big outlined number */
  content: counter(top); position: absolute; left: 18px; top: 10px; width: 66px; text-align: center;
  font: 900 64px/1 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--sun);
}
.topten__item:first-child::before{ color: var(--sun); }
.topten__tag{ display: inline-block; margin-bottom: 6px; padding: 3px 9px 2px; border-radius: 4px; background: rgba(252,209,22,.14); color: var(--sun); font: 800 12.5px/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
.topten__item h3{ color: #fff; font-size: 27px; margin-bottom: 6px; }
.topten__item p{ margin: 0; font-size: 16.5px; line-height: 1.55; }
@media (min-width: 760px){ .topten__list{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ .topten__item{ padding-left: 80px; } .topten__item::before{ width: 52px; font-size: 52px; left: 14px; } }

/* ---------- Kitesurf Antigua promotion (home) ---------- */
.kite{ position: relative; background: linear-gradient(160deg, var(--blue) 0%, #0A5EA8 100%); color: rgba(255,255,255,.9); padding: 84px 0; }
.kite::before, .kite::after{ content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--vstrip) 0 0 / 24px 12px repeat-x; }
.kite::before{ top: 0; }
.kite::after{ bottom: 0; transform: scaleY(-1); }
.kite__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.kite__photo{ margin: 0; filter: drop-shadow(0 22px 26px rgba(0,0,0,.3)); }
.kite__photo img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px 14px 0 0; clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%); }
.kite__label{ margin: 0 0 8px; font: 800 15px/1.4 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--sun); }
.kite h2{ color: #fff; font-size: clamp(38px, 5vw, 60px); margin-bottom: 14px; }
.kite h2 em{ color: var(--sun); }
.kite p{ margin: 0 0 14px; max-width: 56ch; }
.kite__list{ list-style: none; margin: 6px 0 24px; padding: 0; display: grid; gap: 8px; }
.kite__list li{ position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.5; }
.kite__list li::before{ content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 9px; background: var(--sunrise) 0 0 / 100% 100% no-repeat; }
.kite__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px !important; }
@media (min-width: 900px){ .kite__inner{ grid-template-columns: 1.05fr 1fr; gap: 60px; } }

/* ---------- All about the Caribbean blog (home) ---------- */
.focus{ background: var(--sky); padding: 84px 0; }
.focus__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.focus__photo{ margin: 0; filter: drop-shadow(0 22px 26px rgba(11,37,69,.25)); }
.focus__photo img{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px 14px 0 0; clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%); }
.focus__label{ margin: 0 0 8px; font: 800 15px/1.4 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.focus h2{ font-size: clamp(36px, 4.6vw, 54px); margin-bottom: 14px; }
.focus p{ margin: 0 0 16px; max-width: 56ch; }
@media (min-width: 900px){ .focus__inner{ grid-template-columns: 1fr 1fr; gap: 60px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: #fff; padding: 76px 0 72px; border-top: 1px solid var(--line); }
.about-blog__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 20px;
}
.about-blog h2{ font-size: clamp(38px, 4.6vw, 56px); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 20px; font: 800 15px/1.4 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.follow{ list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.follow a{
  display: inline-block; padding: 9px 20px; border-radius: 6px;
  background: var(--night); color: #fff; text-decoration: none; font: 800 15px/1.3 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
}
.follow a:hover{ background: var(--red); color: #fff; }
@media (min-width: 860px){ .about-blog__inner{ grid-template-columns: 1fr 2fr; gap: 56px; } }

/* ---------- Keep exploring ---------- */
.explore{ padding: 72px 0 32px; background: var(--sky); }
.explore__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.explore h2{ font-size: clamp(36px, 4.4vw, 52px); margin-bottom: 28px; }
.explore__grid{ display: grid; gap: 36px; }
@media (min-width: 760px){ .explore__grid{ grid-template-columns: 1fr 1fr; } }
.tile{ display: block; text-decoration: none; color: var(--ink); }
.tile:hover{ color: var(--ink); }
.tile__img{ display: block; filter: drop-shadow(0 16px 20px rgba(11,37,69,.22)); transition: transform .25s ease; }
.tile:hover .tile__img{ transform: translateY(-4px); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px 12px 0 0; clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); }
.tile__title{ display: block; margin-top: 14px; font: 800 30px/1.05 var(--font-display); text-transform: uppercase; color: var(--night); }
.tile:hover .tile__title{ color: var(--red); }
.tile__text{ display: block; margin-top: 4px; color: var(--muted); }

/* ---------- Share ---------- */
.share{ padding: 32px 0 80px; background: var(--sky); }
.share__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.share__label{ margin: 0; font: 800 15px/1.4 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.share__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share__list a{
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1.5px var(--line);
  transition: box-shadow .2s ease;
}
.share__list a:hover{ box-shadow: 0 0 0 2px var(--red); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--night); color: rgba(255,255,255,.8); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 12px; background: var(--vstrip) 0 0 / 24px 12px repeat-x; transform: scaleY(-1); }
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 64px;
  display: grid; gap: 40px;
}
.site-footer__inner > *{ min-width: 0; }
.site-footer a{ color: #fff; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.site-footer a:hover{ color: var(--sun); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font: 800 16px/1.4 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); margin-bottom: 14px; }
.site-footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__network p{ margin: 0 0 14px; }
.site-footer__network .site-footer__gtv{ margin-bottom: 22px; }
.site-footer__cc{ display: inline-block; background: #fff; border-radius: 10px; padding: 10px 16px; }
.site-footer__cc img{ width: 170px; }
@media (min-width: 900px){
  .site-footer__inner{ grid-template-columns: 1fr 1.4fr 1fr; gap: 56px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .tile__img, .share__list a{ transition: none; }
}