/* =================================================================
   Seaplanes in Paradise Travel Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: the original Seaplanes in Paradise badge — a sunset over
   palms, a yellow "Seaplanes" script, a white seaplane and a plum "in
   PARADISE" ribbon — read as a vintage airline travel poster.
   Palette from the logo: plum ribbon, pale sun yellow, sunset peach and
   coral, logo navy, on a warm cream "ticket paper" with sky blue.
   Type: Shrikhand (round retro display, like the logo's script) for
   headings, Josefin Sans (spaced art-deco caps, like "in PARADISE") for
   labels and the menu, DM Sans for text.
   Motifs: a sunset strip (stacked bands: sun, peach, coral, plum —
   --sunset) under the header and over the footer; a dotted flight path
   ending in a little seaplane (--flightpath) as the section-title
   ornament; a small seaplane (--plane) as the current-menu marker and in
   kickers; photos as cream-framed travel snapshots with a hard plum
   offset shadow; the home "then and now" band as a boarding pass with a
   perforated stub. Photos are the site's own seaplane and Puerto Rico
   pictures from the old site (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).
   ================================================================= */

:root{
  --paper:   #FFF8EC;   /* ticket paper: header, heroes */
  --paper-2: #F7EBD6;
  --sky:     #D8ECF4;
  --sun:     #F8F290;   /* logo script yellow */
  --gold:    #F2C14E;
  --peach:   #F6B98A;
  --coral:   #E9765B;
  --plum:    #5C2A47;   /* logo ribbon: primary */
  --plum-2:  #7A3A5E;
  --navy:    #00457C;   /* logo navy: links */
  --ink:     #2A2129;
  --muted:   #6B5E66;
  --line:    rgba(92,42,71,.14);

  --font-display: 'Shrikhand', 'Cooper Black', Georgia, serif;
  --font-label:   'Josefin Sans', 'Century Gothic', 'Avenir', Arial, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --sunset: linear-gradient(180deg, var(--sun) 0 25%, var(--peach) 25% 50%, var(--coral) 50% 75%, var(--plum) 75% 100%);
  --plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 12 58 30'%3E%3Cg fill='%235C2A47'%3E%3Cpath d='M10 26 7 15h5l7 10z'/%3E%3Cpath d='M10 25l32-2c7 0 12 1 14 4v2c-4 2-10 2-16 2H13z'/%3E%3Cpath d='M23 19h24v3H23z'/%3E%3Cpath d='M27 31l-3 6h2.5l3-6zM45 31l2 6h-2.5l-2-6z'/%3E%3Cpath d='M16 37h36c4 0 6 1 7 3l-3 1H18z'/%3E%3C/g%3E%3C/svg%3E");
  --plane-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 12 58 30'%3E%3Cg fill='%23F8F290'%3E%3Cpath d='M10 26 7 15h5l7 10z'/%3E%3Cpath d='M10 25l32-2c7 0 12 1 14 4v2c-4 2-10 2-16 2H13z'/%3E%3Cpath d='M23 19h24v3H23z'/%3E%3Cpath d='M27 31l-3 6h2.5l3-6zM45 31l2 6h-2.5l-2-6z'/%3E%3Cpath d='M16 37h36c4 0 6 1 7 3l-3 1H18z'/%3E%3C/g%3E%3C/svg%3E");
  --flightpath: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 32'%3E%3Cpath d='M3 28C38 28 66 12 104 14' fill='none' stroke='%23E9765B' stroke-width='2.6' stroke-linecap='round' stroke-dasharray='1 7'/%3E%3Cg fill='%235C2A47' transform='translate(104 2) scale(.78)'%3E%3Cpath d='M10 26 7 15h5l7 10z'/%3E%3Cpath d='M10 25l32-2c7 0 12 1 14 4v2c-4 2-10 2-16 2H13z'/%3E%3Cpath d='M23 19h24v3H23z'/%3E%3Cpath d='M27 31l-3 6h2.5l3-6zM45 31l2 6h-2.5l-2-6z'/%3E%3Cpath d='M16 37h36c4 0 6 1 7 3l-3 1H18z'/%3E%3C/g%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(--navy); }
a:hover{ color: var(--coral); }
:focus-visible{ outline: 3px solid var(--coral); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0; color: var(--plum); }
h1 em, h2 em{ font-style: normal; color: var(--coral); }

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

.plane{ display: inline-block; width: 30px; height: 16px; margin-right: 10px; vertical-align: -1px; background: var(--plane) 0 0 / 100% 100% no-repeat; }

/* ---------- Brand (header + footer): the original sunset badge ---------- */
.brand{ display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; color: var(--plum); }
.brand:hover{ color: var(--plum); }
.brand__logo{ height: 62px; width: auto; }
.brand__tag{ font: 600 11.5px/1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-left: 3px; white-space: nowrap; }
.site-footer .brand__logo{ height: 78px; }
.site-footer .brand__tag{ color: rgba(255,255,255,.7); }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .site-header .brand__logo{ height: 52px; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: rgba(255,248,236,.97); backdrop-filter: blur(6px); }
.site-header::after{ content: ""; display: block; height: 12px; background: var(--sunset); }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 700 14px/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--sun);
  background: var(--plum); border: 0; border-radius: 999px; padding: 13px 20px 11px; 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: 4px 0 12px; }
.bnet-menu a{
  display: block; padding: 12px 2px 9px;
  font: 600 15.5px/1.3 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--plum); text-decoration: none;
  border-top: 1px dashed var(--line);
}
.bnet-menu a:hover{ color: var(--coral); }

/* 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(--coral); }

@media (min-width: 1300px){
  /* 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: 1300px; 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: 10px 7px 20px; font-size: 13.5px; letter-spacing: .06em; white-space: nowrap; position: relative; }
  /* the current page gets a little seaplane */
  .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: 2px; width: 26px; height: 14px; margin-left: -13px;
    background: var(--plane) 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(--plum); }
}

/* ---------- Heroes: sky over ticket paper, with a flight path drawn behind ---------- */
.hero{ position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky) 0%, var(--paper) 62%, #fff 100%); }
.hero::before{
  /* a dotted flight path in the corner of the sky (wide screens only, clear of the title) */
  content: ""; position: absolute; right: 24px; top: 22px; width: 300px; height: 64px; pointer-events: none; opacity: .55;
  background: var(--flightpath) right top / contain no-repeat; display: none;
}
@media (min-width: 1240px){ .hero::before{ display: block; } }
.hero__inner{ position: relative; max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 70px; }
.hero__copy{ max-width: 900px; }
.hero__kicker{ margin: 0 0 18px; font: 700 14.5px/1.4 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--plum-2); }
.hero__title{
  font-size: clamp(38px, 5.8vw, 72px);
  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(--navy); }
.hero__actions{ margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(34px, 4.8vw, 58px); }
.hero--page .hero__inner{ padding-top: 46px; padding-bottom: 62px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 14px 26px 11px; border-radius: 999px;
  font: 700 14.5px/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn--plum{ background: var(--plum); color: var(--sun); box-shadow: 0 4px 0 var(--coral); }
.btn--plum:hover{ background: var(--plum-2); color: var(--sun); transform: translateY(-2px); box-shadow: 0 6px 0 var(--coral); }
.btn--sun{ background: var(--sun); color: var(--plum); box-shadow: 0 4px 0 var(--coral); }
.btn--sun:hover{ background: #fff; color: var(--plum); transform: translateY(-2px); box-shadow: 0 6px 0 var(--coral); }
.btn--line{ color: var(--plum); box-shadow: inset 0 0 0 2px var(--plum); }
.btn--line:hover{ background: var(--plum); color: var(--sun); }
.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(--plum); }

/* the feature image as a travel snapshot: cream frame, hard plum shadow, sunset edge (includes/banner.incl.php) */
.banner{ margin: 40px 10px 0 0; padding: 10px 10px 0; background: var(--paper); border-radius: 18px; box-shadow: 10px 10px 0 var(--plum), 0 0 0 1px var(--line); overflow: hidden; }
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; border-radius: 10px 10px 0 0; }
.banner::after{ content: ""; display: block; height: 14px; margin: 10px -10px 0; background: var(--sunset); }
.hero--page .banner{ margin-top: 34px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 45%; }
@media (max-width: 600px){
  .banner{ padding: 6px 6px 0; border-radius: 12px; margin-right: 6px; box-shadow: 6px 6px 0 var(--plum), 0 0 0 1px var(--line); }
  .banner img{ border-radius: 7px 7px 0 0; }
  .banner::after{ margin: 6px -6px 0; height: 10px; }
  .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(32px, 4vw, 48px); margin-bottom: 28px; }
.section__title::before, .about-blog h2::before, .explore h2::before, .logbook h2::before{
  content: ""; display: block; width: 120px; height: 26px; margin-bottom: 10px; background: var(--flightpath) 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; }

/* ---------- Where the seaplanes used to fly (home): a pilot's logbook ---------- */
.logbook{ background: var(--sky); padding: 76px 0 84px; }
.logbook__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.logbook h2{ font-size: clamp(32px, 4vw, 48px); margin-bottom: 14px; }
.logbook__intro{ margin: 0 0 30px; max-width: 62ch; color: var(--muted); }
.logbook__list{ list-style: none; counter-reset: leg; margin: 0; padding: 0; display: grid; gap: 14px; }
.logbook__list li{
  counter-increment: leg; position: relative; padding: 18px 20px 18px 92px;
  background: var(--paper); border-radius: 14px; font-size: 16.5px; line-height: 1.55; color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 16px 30px -26px rgba(92,42,71,.9);
}
.logbook__list li::before{
  /* a "leg" number like a flight number on a ticket */
  content: "Leg " counter(leg, decimal-leading-zero); position: absolute; left: 14px; top: 18px; width: 62px; padding: 7px 0 5px;
  background: var(--plum); color: var(--sun); border-radius: 8px; text-align: center;
  font: 700 12.5px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase;
}
.logbook__list li::after{
  /* dashed tear line between the number and the text */
  content: ""; position: absolute; left: 82px; top: 12px; bottom: 12px; border-left: 2px dashed var(--line);
}
.logbook__list strong{ display: block; font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--plum); margin-bottom: 3px; letter-spacing: .01em; }
@media (min-width: 760px){ .logbook__list{ grid-template-columns: 1fr 1fr; } }

/* ---------- We used to fly from Old San Juan (home): a boarding pass ---------- */
.pass-band{ background: var(--plum); color: rgba(255,255,255,.88); padding: 84px 0; position: relative; }
.pass-band::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--sunset); transform: scaleY(-1); }
.pass-band__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.pass-band__photo{ margin: 0 10px 0 0; padding: 10px; background: var(--paper); border-radius: 18px; box-shadow: 10px 10px 0 var(--coral); }
.pass-band__photo img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.pass{ display: grid; background: rgba(255,255,255,.06); border-radius: 18px; box-shadow: inset 0 0 0 1.5px rgba(248,242,144,.35); }
.pass__main{ padding: 28px 26px 30px; }
.pass__label{ margin: 0 0 12px; font: 700 13px/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--peach); }
.pass h2{ color: var(--sun); font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 16px; }
.pass p{ margin: 0 0 14px; max-width: 54ch; }
.pass__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px !important; }
.pass__stub{
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-content: center;
  padding: 22px 26px; border-top: 2px dashed rgba(248,242,144,.4);
}
.pass__k{ font: 700 11.5px/1.6 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--peach); }
.pass__v{ font: 700 15px/1.5 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.pass__v--status{ color: var(--sun); }
@media (min-width: 640px){
  .pass{ grid-template-columns: 1fr auto; }
  .pass__stub{ border-top: 0; border-left: 2px dashed rgba(248,242,144,.4); grid-template-columns: 1fr; gap: 0; padding: 26px 24px; }
  .pass__v{ margin-bottom: 12px; }
  .pass__v:last-child{ margin-bottom: 0; }
}
@media (min-width: 960px){ .pass-band__inner{ grid-template-columns: .9fr 1.1fr; gap: 56px; } }

/* ---------- 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(32px, 4vw, 48px); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 20px; font: 700 13.5px/1.4 var(--font-label); letter-spacing: .16em; 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: 11px 22px 8px; border-radius: 999px;
  background: var(--plum); color: var(--sun); text-decoration: none; font: 700 14px/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
}
.follow a:hover{ background: var(--coral); 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(--paper); }
.explore__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.explore h2{ font-size: clamp(30px, 3.6vw, 42px); 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; margin-right: 8px; padding: 8px; background: #fff; border-radius: 16px; box-shadow: 8px 8px 0 var(--plum), 0 0 0 1px var(--line); transition: transform .25s ease, box-shadow .25s ease; }
.tile:hover .tile__img{ transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--coral), 0 0 0 1px var(--line); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 9px; }
.tile__title{ display: block; margin-top: 18px; font-family: var(--font-display); font-size: 26px; color: var(--plum); line-height: 1.15; }
.tile:hover .tile__title{ color: var(--coral); }
.tile__text{ display: block; margin-top: 4px; color: var(--muted); }

/* ---------- Share ---------- */
.share{ padding: 32px 0 80px; background: var(--paper); }
.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: 700 13.5px/1.4 var(--font-label); letter-spacing: .14em; 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(--coral); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--plum); color: rgba(255,255,255,.82); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 14px; background: var(--sunset); 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: 700 14px/1.4 var(--font-label); letter-spacing: .16em; 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: 12px; 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; }
}